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.
Top comments (0)