1

I am trying to setup a webpack configuration for the first time. I am getting the error "Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema" when i run the app. Here is the code in my webpack.config.js file.

const path = require("path");
const webpack = require("webpack");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";

const dirApp = path.join(__dirname, "app");
const dirImages = path.join(__dirname, "images");
const dirVideo = path.join(__dirname, "videos");
const dirStyles = path.join(__dirname, "styles");
const dirShared = path.join(__dirname, "shared");
const dirNode = "node_modules";

module.exports = {
  entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],

  resolve: {
    modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],
  },
  plugins: [
    new webpack.DefinePlugin({
      IS_DEVELOPMENT,
    }),
  ]
};
;

Here is the code in my webpack.config.development.js file

const path = require("path");

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

const { merge } = require("webpack-merge");
const config = require("./webpack.config");

module.exports = merge(config, {
  node: "production",
  output: {
    path: path.join(__dirname, "public"),
  },

  plugins: [new CleanWebpackPlugin()],
});
oladimeji
  • 71
  • 1
  • 10

1 Answers1

1

Change node: "production" to mode: "production" in webpack.config.development.js file. Generally when you have wrong configuration then it will show this error. You can check configuration of Webpack at respective version Webpack 5

Also you used merge but it accept the config object to be merge while in your case webpack.config.js do not export any configuration.

I have used the updated configuration.

const path = require("path");

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

const { merge } = require("webpack-merge");
const config = require("./webpack.config");

module.exports = merge(config, {
  mode: "production",
  output: {
    path: path.join(__dirname, "public"),
  },

  plugins: [new CleanWebpackPlugin()],
});

const path = require("path");
const webpack = require("webpack");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";

const dirApp = path.join(__dirname, "app");
const dirImages = path.join(__dirname, "images");
const dirVideo = path.join(__dirname, "videos");
const dirStyles = path.join(__dirname, "styles");
const dirShared = path.join(__dirname, "shared");
const dirNode = "node_modules";

module.exports = {
  entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],

  resolve: {
    modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],
  },
  plugins: [
    new webpack.DefinePlugin({
      IS_DEVELOPMENT,
    }),
  ]
};

By using above configuration it build successfully. I don't have any data in index.js and index.scss file.

Webpack stats: asset main.js 0 bytes [emitted] [minimized] (name: main)
./app/index.js 1 bytes [built] [code generated]
./styles/index.scss 1 bytes [built] [code generated]
webpack 5.78.0 compiled successfully in 170 ms
Your app is compiled in production mode in /dist. It's ready to roll!
Dhaval Gajjar
  • 2,508
  • 1
  • 2
  • 13
  • I have exported it (check my edit) but i am still getting same error, I have also changed node to mode. – oladimeji Apr 11 '23 at 11:42