css – Error in node.js webpack-cli failed to load config, typeError: ManifestPlugin is not a constructor

Question

In the command line webpack throws out the following error when I try to execute ‘npm run dev’ with the following commands:

    "dev": "npm-run-all -p devFast buildWatch",
    "devFast": "webpack serve",
    "buildWatch": "webpack --watch",
    "build": "webpack",

Error:

PS C:wamp64wwwworkshop_01wp-contentthemesworkshop_01> npm run dev

> workshop_011.21 gigawatts.0.0 dev C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> npm-run-all -p devFast buildWatch


> workshop_011.21 gigawatts.0.0 devFast C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> webpack serve


> workshop_011.21 gigawatts.0.0 buildWatch C:wamp64wwwworkshop_01wp-contentthemesworkshop_01
> webpack --watch

[webpack-cli] Failed to load 'C:wamp64wwwworkshop_01wp-contentthemesworkshop_01webpack.config.js' config
[webpack-cli] TypeError: ManifestPlugin is not a constructor
    at Object.<anonymous> (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01webpack.config.js:124:115)
    at Module._compile (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulesv8-compile-cachev8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_modulesv8-compile-cachev8-compile-cache.js:159:20)
    at WebpackCLI.tryRequireThenImport (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpack-clilibwebpack-cli.js:32:22)
    at loadConfig (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpack-clilibwebpack-cli.js:1536:38)
    at WebpackCLI.resolveConfig (C:wamp64wwwworkshop_01wp-contentthemesworkshop_01node_moduleswebpack-clilibwebpack-cli.js:1639:44)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! workshop_011.21 gigawatts.0.0 buildWatch: `webpack --watch`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the workshop_011.21 gigawatts.0.0 buildWatch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersBudWiserAppDataRoamingnpm-cache_logs2021-06-13T09_23_22_025Z-debug.log
ERROR: "buildWatch" exited with 2.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! workshop_011.21 gigawatts.0.0 dev: `npm-run-all -p devFast buildWatch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the workshop_011.21 gigawatts.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

package.json

{
  "name": "workshop_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all -p devFast buildWatch",
    "devFast": "webpack serve",
    "buildWatch": "webpack --watch",
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "@glidejs/glide": "^3.4.1",
    "autoprefixer": "^10.2.6",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "cssnano": "^5.0.6",
    "fs-extra": "^10.0.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^1.6.0",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^2.0.1",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.0",
    "postcss-mixins": "^8.1.0",
    "postcss-nested": "^5.0.5",
    "postcss-simple-vars": "^6.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-manifest-plugin": "^3.1.1"
  }
}

webpack.config.js

/*
  SUPER IMPORTANT: This config assumes your theme folder is named
  exactly 'fictional-university-theme' and that you have a folder
  inside it named 'bundled-assets' - If you'd like to adapt this
  config to work with your own custom folder structure and names
  be sure to adjust the publicPath value on line #116. You do NOT
  need to update any of the other publicPath settings in this file,
  only the one on line #116.
*/

const currentTask = process.env.npm_lifecycle_event
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const ManifestPlugin = require("webpack-manifest-plugin")
const fse = require("fs-extra")

const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-simple-vars"), require("postcss-nested"), require("postcss-hexrgba"), require("postcss-color-function"), require("autoprefixer")]

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Update functions.php", function () {
      // update functions php here
      const manifest = fse.readJsonSync("./bundled-assets/manifest.json")

      fse.readFile("./functions.php", "utf8", function (err, data) {
        if (err) {
          console.log(err)
        }

        const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?'", "g")
        const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?'", "g")
        const cssRegEx = new RegExp("/bundled-assets/styles.+?'", "g")

        let result = data.replace(scriptsRegEx, `/bundled-assets/${manifest["scripts.js"]}'`).replace(vendorsRegEx, `/bundled-assets/${manifest["vendors~scripts.js"]}'`).replace(cssRegEx, `/bundled-assets/${manifest["scripts.css"]}'`)

        fse.writeFile("./functions.php", result, "utf8", function (err) {
          if (err) return console.log(err)
        })
      })
    })
  }
}

let cssConfig = {
  test: /.css$/i,
  use: ["css-loader?url=false", { loader: "postcss-loader", options: { plugins: postCSSPlugins } }]
}

let config = {
  entry: {
    scripts: "./js/scripts.js"
  },
  plugins: [],
  module: {
    rules: [
      cssConfig,
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      }
    ]
  }
}

if (currentTask == "devFast") {
  config.devtool = "source-map"
  cssConfig.use.unshift("style-loader")
  config.output = {
    filename: "bundled.js",
    publicPath: "http://localhost:3000/"
  }
  config.devServer = {
    before: function (app, server) {
      /*
        If you want the browser to also perform a traditional refresh
        after a save to a JS file you can modify the line directly
        below this comment to look like this instead. I'm using this approach
        instead of just disabling Hot Module Replacement beacuse this way our
        CSS updates can still happen immediately without a page refresh.
        If you're using a slower computer and the new bundle is not ready
        by the time this is reloading the browser you can always just set the 
        "hot" property a few lines below this to false instead of true. That
        will work on all computers and the only trade off is the browser will
        perform a traditional refresh even for CSS changes as well.
        */

      // server._watch(["./**/*.php", "./**/*.js"])
      server._watch(["./**/*.php", "!./functions.php"])
    },
    public: "http://localhost:3000",
    publicPath: "http://localhost:3000/",
    disableHostCheck: true,
    contentBase: path.join(__dirname),
    contentBasePublicPath: "http://localhost:3000/",
    hot: true,
    port: 3000,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
  config.mode = "development"
}

if (currentTask == "build" || currentTask == "buildWatch") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader)
  postCSSPlugins.push(require("cssnano"))
  config.output = {
    publicPath: "/wp-content/themes/workshop_01/bundled-assets/",
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "bundled-assets")
  }
  config.mode = "production"
  config.optimization = {
    splitChunks: { chunks: "all" }
  }
  config.plugins.push(new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }), new ManifestPlugin({ publicPath: "" }), new RunAfterCompile())
}

module.exports = config

scripts.js

import "../css/style.css"

// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
  module.hot.accept()
}

enter image description here

When I type the command, npm run devFast, that successfully compiles, but I dont know what the error means with just the dev command.

Can anyone see what the problem is?
I can see that there is an issue with something to do with config in webpack.config.js, but stumped what it means.

I tried to search this particular error, but I didn’t find anything that was closely related this issue…

0
Krys 2 months 2021-06-13T05:01:51-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse