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

The error you get is:

[webpack-cli] TypeError: ManifestPlugin is not a constructor

You are trying to load weback-manifest-plugin it like this:

const ManifestPlugin = require("webpack-manifest-plugin")

How it should be loaded

Looking at the documentation for webpack-manifest-plugin, it should be loaded like this:

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

So change that row, and then also replace:

new ManifestPlugin({ publicPath: "" })

with:

new WebpackManifestPlugin({ publicPath: "" })

Now it should work!

The bigger problem

I see that you are loading everything as dependencies, while most of them should be loaded as devDependencies.

A dependency is something that will be bundled in your code, and loaded by the browser who visits your website.

A dev dependency is something that you are using in your build process, and it’s not being bundled with the JS that ends up on your website.

Think of devDependencies as software tools you use to build the website. Almost the same way as VS Code or whatever editor you are using. It’s software needed for the project, but every visitor to your website does not need to download VS Code to their computer just to view your website.

These are some of the libraries that should be devDependencies:

  • @babel/core
  • @babel/preset-env
  • @babel/preset-react
  • autoprefixer

Most of them have this written in the documentation. See:
https://github.com/postcss/autoprefixer#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app

The installation instructions say:

npm install autoprefixer@latest cross-env --save-dev

The --save-dev flag is what puts it in devDependencies rather than dependencies. This will have a big effect on the bundle size when you are building the project.

Read more on npmjs.com, about dependencies and devDependencies.

The other big problem

You are loading things such as axios, jquery, normalize.css. When you bundle them like this, WordPress is unaware they they are bundled, and if you are using a plugin that also needs jquery, that plugin will load jquery one extra time. This can lead to errors for the user.

Instead you should use wp_enqueue_script for anything that WordPress should be aware of.

By using this function, you can tell WordPress what version of a dependency you are loading, and other scripts that might be depending on that library can have that as a dependancy, making sure things load in the right way, and only once.

There is a really nice guide on how to include CSS and JavaScript in WordPress. Bundle your own JS and CSS, and enqueue those using the correct WordPress functions, but any external libraries, such as jQuery, axios, glide etc, add them in a way so that WordPress is aware of them.