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

[IljaDaderko]

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.

[davidnguyen179]

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

[talolierwork]

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"

[peterh32]

Similar problem happened to me; fixed it by adding -p option to webpack build. In my package.json:

"scripts": {
"prepublish": "webpack -p",

No idea what was happening, but my compiled output had this "Hot Module Reload" section that was causing anything that tried to load the NPM package to barf.

[mckinleymedia]

@clementprevot thanks! Fixed it for me, too.

[princyjain]

React-structured filter date type is working fine in local but not in server.the date picker picks date and creates a token but it doent happen in the server when built via jenkins.
I tried copying node modules but it din't compile.
node-version in local-8.2.1
npm version-5.3.0
in server
node version-6.2.0
npm version-3.8.9
I have changed the npm version to 5.3.0 but it din't work..
Please help..

[Maseeharazzack]

My code works perfectly in dev environment when I try npm run build I get the following error:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/communication-center/comm-center
.component.scss
Module build failed:
.all-common-grid {
^
Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
in D:\dev\Greater_Giving\CommunicationCenter\src\app\communication-center\comm-center.component.scss (line 1, column 1)
@ ./src/app/communication-center/comm-center.component.scss 2:21-317
@ ./src/app/communication-center/comm-center.component.ts
@ ./src/app/communication-center/comm-center.module.ts
@ ./src/app/app-routing.module.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/style.scss
Module build failed:
/* Imported Stylesheet */
^
Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
in D:\dev\Greater_Giving\CommunicationCenter\src\assets\style.scss (line 1, column 1)
@ ./src/assets/style.scss 2:21-286

Following is my code

webpack.config.common.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var webpack = require('webpack');

module.exports = {
entry: {
'app': './src/app/main.ts',
'polyfills': './src/polyfills.ts',
'styles' : './src/assets/style.scss'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
},
{
test: /.html$/,
loaders: ['html-loader']
},
{
test: /.scss$/,
exclude: [ /node_modules/, helpers.root('src', 'style.scss') ],
use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},
{
test: /.scss$/ ,
use: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader'
})
},
{
test: /.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
}
],
exprContextCritical: false
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: 'styles/[name].bundle.css',
allChunks: true,
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CopyWebpackPlugin([
{
from: 'node_modules/froala-editor/css/',
to: 'assets/froala-editor/css/',
},
{
from: 'node_modules/font-awesome/css/font-awesome.min.css',
to: 'assets/font-awesome/css/font-awesome.min.css',
},
{
from: 'node_modules/font-awesome/fonts',
to: 'assets/font-awesome/fonts'
}
]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};

webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('styles.[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
options: {
htmlLoader: {
minimize: false // workaround for ng2
}
}
}),
new UglifyJSPlugin()
]
});

[aliaqdas07]

Did any one get the answer ?

[MladenJanjetovic]

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"?

[pablocattaneo]

As @clementprevot I have updated my node version but running npm rebuild node-sass did'nt solve the problem. So i deleted node_modules and install it again running npm install this solved the problem.

[miltonkowalewski]

For me to solve update node-sass in my case "node-sass": "^4.10.0" and update vue-template-compiler to
"vue-template-compiler": "^2.5.17"

[zethzeth]

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"); }

[btn0s]

@zethodderskov Just coming to say this worked for me. Thank you!!

[iloveyii]

rm node_modules -Rf
npm i

[mmizutani]

Enabling onlyLocals option (onlyLocale in v3 and exportOnlyLocals in v2) worked for me:

webpack.config.js

{
  loader: 'css-loader',
  options: {
    exportOnlyLocals: true
  }
}