CleanWebPackPlugin Error :CleanwebpackPlugin is not a constructor - npm

Question

Im trying to use this plugin: CleanWebpackPlugin.
But it's not running, i can see the Error: "TypeError: CleanWebPackPlugin is not a constructor"
even if i tried all upgrades from the github page: https://github.com/johnagan/clean-webpack-plugin/issues/106
this is my package.json file:
{
"name": "------",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/----/--------.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/-----/-----/issues"
},
"homepage": "https://github.com/----/------#readme",
"dependencies": {
"axios": "^0.19.0",
"lazysizes": "^5.1.2",
"lodash": "^4.17.15",
"normalize.css": "^8.0.1",
"react": "^16.11.0",
"react-dom": "^16.11.0"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-react": "^7.7.0",
"autoprefixer": "^9.6.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"cssnano": "^4.1.10",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-hexrgba": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.2.2",
"postcss-nested": "^4.1.2",
"postcss-simple-vars": "^5.0.2",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
}
}
This is my webpack.config file
const currentTask = process.env.npm_lifecycle_event
const path= require('path')
const {CleanWebPackPlugin} = require ('clean-webpack-plugin')
const postCSSPlugins = [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-simple-vars'),
require('postcss-nested'),
require('postcss-hexrgba'),
require('autoprefixer')
]
let config = {
entry:'./app/assets/scripts/App.js',
module: {
rules:[
{
test:/\.css$/i,
use: ['style-loader','css-loader?url=false',
{loader:'postcss-loader', options:{plugins: postCSSPlugins}}]
}
]
}
}
if (currentTask == 'dev'){
config.output = {
filename:'bundled.js',
path: path.resolve(__dirname,'app')
}
config.devServer = {
before: function(app,server){
server._watch('./app/**/*.html')
},
contentBase: path.join(__dirname, 'app'),
hot:true,
port:3000,
host:'0.0.0.0'
}
config.mode = 'development'
}
if (currentTask == 'build') {
config.output = {
filename:'[name].[chunkhash].js',
chunkFilename:'[name].[chunkhash].js',
path: path.resolve(__dirname,'dist')
}
config.mode = 'production'
config.optimization = {
splitChunks: {chunks: 'all'}
}
//config.plugins = [new CleanWebPackPlugin({dry:true, cleanAfterEveryBuildPatterns:['dist']})]
}
module.exports = config
I tried
const {CleanWebPackPlugin} = require ('clean-webpack-plugin')
and
const CleanWebPackPlugin = require ('clean-webpack-plugin')
I tried
config.plugins = [new CleanWebPackPlugin()]
and
config.plugins = [new CleanWebPackPlugin(['dist'])]
and
config.plugins = [new CleanWebPackPlugin({dry:true, cleanAfterEveryBuildPatterns:['dist']})]
and finally when delete this line, its working, but not with this plugin...