Mini-css-extract-plugin: [Windows only] - ModuleNotFoundError: Module not found: Error: Can't resolve...

[julienchazal]

Hello,

Using latest version i get this error only on Windows, it's working perfectly on Mac or Linux :

ERROR in ./public/stylesheets/frontoffice/main.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../public/fonts/fontawesome-webfont.eot?v=4.7.0' in 'C:\wiseed\wiseed-app\public\stylesheets\frontoffice'
    at factory.create (C:\wiseed\wiseed-app\node_modules\webpack\lib\Compilation.js:796:10)
    at factory (C:\wiseed\wiseed-app\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
    at resolver (C:\wiseed\wiseed-app\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
    at asyncLib.parallel (C:\wiseed\wiseed-app\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
    at C:\wiseed\wiseed-app\node_modules\neo-async\async.js:2817:7
    at C:\wiseed\wiseed-app\node_modules\neo-async\async.js:6783:13
    at normalResolver.resolve (C:\wiseed\wiseed-app\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
    at doResolve (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at resolver.doResolve (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at resolver.doResolve (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn42 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:393:1)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at resolver.doResolve (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn1 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:24:1)
    at hook.callAsync (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\wiseed\wiseed-app\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at fs.stat (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\DirectoryExistsPlugin.js:22:13)
    at process.nextTick (C:\wiseed\wiseed-app\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:73:15)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)
 @ ./src/js/modules/frontoffice/init.js 6:0-62
 @ ./src/js/frontoffice.js

webpack config :

//...
    module: {
        rules: [
            {
              test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader //
                },{
                    loader: 'css-loader'// translates CSS into CommonJS
                },{
                    loader: 'postcss-loader',
                    options: {
                        plugins: function() {
                            return [mqpacker, autoprefixer, cleancss];
                        }
                    } // autoprefix CSS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {
                test: /\.(eot|otf|webp|ttf|woff|woff2|svg|png|jpg|gif)(\?.*)?$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            emitFile: false,
                            name (file) {
                                return '../'+file.split('public/')[1];
                            }
                        }
                    },
                ],
            }
        ]
    },
   plugins: [
        new MiniCssExtractPlugin({
            filename: "../stylesheets/[name].min.css"
        }),
///...

Any ideas please ?

[julienchazal]

Can you help me please @sokra or @evilebottnawi ?

[alexander-akait]

@julienchazal please create minimum reproducible test repo

[av3nger]

I have a similar issue, but downgrading resolve-url-loader to 2.* fixes the issue for me.

[julienchazal]

thx @av3nger , i'm closing this issue since i tried on another Windows computer and it worked.
Weird...

[leviwheatcroft]

Just ran into this myself.
In my own case a css directive like background-image: url('../images/someImage.png') threw the error described above, however changing to an absolute path resolved it, like background-image: url('/images/someImage.png').
The thing is though, I don't really understand why mini-css-extract-plugin is trying to resolve a path like that, it's not importing a module it's just the url at which a browser is supposed to be able to find the resource. I see that in the options there's a publicPath option, so my best guess is that this module is converting paths in some way.
I'm not trying to assert that something is wrong with the plugin, or that there's a bug or anything, I'm just trying to understand what this plugin is actually designed to do.

[landsman]

Same here @leviwheatcroft

[cepm-nate]

Running into this as well with a background image url().
Using /path/to/img.png passes the build, but fails to work in the browser. (404 response)
Using path/to/img.png makes this build fail, but putting this path manually into the browser css properties makes it load the image.

Can we have an option to just ignore these paths, and NOT try to load modules from them?

[kaufmann42]

Was this ever resolved? Having this error our my Travis CI builds using the same url() css property.

[PEDx]

update to "mini-css-extract-plugin": "0.8.0" and "resolve-url-loader": "3.1.0", have fixed the issue for me.

[DancingCorpse]

Disable the "url" function handling in "css-loader" resolves this problem for me.
{ loader: 'css-loader', options: { url: false } }