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

[oltodo]

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

[alampros]

It looks like you have local plugins (/plugins/transformer-remark) that have some dependencies that aren't listed in your main package.json. Try adding all those dependencies or adding the official gatsby-transformer-remark plugin.

[oltodo]

Thanks @alampros for your fast response. I'm afraid to tell you that didn't solved my problem.

[oltodo]

It seems that the build doesn't work as well as I was think.

By searching reset.css term in the generated files, I could observe that the error who display on the console is statically written in the layout-component---index-abc123.js generated file.

[oltodo]

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

[youfoundron]

having the same issue, should I just manually install the plugin's dependencies?

[oltodo]

I just removed the node_modules folder's content and reinstall dependencies using npm install and it worked.

[oltodo]

The problem not seem to coming from the gatsby-transformer-remarkdependency specifically. I didn't install it because I don't need this. And all dependencies I need are already in my node_modules folder.

[alampros]

@rongierlach if by "manually install" you mean add the dependencies to your package.json and rerun yarn/npm install, then yes.

My hunch was that the problem @oltodo ran into here was caused by having local plugins (living in /plugins) that npm/yarn knows nothing about or what they depend on. Any dependencies needed for those plugins to function would have to be included in the root package.json (just like any other part of your project).

Hope this helps!

[youfoundron]

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

[d4ncer]

I'm having the same issue, and I've tried reinstalling packages via npm rather than yarn to no avail. I have no local plugins installed, and apart from a few dependency updates in the last few days, I haven't changed anything else.

Any help would be greatly appreciated, thanks!

[d4ncer]

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).

[misscs]

I'm also having a similar issue. I removed yarn.lock and reinstalled all node_modules. I don't have any local plugins in this project.

@oltodo how did you end up resolving your issue?

[oltodo]

@misscs Yes, by entirely using styled-components. Now, my styles.css file is named styles.js and I use the injectGlobal function :

import { injectGlobal } from 'styled-components';

injectGlobal`
  @font-face {
    font-family: 'Operator Mono';
    src: url('../fonts/Operator-Mono.ttf');
  }

  body {
    margin: 0;
  }
`;

[Undistraction]

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. :(

[misscs]

Thanks for sharing, @oltodo. That makes sense given @Undistraction's confirmation.

[Undistraction]

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.

[dlindahl]

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.

[gifteconomist]

Thanks @dlindahl, giving my import statements a .css extension fixed my build

[KyleAMathews]

Closing this issue as it's fairly old. If you have additional problems in this area, please open a new issue!