css-loader: Cannot find module "!!./../node_modules/css-loader/ ...

I ran into this issue today and spent a lot of time figuring out why it is not working, but here is the error I get in inspector tools that I believe is related to css-loader:

Uncaught Error: Cannot find module "!!./../node_modules/css-loader/index.js!./../node_modules/sass-loader/index.js!./main.scss"

and this one in console:

ERROR in ./~/css-loader!./~/sass-loader?sourceMap!./style/main.scss Module build failed: @import './components/Story/story-editor'; ^ File to import not found or unreadable: ./components/Story/story-editor Parent style sheet: stdin in /home/rof/src/github.com/TeamDojo/DojoAdmin/style/main.scss (line 94, column 1) @ ./style/main.scss 4:14-125

This is how I use css loader inside my webpack:

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8081',
    path.resolve(__dirname, 'src/index.js')
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: [node_modules_dir],
      loader: 'babel'
    },
    {
      test: /\.scss$/,
      exclude: [node_modules_dir],
      loader: 'style!css!sass'
    }]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    })
  ]
};

My project structure

...
src/
  index.js
style/
  main.scss

And I’m including my main.css file like this inside index.js

import '../style/main.scss';

node v: 5.6.0

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 13
  • Comments: 26

Commits related to this issue

Most upvoted comments

I faced this problem also but this was because of the node-sass package.

I previously used Node V4.5.0 and then switched to V6.7.0. And node-sass was built for V4.5.0. The error given by webpack wasn’t very clear, but I finally figured it out thanks to Protractor.

I then ran npm rebuild node-sass and everything worked fine so far.

Hope this help some of you

+190
clementprevot on Oct 10, 2016

@IljaDaderko Ur npm version 3+ ? downgrade npm to 2.14.4 fix this problem for me

+133
Usov on Mar 10, 2016

I had exactly the same error and the only fix was to do this but my build time has gone from 8 minutes up to 36 minutes

+24
gilesdermody on Jul 1, 2016

Same problem happened for me today, setting the following (downgrading releases) in package.json solved it: “caniuse-db”: “1.0.30000615”, “extract-text-webpack-plugin”: “2.0.0-beta.5”

+13
talolierwork on Jan 26, 2017

Happens also when You have broken less file (ie missing variable)

+12
menicPL on Aug 5, 2016

rm node_modules -Rf npm i

+9
iloveyii on May 23, 2019

Running Node v. 11.6.0 and got this error.

I’m using scss, compiling it using Laravel-mix. I had some highly wierd results, when using relative paths (../foo/bar) and semi-absolute paths (/foo/bar). It worked when I used absolute paths (http://example.org/for/bar) - but is a shitty solution.

… But then I discovered the tilde ( ~ )!

These didn’t work for me: body { background: url("/wp-content/themes/themename/assets/img/menu-arrow.png"); } body { background: url("../../assets/img/menu-arrow.png"); }

This worked (but is a shitty solution): body { background: url("http://example.org/wp-content/themes/themename/assets/img/menu-arrow.png"); }

This solution worked and is good (notice the ~ in the beginning of the path). body { background: url("~/wp-content/themes/themename/assets/img/menu-arrow.png"); }

+6
zethzeth on Jan 2, 2019

@clementprevot you are a life saver!! thanks a lot.

+5
vasudevsykam on Nov 27, 2016

I faced a similar situation.

bundle.js:15761 Uncaught Error: Cannot find module "!!./../../node_modules/css-loader/index.js!./../../node_modules/style-loader/index.js!./../../node_modules/css-loader/index.js!./member.css"

My solution is configure loader include a not_exist_path, and it worked.

            {
                test: /\.css$/,
                include: [
                    path.resolve(__dirname, "not_exist_path")
                ],
                loader: "style!css"
            },
            {
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
            }

update: these seems to be a configure problem, In my case it appears when I specify loaders both in requireand webpack.config.js. see Unknown word error when loading plain CSS (not Sass or Less)

+5
sdhhqb on Jul 9, 2016

I found out that one of my css files was missing. Node and its errors… I lost half of the day reinstalling and clearing caches and files, and killing processes, and bunch of other stupid stuff. Why it just won’t say “xyz.css file is missing”?

+3
MladenJanjetovic on Feb 19, 2018

@clementprevot That fixed it for me. Thanks!

+3
jasonalmaturner on Oct 20, 2016

nvm .Apparently jenkins box was using node 0.10.30 and updating node to a version 0.12 or higher fixed it.

+3
nehaabrol87 on Sep 21, 2016

Similar issue is happening to us.It works fine locally but when we deploy on other envs via jenkins we see this issue. Node version v4.2.4 .NPM version 3.8.9 Webpack version 1.13.2 Node and npm version did not change on the server though. This stopped working only recently so I don’t think downgrading the npm version would help us. It works fine when we build locally. I have the same node version and npm version on my machine as the jenkins box.

+3
nehaabrol87 on Sep 20, 2016

I had this issue when after ejecting from create-react-app, and adding scss to the webpack.dev.config.js.

I fixed it by adding the .scss to the exclude for url-loader, like the documentation says.

+1
TryingToImprove on Jan 25, 2017
Read more comments on GitHub
← css-loader: broken escaping
css-loader: Cannot @import "bar.scss" when the extension is not .css (4.0.0 regression) →