webpack: fine on MacOS, loader errors on linux

Question

I'm having some webpack/raw-loader/sass-sync-loader issues. On my local machine, things run fine. However, on my linux CI server, webpack fails.

Can someone give me a pointer as to how to start diagnosing whats going on? I'm not too sure where to start.

Here's the webpack output on linux:

Hash: 314a28b414704badd07b
Version: webpack 1.4.15
Time: 7350ms
   Asset     Size  Chunks             Chunk Names
 main.js  1648360       0  [emitted]  main
main.css   138069       0  [emitted]  main
    + 595 hidden modules

ERROR in ./~/raw-loader!./~/autoprefixer-loader
!./node_loaders/sass-sync-loader.js?sync&outputStyle=compact&
includePaths[]=/home/u65/src/repo/desktop-prototype/.generated/design-assets&
includePaths[]=/home/u65/src/repo/desktop-prototype/.generated/design-properties&
includePaths[]=/home/u65/src/repo/desktop-prototype/app!./app/index.scss
Module build failed: 
 @ ./app/index.scss 4:14-564

<SNIP>

ERROR in ./app/index.scss Module build failed:
Error: Didn't get a result from child compiler     
at Object.<anonymous> (/home/u65/src/repo/desktop-prototype/
node_modules/extract-text-webpack-plugin/loader.js:90:22)
at Tapable.<anonymous> (/home/u65/src/repo/desktop-prototype/node_modules/webpack/lib/Compiler.js:210:10)     at /home/u65/src/repo/desktop-prototype/node_modules/webpack/lib/Compiler.js:397:12     at Tapable.next (/home/u65/src/repo/desktop-prototype/node_modules/webpack/node_modules/tapable/lib/Tapable.js:69:11)     at Object.<anonymous> (/home/u65/src/repo/desktop-prototype/node_modules/extract-text-webpack-plugin/loader.js:77:5)     at Tapable.next (/home/u65/src/repo/desktop-prototype/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:37)     at CachePlugin.<anonymous> (/home/u65/src/repo/desktop-prototype/node_modules/webpack/lib/CachePlugin.js:40:4)     at Tapable.applyPluginsAsync (/home/u65/src/repo/desktop-prototype/node_modules/webpack/node_modules/tapable/lib/Tapable.js:73:13)     at Tapable.<anonymous> (/home/u65/src/repo/desktop-prototype/node_modules/webpack/lib/Compiler.js:394:9)     at Tapable.<anonymous> (/home/u65/src/repo/desktop-prototype/node_modules/webpack/lib/Compilation.js:534:13)

<SNIP>

ERROR in ./~/raw-loader!./~/autoprefixer-loader!
./node_loaders/sass-sync-loader.js?sync&outputStyle=compact&includePaths[]=
/home/u65/src/repo/desktop-prototype/.generated/designassets&
includePaths[]=/home/u65/src/repo/desktop-prototype/.generated/design-
properties&includePaths[]=/home/u65/src/repo/desktop-prototype/
app!./app/index.scss     
Module build failed: Child extract-text-webpack-plugin:         
+ 1 hidden modules
Child extract-text-webpack-plugin:         
+ 1 hidden modules

Answer 1

As @Richard_Boardman pointed out, Mac is not case-sensitive, but Linux is. So, any misspellings of case will work fine in your Mac dev environment, but fail when you deploy.

You can force Webpack to be more exacting with its filename and path matching in both dev server and build - so misspellings will fail while still on your dev box, rather than on the server - by using a Webpack plugin like case-sensitive-paths-webpack-plugin.

Once you have that installed, you could write some tests such as:

describe("Case-Sensitive Paths Plugin", () => {
  it('shouldn\'t interfere with correctly-spelled imports', () => {
    const getUser1 = require('../src/utils/api');
    expect(getUser1).toBeDefined();
  });

  it('should cause mistakes in filename case to fail import', () => {
    expect(() => {const getUser2 = require('../src/utils/API');}).toThrow();
  });

  it('should cause mistakes in path case to fail import', () => {
    expect(() => {const getUser3 = require('../src/Utils/api');}).toThrow();
  });
});