Gatsby: [v2] Images in css modules cause build to fail

[timurc]

Description

When images are included in a css module, the build fails. Development mode works.

Steps to reproduce

1. Include image in CSS module
2. Use (import) css module
3. Build

Expected result

Should behave the same way it does in development.

Actual result

Crash:

success Building production JavaScript and CSS bundles — 4.523 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  61 |          Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  62 |          if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
> 63 |          return ns;
     | ^
  64 |      };
  65 | 
  66 |      // getDefaultExport function for compatibility with non-harmony modules


  WebpackError: ./src/components/style.module.css

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.5.0 - ~/.nvm/versions/node/v10.5.0/bin/node
    npm: 6.1.0 - ~/.nvm/versions/node/v10.5.0/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 61.0
    Safari: 11.1.1
  npmPackages:
    gatsby: next => 2.0.0-beta.17 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.3 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

I added a css module with an image to the gatsby-default-starter to demonstrate the issue. You can clone into it to see if you can reproduce: https://github.com/timurc/gatsby-starter-default-css-module-image-test

The image is used in the following way:

    background-image: url('./boa.png');

[m-allanson]

Thanks for the repro @timurc! I can confirm I'm seeing the same problem.

[tonybennett]

If anyone needs a quick temporary fix for this like I did:

You can put the images in your static folder and link to the images directly using background-image: url('/boa.png');

[m-allanson]

This might have been a temporary issue, @Chuloo could you try installing the reproduction repo and running it with the latest Gatsby beta? 🙏

[Chuloo]

@m-allanson verified with [email protected] issue is still present and throws:

error Generating JavaScript bundles failed

  Error: ./src/components/style.module.css
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleNotFoundError: Module not found: Error: Can't resolve 'boa.png' in '/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/src/comp  onents'
      at factory.create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/webpack/lib/Compilation.js:796:10)
      at factory (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
      at resolver (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
      at asyncLib.parallel (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
      at /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/neo-async/async.js:2817:7
      at /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/neo-async/async.js:6783:13
      at normalResolver.resolve (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/webpack/lib/NormalModuleFactory.js:214  :25)
      at doResolve (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
      at _fn0 (eval at create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/tapable/lib/HookCodeFactory.js:24:12), <  anonymous>:15:1)
      at resolver.doResolve (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:  37:5)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
      at _fn0 (eval at create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/tapable/lib/HookCodeFactory.js:24:12), <  anonymous>:15:1)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
      at _fn0 (eval at create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/tapable/lib/HookCodeFactory.js:24:12), <  anonymous>:12:1)
      at resolver.doResolve (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/DescriptionFilePlugin  .js:42:38)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
      at _fn42 (eval at create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/tapable/lib/HookCodeFactory.js:24:12),  <anonymous>:390:1)
      at resolver.doResolve (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:2  3:37)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
      at _fn0 (eval at create (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/tapable/lib/HookCodeFactory.js:24:12), <  anonymous>:15:1)
      at hook.callAsync (/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gsdcmit-6290/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
   @ ./src/components/layout.js 8:0-39 34:19-24
   @ ./src/pages/404.js
   @ ./.cache/async-requires.js
   @ ./.cache/production-app.js

[m-allanson]

Thanks @Chuloo, I'll drop this back into the blockers list on the v2 project 👍

[m-allanson]

@pieh pointed out that the path is relative to where the CSS file is imported from... Changing the import to:

-  background-image: url('./boa.png');
+  background-image: url('../components/boa.png');

will work and allow the build to complete. Here's an overview of the directory structure:

components/
  boa.png
  styles.module.css
pages/
  index.js           <-- image path is relative from here

That's not a long-term fix though.

I'm _guessing_ this could be handled with a change to Gatsby's webpack config? I prodded it a bit but didn't come up with any answers. Anyone want to take a look? This is the directory containing Gatsby's webpack setup: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/utils

This seems to be the same issue: #5479

[m-allanson]

Maybe this is an ordering thing? Process url includes in CSS before processing css imports into js?

Do some more research into what the import is relative to - import into a component and then import that component into a page - what happens?

[pieh]

This will probably will need to be re-open soon, because fix seems to be causing other problems (#7552).

There's additional info for this - css-loader seems to be dropping support for modules in next version ( https://github.com/webpack-contrib/css-loader/pull/748 ), so might as well try to migrate early?