TypeError: CleanwebpackPlugin is not a constructor

Question

i'm trying to preview a vue web application through webpack-server-dev.I'm following this guide https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

The guide explains that the plugin is used to delete old and unused files in the dist directory. I have already tried replacing const CleanWebpackPlugin = require('clean-webpack-plugin') with const { CleanWebpackPlugin } = require('clean-webpack-plugin') which some posts suggest. i have also tried looking at the documentation on https://github.com/johnagan/clean-webpack-plugin but without succes as i am pretty new to this.

when i try to npm run dev i get this error

    new CleanWebpackPlugin(['dist']),     ^  TypeError: CleanWebpackPlugin is not a constructor     at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)     at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)     at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)     at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)     at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17     at Array.forEach (<anonymous>)     at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)     at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)     at Module._compile (internal/modules/cjs/loader.js:776:30)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)     at Module.load (internal/modules/cjs/loader.js:653:32)     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)     at Function.Module._load (internal/modules/cjs/loader.js:585:3)     at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)     at startup (internal/bootstrap/node.js:283:19)     at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) 

and this is the webpack.config.js file

const path = require('path')  const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin')  module.exports = (env, argv) => ({   mode: argv && argv.mode || 'development',   devtool: (argv && argv.mode || 'development') === 'production' ? 'source-map' : 'eval',    entry: './src/app.js',    output: {     path: path.resolve(__dirname, 'dist'),     filename: '[name].js'   },    node: false,    module: {     rules: [       {         test: /\.vue$/,         loader: 'vue-loader'       },       {         test: /\.js$/,         loader: 'babel-loader'       },       {         test: /\.css$/,         use: [           'vue-style-loader',           'css-loader'         ],         exclude: /\.module\.css$/       }     ]   },    resolve: {     extensions: [       '.js',       '.vue',       '.json'     ],     alias: {       'vue$': 'vue/dist/vue.esm.js',       '@': path.resolve(__dirname, 'src')     }   },    plugins: [     new CleanWebpackPlugin(['dist']),     new VueLoaderPlugin(),     new HtmlWebpackPlugin({       template: path.resolve(__dirname, 'static', 'index.html'),       inject: true     }),     new CopyWebpackPlugin([{       from: path.resolve(__dirname, 'static'),       to: path.resolve(__dirname, 'dist'),       toType: 'dir'     }])   ],    optimization: {     splitChunks: {       chunks: 'all',       minSize: 30000,       maxSize: 0,       cacheGroups: {         vendors: {           test: /[\\/]node_modules[\\/]/,           priority: -10         },         default: {           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     },     runtimeChunk: {       name: entrypoint => `runtime~${entrypoint.name}`     },     mangleWasmImports: true,     removeAvailableModules: true,     removeEmptyChunks: true,     mergeDuplicateChunks: true   },    devServer: {     compress: true,     host: 'localhost',     https: true,     open: true,     overlay: true,     port: 9000   } });  

this is the error i get when using the right import as explained in the documenation :

      throw new Error(`clean-webpack-plugin only accepts an options object. See:       ^  Error: clean-webpack-plugin only accepts an options object. See:             https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional     at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)     at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)     at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)     at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)     at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)     at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17     at Array.forEach (<anonymous>)     at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)     at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)     at Module._compile (internal/modules/cjs/loader.js:776:30)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)     at Module.load (internal/modules/cjs/loader.js:653:32)     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)     at Function.Module._load (internal/modules/cjs/loader.js:585:3)     at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)     at startup (internal/bootstrap/node.js:283:19)  

if i delete line 56 in webpack.config.js i can run the web application without problems, but i want to understand the source of this issue

Answer 1

The correct one is to use this import:

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 

And then instead of passing an array with the distribution folder, change it to

plugins: [      new CleanWebpackPlugin(),      //... ] 

Answer 2

I had the same problem, and I solved it in the following way：

     const { CleanWebpackPlugin } = require('clean-webpack-plugin');  

     plugins: [         new CleanWebpackPlugin({             cleanAfterEveryBuildPatterns: ['dist']         })     ]