Why Webpack imports don't resolve in CI

Stephan Simonett — Thu, 20 May 2021 10:53:48 +0000

Your application is building locally perfectly fine, but in CI, imports are not resolving? I maybe have a hint for you.

Problem statement

Let me lay out the issue I had a little bit more. We build web applications with VueJS. We use Webpack to bundle and optimize the JavaScript code. Imagine the following folder structure:

|-resources
  |-js
    |-Components
      |-TheNavigation
        |-Index.vue
        |-NavLink.vue
      |-TheFooter
        |-Index.vue
    |-Layouts
      |-Default.vue

In the Webpack config, we set an alias to resolve the @ sign to resources/js and omit the .vue file extension. Therefore when we import the navigation and the footer component into the default layout, this looks like the following:

import TheNavigation from '@/Components/TheNavigation'
import TheFooter from '@/Components/TheFooter'

Consistent with the other component names, the Index.vue also starts with a capital letter.

Build fails in CI

We use Github Actions for continuous integration as well as for builds and deployments. We run all workflows on Linux systems.
When we built a project with the situation above, it worked completely fine on our local machines. We use Macs.
When we triggered the build on Github in a Linux container, it failed because it could not resolve the module imports from Webpack.

The problem is that Linux has a case-sensitive system, other than Windows and macOS. Therefore, when you import, as seen above, the System searches for an index.(whateverFileType). On a Mac computer, the System finds the Index.vue file and uses it. But as Linux is case sensitive in file names, it will not recognize Index.vue as the same file as index.vue. Therefore the module can not be resolved.

It took me some time to figure this out, with a hint from this answer on Stack Overflow I realized that case-sensitivity could be the problem. After changing all Index.vue files to index.vue, the build ran on the Linux machine.

Of course, it would be possible to add the whole path, inclusive filename, and extension, but in my opinion, this looks way less clean and is more code to write.

I hope this helps at least one developer, as it was a big pain in the ass to figure out. The solution is not what I was looking for. Rather I was debugging the Webpack config instead, which obviously was utterly useless.

DEV Community: Stephan Simonett

Why Webpack imports don't resolve in CI

Problem statement

Build fails in CI