Webpack css-loader failing at @import '~node_module/path/to/css.css'

[webpack-bot]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
In my client/src/style/AlbumDetail.css, I have

@import "~basscss/css/basscss.css";
@import '~react-soundplayer/styles/buttons.css';
@import '~react-soundplayer/styles/cover.css';
@import '~react-soundplayer/styles/icons.css';
@import '~react-soundplayer/styles/progress.css';
@import '~react-soundplayer/styles/volume.css';
...
/* other css classes */
...

Webpack crashes and returns

ERROR in ./node_modules/css-loader??ref--1-1!./src/style/AlbumDetail.css
[1] Module not found: Error: Can't resolve '~basscss/css/basscss.css' in '/mnt/c/Users/ridhwaan/Source/homehost/client/src/styl
e'
[1]  @ ./node_modules/css-loader??ref--1-1!./src/style/AlbumDetail.css 3:10-96
[1]  @ ./src/style/AlbumDetail.css
[1]  @ ./src/components/AlbumDetail.js
[1]  @ ./src/components/Grid.js
[1]  @ ./src/pages/Music.js
[1]  @ ./src/App.js
[1]  @ ./src/index.js
[1]  @ multi ./node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
[1]

If the current behavior is a bug, please provide the steps to reproduce.
Run webpack and webpack-dev-server --inline --hot to reproduce crash

What is the expected behavior?
Webpack should look at node_modules and resolve css

If this is a feature request, what is motivation or use case for changing the behavior?
css-loader fails to resolve node_module css.
Is it failing because I have exclude: /(node_modules|bower_components)/, under test: /\.js$/, in webpack.config.js/?

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

my webpack.config.js

const path = require('path');

var config = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: path.resolve(__dirname, 'public')
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
                { loader: 'babel-loader',
                options: { presets: ['react','env'] } }
            ]
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader", 
                    options: { singleton: true }
                },
                {
                    loader: "css-loader",
                    options: { modules: true }
                }
            ]
        }
        ]
    }
};
module.exports = config;

---

This issue was moved from webpack/webpack#6772 by @ooflorent. Original issue was by @ridhwaans.

[michael-ciniawsky]

/~https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L58-L60

[michael-ciniawsky]

@ridhwaans Could you hack around this by removing options.mode === 'global' from the conditional in node_modules/css-loader/lib/processCss.js (L58-L60), needs further investigation why this check is actually needed :)

[michael-ciniawsky]

Released in v0.28.11 🎉 Please open a new issue in case there are still regressions :)

[ridhwaans]

@michael-ciniawsky was the change tested? the error seems to persist *EDIT (tested with @import '~basscss/css/basscss.css"';) and "devDependencies": {"css-loader": "^0.28.11"})

ERROR in ./node_modules/css-loader??ref--1-1!./src/style/AlbumDetail.css
Module not found: Error: Can't resolve 'basscss/css/basscss.css"' in '/mnt/c/Users/ridhwaan/Source/homehost/client/src/style'
 @ ./node_modules/css-loader??ref--1-1!./src/style/AlbumDetail.css 3:10-97
 @ ./src/style/AlbumDetail.css
 @ ./src/components/AlbumDetail.js
 @ ./src/components/Grid.js
 @ ./src/pages/Music.js
 @ ./src/App.js
 @ ./src/index.js

EDIT sorry i made a typo
LGTM

[michael-ciniawsky]

I tested it with this @import "~basscss/css/basscss.css"; in a small example index.js > style.css (@import) an it worked on macOS (POSIX Paths) at least

css-loader-issue.zip

Can't resolve 'basscss/css/basscss.css"'

Missing ~ ? But maybe that's removed elsewhere now...

Could you test if this small reproduction example works for you (on windows) ?

css-loader-issue.zip

ℹ️ You need to update the css-loader to 0.28.11 in package.json there

Otherwise please provide more info a about your setup and provide a more 'advanced ' reproduction repo please

[georeith]

@michael-ciniawsky works on macOS but not Ubuntu 12.04 for me.