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.

Background:

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.

The issue:

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.

Investigation:

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? 😉

The solution:

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:

1. Fix the plugin reference to that it matches the exact same path (case-sensitive).
2. 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! ❤️