Error in using the webpack mini-css-extract-plugin plugin
Solution 1
mini-css-extract-plugin
's loader only takes the output of css-loader
as its input. Your rule for CSS files should look like this:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
This way, the properly formatted CSS will be passed to MiniCssExtractPlugin.loader
for the plugin to extract it from your bundle.
Solution 2
This is one of the first google results for this error message - so even though this fix doesn't relate to the original questioner's config, this might help people in the future.
For me, the fix was removing exportOnlyLocals/exportLocals (depending on your version of css-loader) from the options object (or options.modules object if you're using css-loader v3.x). This will have side effects if you're using prerendering - which I believe is a SSR thing that I'm personally unfamiliar with.
Also ensure that MiniCssExtractPlugin is called before css-loader - as Adam already mentioned.
Related videos on Youtube
user8891963
Updated on June 04, 2022Comments
-
user8891963 almost 2 years
When I run the npm run build fails, referencing the mini-css-extract-plugin:
C:\dev\udemy-restfull\webpack\node_modules\mini-css-extract-plugin\dist\index.js:76 const resource = this._identifier.split('!').pop(); ^ TypeError: Cannot read property 'split' of undefined
I tried to search for the error, but only understood that it depends on the order of the loaders execution, so I left only the MiniCssExtractPlugin.loader and the css-loader, but the error continued.
I went through the documentation and got the simplified settings, also the same error occurred.
I have loaded the bootstrap in index.js so I removed it thinking that it could be the cause, also not good.
can you help me?
Here's my webpack.config.js file:
const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: ["@babel/polyfill", "./src/index.js"], output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new MiniCssExtractPlugin({ filename: 'style.css' }) ], module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, // style-loader { loader: "file-loader" } ] }, { test: /\.(scss)$/, use: [ { loader: MiniCssExtractPlugin.loader, // inject CSS to page / style-loader }, { loader: 'css-loader', // translates CSS into CommonJS modules }, { loader: 'postcss-loader', // Run post css actions options: { plugins: function () { // post css plugins, can be exported to postcss.config.js return [ require('precss'), require('autoprefixer') ]; } } }, { loader: 'sass-loader' // compiles Sass to CSS }] }, ] }, devServer: { contentBase: './dist', port: 9000 } };
Here's my package.json file:
{ "name": "app-webpack", "version": "1.0.0", "description": "teste com webpack", "main": "index.js", "scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production", "start": "webpack-dev-server --mode development" }, "author": "Johnatan Lopes", "license": "ISC", "devDependencies": { "@babel/cli": "^7.1.0", "@babel/core": "^7.1.0", "@babel/preset-env": "^7.1.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "mini-css-extract-plugin": "^0.4.3", "node-sass": "^4.9.3", "postcss-loader": "^3.0.0", "precss": "^3.1.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.9" }, "dependencies": { "@babel/polyfill": "^7.0.0", "bootstrap": "^4.1.3", "jquery": "^3.3.1", "popper.js": "^1.14.4" } }
-
Robert Rowntree over 5 yearstry as a plugin....... new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), ......
-
-
hellatan over 4 yearsthis currently only works if you're not trying to configure the
'css-loader'
. If you're trying to use theoptions
property for a loader, then this will not solve your problem. -
Ambroise Rabier over 3 yearsSeem confirmed here: github.com/webpack-contrib/mini-css-extract-plugin/issues/205. Seem like earlier version of css-loader doesn't have that issue. Another relevant link: webpack.js.org/loaders/css-loader/#exportonlylocals .