Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)

Question

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)

RainLucky opened this issue 5 years ago · comments

ERROR in ./css/xxxx.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error

The detail error under the webpack.config.js , and I sure I had install all the package

I had try
1.Reinstall the image-webpack-loader(still had error)
2.Do not use image-webpack-loader (it works ok)

Hope your reply
Sincerity

---------------------------the line to split------------------------------------------------------------------

package.json

 "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "@babel/runtime": "^7.7.2",
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.7.1",
    "add-asset-html-webpack-plugin": "^3.1.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-remove-strict-mode": "0.0.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.6.0",
    "imagemin-gifsicle": "^6.0.1",
    "mini-css-extract-plugin": "^0.8.2",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10",
    "workbox-webpack-plugin": "^4.3.1"
  },

webpack.config.js:

const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') 
const WorkboxPlugin = require('workbox-webpack-plugin')

const configs = {
    entry: {
        dsixxxxxer: './js/disxxxer.js',
    },
    output: {

        publicPath: './',  
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
 
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: ['/node_modules/'],
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    }, 'css-loader'
                ]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].min.[ext]',
                            outputPath: 'images/',
                            limit: 20000, 
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 64 
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            }
                        }
                    }
                ]
            },

        ]
    }
}

const makePlugins = configs => {
    const plugins = [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[name].min.css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'), 
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, 
            canPrint: true 
        }),
        new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        })
     
    ]
    Object.keys(configs.entry).forEach(item => {
        plugins.push(
            new HtmlWebpackPlugin({
                hash: true,
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    minifyCSS: true,
                    minifyJS: true,
                },
                filename: `/${item}.html`,
                template: `./${item}.html`,
                chunks: [item]
            })
        )
    })

    return plugins;
}

makePlugins(configs)
configs.plugins = makePlugins(configs)
module.exports = configs

Anix · Answer 1 · Mon Dec 23 2019 14:43:26 GMT+0800 (China Standard Time)

do you have any reproducible repo ?

RainLucky · Answer 2 · Mon Dec 23 2019 15:29:24 GMT+0800 (China Standard Time)

do you have any reproducible repo ?
yeah,i just create...
https://github.com/RainLucky/test1

Anix · Answer 3 · Mon Dec 23 2019 15:30:50 GMT+0800 (China Standard Time)

cool
looking into it

Anix · Answer 4 · Mon Dec 23 2019 16:25:56 GMT+0800 (China Standard Time)

Update your image-webpack-loader to 6.0.0 , you are using outdated version, imagemin-pngquant accepts quality as an array but the old loader was not compatible with it
also, update the file and url loader as well.

RainLucky · Answer 5 · Mon Dec 23 2019 16:41:26 GMT+0800 (China Standard Time)

Update your image-webpack-loader to 6.0.0 , you are using outdated version, imagemin-pngquant accepts quality as an array but the old loader was not compatible with it
also, update the file and url loader as well.

 "file-loader": "^5.0.2",
 "image-webpack-loader": "^6.0.0",
 "url-loader": "^3.0.0",

I had update the image-webpack-loader to 6.0.0 and file-loader to 5.0.2 and url-loader to 3.0.0,it still had error.

Anix · Answer 6 · Mon Dec 23 2019 16:43:12 GMT+0800 (China Standard Time)

I had update the image-webpack-loader to 6.0.0 and file-loader to 5.0.2 and url-loader to 3.0.0,it still had error.

thats weird, it's compiling successfully in my machine

try delete the node_modules and rebuild the packages

RainLucky · Answer 7 · Mon Dec 23 2019 17:28:32 GMT+0800 (China Standard Time)

I had update the image-webpack-loader to 6.0.0 and file-loader to 5.0.2 and url-loader to 3.0.0,it still had error.

thats weird, it's compiling successfully in my machine

try delete the node_modules and rebuild the packages

Thanks so much for response
I had try you advice and I found that when it install mozjpeg、pngquant-bin、gifsicle ,it had error:

× Error: Command failed: C:\Windows\system32\cmd.exe /q /s /c "autoreconf -ivf"
'autoreconf' ��ڲ��ⲿ��Ҳ��ǿ��еĳ��
��ļ��

Anix · Answer 8 · Mon Dec 23 2019 17:38:36 GMT+0800 (China Standard Time)

C:\Windows\system32\

Yup this requires admin permission.

Glad to help 😃

RainLucky · Answer 9 · Mon Dec 23 2019 17:50:05 GMT+0800 (China Standard Time)

C:\Windows\system32\

Yup this requires admin permission.

Glad to help 😃

Thanks again~
I had closed this issue

Lstoryc.Luo · Answer 10 · Fri Feb 14 2020 22:21:16 GMT+0800 (China Standard Time)

C:\Windows\system32\

Yup this requires admin permission.
Glad to help 😃

Thanks again~
I had closed this issue

How to fix it? @RainLucky

thx!

Anix · Answer 11 · Fri Feb 14 2020 22:22:33 GMT+0800 (China Standard Time)

try running as a admin !!!

RainLucky · Answer 12 · Sun Mar 15 2020 10:09:28 GMT+0800 (China Standard Time)

C:\Windows\system32\

Yup this requires admin permission.
Glad to help smiley

Thanks again~
I had closed this issue

How to fix it? @RainLucky

thx!

as anikethsaha say,try running as a admin~ @Lstoryc

Hatimtech · Answer 13 · Wed Jun 17 2020 18:24:48 GMT+0800 (China Standard Time)

I had update the image-webpack-loader to 6.0.0 and file-loader to 5.0.2 and url-loader to 3.0.0,it still had error.

thats weird, it's compiling successfully in my machine

try delete the node_modules and rebuild the packages

Deleting node_modules and doing sudo npm install --unsafe-perm=true --allow-root solved the issue.