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-22f7

Answer 1

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

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

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

Answer 2

I had the same issue today, I figured out that I also had to remove webpack.config.js file.

After deleting the file, i had to rerun npm install

-> Application started successfully.

--

Inside webpack.config.js some old references were placed.

Answer 3

For those finding this error with the recent updates to nativescript-vue, I fixed it by changing webpack.config.js (top level file in app folder). As above, it now reflects the syntax in the CleanWebpackPlugin docs.

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

and

//new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
  new CleanWebpackPlugin(),

Answer 4

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 5

This is probably a weird outlier reason for this - but I just came across this while setting up an old project on a new linux machine. It turned out I didn't have dev dependencies installed for my project (by default if npm config is set to production it won't install dev dependencies when running npm install - although I'm not sure exactly why mine was set to production), my webpack cli is 4 but my project is at 2.6.1 so it was using the webpack 4 but my webpack.config was for 2. So make sure your dev dependencies are installed.

Answer 6

CleanWebpackPlugin v3.0.0

Replaced default export with named export CleanWebpackPlugin

[https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0]

correct code is:

// es modules
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

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