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

[xzilja]

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

[Usov]

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

[abirmingham]

+1

[gilesdermody]

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

[sdhhqb]

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)

[menicPL]

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

[nehaabrol87]

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.

[nehaabrol87]

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

[clementprevot]

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

[jasonalmaturner]

@clementprevot That fixed it for me. Thanks!

[donnellyjoe]

I had the same issue and resolved it by including the es6-promise module: npm i es6-promise --save, then in the webpack config include require('es6-promise').polyfill();

[vasudevsykam]

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

[davidnguyen11]

@clementprevot thank you. It worked!

[TryingToImprove]

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.