gatsby: [1.0] Uncaught Error: Cannot find module "../css/xxx.css"

Hi there. I have a problem with CSS importing on my production Gatsby blog.

After building and deploying (using Surge) I get the following error :

layout-component---index-ab013f8….js:6 Uncaught Error: Cannot find module "../css/reset.css"
    at layout-component---index-ab013f8….js:sourcemap:6
    at Object../node_modules/babel-loader/lib/index.js?{"plugins":["/Users/nbazille/www/m6web.github.io/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","/Users/nbazille/www/m6web.github.io/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/nbazille/www/m6web.github.io/node_modules/babel-plugin-add-module-exports/lib/index.js","/Users/nbazille/www/m6web.github.io/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"presets":["/Users/nbazille/www/m6web.github.io/node_modules/babel-preset-env/lib/index.js","/Users/nbazille/www/m6web.github.io/node_modules/babel-preset-stage-0/lib/index.js","/Users/nbazille/www/m6web.github.io/node_modules/babel-preset-react/lib/index.js"],"cacheDirectory":true}!./src/layouts/index.js (layout-component---index-ab013f8….js:sourcemap:6)
    at t (bootstrap 8345445…:52)
    at index.js?568e:11
    at production-app.js:161
    at index.js?568e:11
    at c (patch.js:18)
    at patch.js:39
    at window.webpackJsonp (bootstrap 8345445…:20)
    at layout-component---index-ab013f8….js:sourcemap:1

The reset.css file is imported in the template/index.js file. Everything works in develop mode. The build command don’t fail.

The weirdest thing is that I got this error few days ago and it disappeared few days after. This error surfaced again today.

I compared with the gatsby/www source code and I didn’t see any big differences about it with my project.

If someone can help me on this I will be very grateful.

Production : http://m6webtech.surge.sh/ Github project : https://github.com/oltodo/m6web.github.io/tree/v2

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 19 (14 by maintainers)

Most upvoted comments

Ok, I’ve isolated the problem to normalize.css in my case, which could possibly be generalized to any 3rd party CSS library installed and imported via npm/yarn.

Having an @import 'normalize.css'; anywhere in an imported CSS file breaks the build in production. Oddly, it still applies the Normalize styles, but blocks rendering of any child pages (doesn’t affect the home page).

d4ncer on Oct 1, 2017

😮 This comment solved my case ! As @alampros mentioned, the problem seems to be coming from a bad dependencies handling.

oltodo on Jul 27, 2017

Given two sites, both with @import statements in my CSS files, one would work and the other wouldn’t. After comparing the two and playing with version numbers, I realized that some of my @import statements did not have the .css extension.

Ensuring that each @import had a .css extension fixed the broken site.

dlindahl on Jan 9, 2018

If this is a limitation of the current setup and not something that can be fixed this definitely needs to be added to the docs.

Undistraction on Jan 4, 2018

I can confirm that the problem is using an @import in a css file referenced from a .css file. It appears to compile the imported styles correctly into the bundled styles.css, but it still raises an RTE:

Uncaught Error: Cannot find module “./index.css” at webpackMissingModule (index.jsx:5) at Object.499 (index.jsx:5) at t (bootstrap 3ee064821e598d86aabc:52) at Object.454 (index.js:3) at t (bootstrap 3ee064821e598d86aabc:52) at index.js?0e1b:9 at loader.js:96 at loader.js:81 at index.js?0e1b:9 at c (patch.js:19)

@d4ncer I’ve tried with multiple files other than normalize - importing from node_modules, importing from same dir etc, and it seems that any import within a css file causes this issue.

The only workaround seems to be to copy all css into a single file. 😦

Undistraction on Dec 13, 2017

My problem was that my entry point was not extension .scss!

youfoundron on Jul 30, 2017