Yesterday I was helping our frontend team to set up a new CI workflow moving from Teamcity + Octopus Deploy to Azure DevOps pipelines and I ran into a weird issue that I thought I would share the solution to in case someone runs in to the same issue.
In the existing CI workflow a Teamcity build run is triggered whenever a PR is merged to the develop branch. One of the first steps in this build run Teamcity will call ”npm install && npm run build”.
As I mentioned, this Teamcity build will now be replaced with Azure DevOps pipelines since our organization is moving away from Teamcity + Octopus Deploy.
But when I created a new Azure DevOps YAML Pipeline and included the exact same command (npm install && npm run build) I got an errors saying:
"ERROR in ./src/components/form-filter/FormFilter.js
Module not found: Error: Can't resolve '../../plugins/OnPageFilter' in '../src/components/form-filter'..."
I found this error really strange, since this error did not occur in the Teamcity build run.
And you can imagine that I was even more puzzled when I cloned the project locally and had no issues running the exact same command. So for some reason this issue only seemed to occur in the Azure DevOps pipeline.
When discussing this issue with one of my coworkers he pointed me in the right direction by mentioning that different OS handle case-sensitivity differently.
By default a new Azure DevOps YAML pipeline is configured to use the vmImage ubuntu-latest however my Teamcity (and local machine) was running Windows OS, so this was clearly a difference worth investigating and it wasn't long before I found this clue:
”The default image for YAML build pipelines is ubuntu-latest.”
I’m not a Linux/Ubuntu ninja, so I had to turn to Google and in the Microsoft Documentation if found that:
”Windows file system treats file and directory names as case-insensitive and Linux file system treats file and directory names as case-sensitive.”.
So I had to start digging in to the components throwing the module error and I found this:
Can you spot the difference? 😉
Turns out that Windows will resolve this plugin even though the casing is referenced differently, but Linux/Ubuntu being case-sensitive will not.
So you have to options to solve this issue in your Azure DevOps YAML pipeline:
- Fix the plugin reference to that it matches the exact same path (case-sensitive).
- Switch your vmImage from ubuntu-latest to windows-latest. This will work with not code changes and it was the solution I went for since I didn’t really want to touch the application code. Instead I added an issue in the backlog to resolve this casing issue and switch back to Ubuntu once this has been fixed.
Sometimes these really small issue can swallow a whole day, which was the case for me.
Hopefully this can save you or someone else from getting stuck on this same issue in the future.
Take care friends! ❤️