[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 } }

[nawaazkortiwalatimes]

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

This worked for me as well. Thanks a lot!

[amb-jarek]

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

it will disable url resolving completely, for all css/scss/... files, including those in node_modules where it may be required. Is it possible to disable url resolution for some files and not for other? Eg, disable it for particular context?

[alexander-akait]

Yes, we have filter for url https://github.com/webpack-contrib/css-loader#object

[amb-jarek]

@alexander-akait Dear sir! You just made my day! Thank you!

For people using Symfony Encore webpack configuration ("@symfony/webpack-encore": "1.6.1")it can be configured like this:

Encore
.configureMiniCssExtractPlugin()
.configureCssLoader(options => {
        options.url = (url, resourcePath) => {
           /**
           ignore resolving images paths with /img/ prefix like:
           background-image: url('/img/bg.jpg');
           */
            if (url.startsWith("/img/")) { 
                //debug:  console.log("Ignoring image url: ", url, " -> ", resourcePath);
                return false;
            }
            return true;
        };
    })
...

[cdpark0530]

For me it's the opposite environment, my build works on Windows but not on Linux docker container(node image) in Windows host. I have no clue if this happens because I'm trying to build my npm project with mounted sources in the Windows host.