Module build failed when using mini-css-extract-plugin with postcss-loader for less
KID-joker opened this issue · 5 comments
- webpack 5.37.1
- mini-css-extract-plugin 1.6.0
- postcss-loader 5.3.0
- less 4.1.1
Expected Behavior
Build success.
Actual Behavior
This is the same problem as bug#522. But I don't know how he solved it. So can you give some answers? Thanks~
ERROR in ./src/views/app.vue?vue&type=style&index=0&lang=less& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/views/app.vue?vue&type=style&index=0&lang=less&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: node.getIterator is not a function
at LazyResult.visitTick (E:\demo\node_modules\postcss\lib\lazy-result.js:522:33)
at LazyResult.runAsync (E:\demo\node_modules\postcss\lib\lazy-result.js:402:30)
at async Object.loader (E:\demo\node_modules\postcss-loader\dist\index.js:87:14)
at processResult (E:\demo\node_modules\webpack\lib\NormalModule.js:700:19)
at E:\demo\node_modules\webpack\lib\NormalModule.js:806:5
at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (E:\demo\node_modules\postcss-loader\dist\index.js:96:7)
@ ./src/views/app.vue?vue&type=style&index=0&lang=less& 1:0-482 1:0-482
@ ./src/views/app.vue 4:0-64
@ ./src/main.js 7:0-32 28:13-20
Code
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = []
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}
loaders.push(cssLoader)
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
return loaders
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
Reproduce
The main(utils.js) code is above.
vue-loader.conf.js
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
webpack.base.conf.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
},
}
webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
}
}
The command to run is cross-env NODE_ENV=production node webpack.prod.conf.js
To get answer please fill out all fields in the issue template - provide steps to reproduce.
To get answer please fill out all fields in the issue template - provide steps to reproduce.
I have updated the reproduction process. If it is not detailed enough, I will update again. Thanks
Can you provide package.json
file?
Can you provide
package.json
file?
{
"name": "demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"dev": "cross-env BABEL_ENV=development NODE_ENV=development webpack server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/webpack.prod.conf.js",
"build:test": "cross-env NODE_ENV=testing env_config=test node build/webpack.test.conf.js"
},
"author": "",
"dependencies": {
"clipboard": "^2.0.8",
"crypto-js": "^4.0.0",
"js-md5": "^0.7.3",
"qiniu-js": "^3.2.0"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-decorators": "^7.14.2",
"@babel/plugin-proposal-export-namespace-from": "^7.14.2",
"@babel/plugin-proposal-function-sent": "^7.12.13",
"@babel/plugin-proposal-json-strings": "^7.14.2",
"@babel/plugin-proposal-numeric-separator": "^7.14.2",
"@babel/plugin-proposal-throw-expressions": "^7.12.13",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/plugin-syntax-jsx": "^7.12.13",
"@babel/plugin-transform-runtime": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"babel-upgrade": "^1.0.1",
"chalk": "^4.1.1",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"copy-webpack-plugin": "^9.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^5.3.1",
"less": "^4.1.1",
"less-loader": "^9.0.0",
"mini-css-extract-plugin": "^1.6.0",
"node-notifier": "^10.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"ora": "^5.4.0",
"portfinder": "^1.0.28",
"postcss": "^8.3.0",
"postcss-import": "^14.0.2",
"postcss-loader": "^5.3.0",
"postcss-px2rem-exclude": "0.0.6",
"postcss-url": "^10.1.3",
"px2rem-loader": "^0.1.9",
"rimraf": "^3.0.2",
"script-ext-html-webpack-plugin": "^2.1.5",
"script-loader": "^0.7.2",
"semver": "^7.3.5",
"shelljs": "^0.8.4",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.7",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I found the postcss plugin postcss-px2rem-exclude
that caused the error.
Thanks for your answer.