mini-css-extract-plugin: [Windows only] - ModuleNotFoundError: Module not found: Error: Can't resolve...
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 ?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 15 (2 by maintainers)
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, likebackground-image: url('/images/someImage.png'). The thing is though, I don’t really understand whymini-css-extract-pluginis 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 apublicPathoption, 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.Disable the “url” function handling in “css-loader” resolves this problem for me.
{ loader: 'css-loader', options: { url: false } }Running into this as well with a background image url(). Using
/path/to/img.pngpasses the build, but fails to work in the browser. (404 response) Usingpath/to/img.pngmakes 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?
update to “mini-css-extract-plugin”: “0.8.0” and “resolve-url-loader”: “3.1.0”, have fixed the issue for me.
Yes, we have
filterforurlhttps://github.com/webpack-contrib/css-loader#objectWas this ever resolved? Having this error our my Travis CI builds using the same url() css property.