Clean-webpack plugin only accepts an option object

Question

Clean-webpack plugin only accepts an option object

sahismailakpolat opened this issue 5 years ago · comments

prod.config.js
  new CleanWebpackPlugin(["dist"], {
      root: path.resolve(__dirname, ".."),
      exclude: ".gitignore"
    `})`

/tmp/build_0a5de4c5f422e680df6606b711a3c373/node_modules/webpack-cli/bin/cli.js:74
remote:                                 throw err;
remote:                                 ^
remote:
remote: Error: clean-webpack-plugin only accepts an options object. See:
remote:             https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-opti

Chris Blossom · Answer 1 · Wed Jun 26 2019 00:10:00 GMT+0800 (China Standard Time)

Change your config to:

new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ['**/*', '!.gitignore'],
})

Please read the readme and #106.

SahAkplt · Answer 2 · Wed Jun 26 2019 22:32:56 GMT+0800 (China Standard Time)

const path = require("path");
const webpackMerge = require("webpack-merge");
const autoprefixer = require("autoprefixer");
const webpackCommon = require("./common.config");

// webpack plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

module.exports = webpackMerge(webpackCommon, {
  bail: true,

  devtool: "source-map",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "../dist"),

    filename: "[name]-[hash].min.js",

    sourceMapFilename: "[name]-[hash].map",

    chunkFilename: "[id]-[chunkhash].js",

    publicPath: "/"
  },

  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                importLoaders: 2
              }
            },
            {
              loader: "postcss-loader",
              options: {
                config: {
                  path: path.resolve(__dirname, "postcss.config.js")
                },
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                outputStyle: "expanded",
                sourceMap: true,
                sourceMapContents: true
              }
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, "../static/index.html"),
      favicon: path.resolve(__dirname, "../static/favicon.ico"),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new CopyWebpackPlugin([{ from: path.resolve(__dirname, "../static") }], {
      ignore: ["index.html", "favicon.ico"]
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!.gitignore'],
  }),
    new DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new ExtractTextPlugin("[name]-[chunkhash].min.css"),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          ie8: true,
          warnings: false
        },
        mangle: {
          ie8: true
        },
        output: {
          comments: false,
          ie8: true
        }
      },
      sourceMap: true
    }),
    new LoaderOptionsPlugin({
      options: {
        context: "/",
        sassLoader: {
          includePaths: [path.resolve(__dirname, "../src")]
        }
      }
    })
  ]
});

SahAkplt · Answer 3 · Wed Jun 26 2019 22:33:58 GMT+0800 (China Standard Time)

SahAkplt commented 5 years ago

SahAkplt · Answer 4 · Wed Jun 26 2019 22:34:45 GMT+0800 (China Standard Time)

I changed to config to new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', '!.gitignore'], }) still receiving same error

SahAkplt · Answer 5 · Wed Jun 26 2019 22:37:08 GMT+0800 (China Standard Time)

Change your config to:
new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ['**/*', '!.gitignore'],
})
Please read the readme and #106.

I changed to config to new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', '!.gitignore'], }) still receiving same error

Chris Blossom · Answer 6 · Wed Jun 26 2019 22:50:17 GMT+0800 (China Standard Time)

Please paste the results of the following command:

npx envinfo --system --binaries --npmPackages clean-webpack-plugin,webpack

Chris Blossom · Answer 7 · Wed Jun 26 2019 23:53:51 GMT+0800 (China Standard Time)

I suspect you are getting a different error now and you need up update your require statement to:

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

SahAkplt · Answer 8 · Thu Jun 27 2019 03:49:24 GMT+0800 (China Standard Time)

Please paste the results of the following command:

npx envinfo --system --binaries --npmPackages clean-webpack-plugin,webpack

SahAkplt · Answer 9 · Thu Jun 27 2019 03:52:01 GMT+0800 (China Standard Time)

const path = require("path");
const webpackMerge = require("webpack-merge");
const autoprefixer = require("autoprefixer");
const webpackCommon = require("./common.config");

// webpack plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

module.exports = webpackMerge(webpackCommon, {
  bail: true,

  devtool: "source-map",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "../dist"),

    filename: "[name]-[hash].min.js",

    sourceMapFilename: "[name]-[hash].map",

    chunkFilename: "[id]-[chunkhash].js",

    publicPath: "/"
  },

  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                importLoaders: 2
              }
            },
            {
              loader: "postcss-loader",
              options: {
                config: {
                  path: path.resolve(__dirname, "postcss.config.js")
                },
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                outputStyle: "expanded",
                sourceMap: true,
                sourceMapContents: true
              }
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, "../static/index.html"),
      favicon: path.resolve(__dirname, "../static/favicon.ico"),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new CopyWebpackPlugin([{ from: path.resolve(__dirname, "../static") }], {
      ignore: ["index.html", "favicon.ico"]
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["**/*", "!.gitignore"]
    }),
    new DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new ExtractTextPlugin("[name]-[chunkhash].min.css"),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          ie8: true,
          warnings: false
        },
        mangle: {
          ie8: true
        },
        output: {
          comments: false,
          ie8: true
        }
      },
      sourceMap: true
    }),
    new LoaderOptionsPlugin({
      options: {
        context: "/",
        sassLoader: {
          includePaths: [path.resolve(__dirname, "../src")]
        }
      }
    })
  ]
});

Chris Blossom · Answer 10 · Thu Jun 27 2019 07:02:48 GMT+0800 (China Standard Time)

Please paste the results of the following command:
npx envinfo --system --binaries --npmPackages clean-webpack-plugin,webpack

This does not show your version of clean-webpack-plugin or webpack. Please include that.

Can you provide an example repository?

SahAkplt · Answer 11 · Sun Jun 30 2019 01:26:35 GMT+0800 (China Standard Time)

"clean-webpack-plugin": "^0.1.19", "webpack": "^4.35.0"

Chris Blossom · Answer 12 · Wed Jul 03 2019 05:49:58 GMT+0800 (China Standard Time)

Your version listed is very old. Please update your version of clean-webpack-plugin to ^3.0.0 and post if you are still having issues. I suspect you are also having a weird dependency lock file issue, so you should also try removing your lock files and starting from there.

SahAkplt · Answer 13 · Wed Jul 03 2019 16:09:32 GMT+0800 (China Standard Time)

const path = require("path");
const webpackMerge = require("webpack-merge");
const autoprefixer = require("autoprefixer");
const webpackCommon = require("./common.config");

// webpack plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

module.exports = webpackMerge(webpackCommon, {
  bail: true,

  devtool: "source-map",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "../dist"),

    filename: "[name]-[hash].min.js",

    sourceMapFilename: "[name]-[hash].map",

    chunkFilename: "[id]-[chunkhash].js",

    publicPath: "/"
  },

  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                importLoaders: 2
              }
            },
            {
              loader: "postcss-loader",
              options: {
                config: {
                  path: path.resolve(__dirname, "postcss.config.js")
                },
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                outputStyle: "expanded",
                sourceMap: true,
                sourceMapContents: true
              }
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, "../static/index.html"),
      favicon: path.resolve(__dirname, "../static/favicon.ico"),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new CopyWebpackPlugin([{ from: path.resolve(__dirname, "../static") }], {
      ignore: ["index.html", "favicon.ico"]
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["**/*", "!.gitignore"]
    }),
    new DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new ExtractTextPlugin("[name]-[chunkhash].min.css"),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          ie8: true,
          warnings: false
        },
        mangle: {
          ie8: true
        },
        output: {
          comments: false,
          ie8: true
        }
      },
      sourceMap: true
    }),
    new LoaderOptionsPlugin({
      options: {
        context: "/",
        sassLoader: {
          includePaths: [path.resolve(__dirname, "../src")]
        }
      }
    })
  ]
})

SahAkplt · Answer 14 · Wed Jul 03 2019 16:10:08 GMT+0800 (China Standard Time)

SahAkplt commented 5 years ago

Chris Blossom · Answer 15 · Thu Jul 04 2019 00:45:17 GMT+0800 (China Standard Time)

Could you share the repository with me / create a minimal reproducible example? You clearly have a plain object. Here is the check object code: src/clean-webpack-plugin.ts#L67-L75

Chris Blossom · Answer 16 · Wed Jul 17 2019 01:40:29 GMT+0800 (China Standard Time)

@sahismailakpolat is there an update on this?

Chris Blossom · Answer 17 · Fri Jul 19 2019 00:53:08 GMT+0800 (China Standard Time)

Closing this. If this is still an issue, please reopen with requested information.