1

I am doing a course on developing creative website from scratch without using any frameworks and following the instructors code and getting the following error. The instructor is using webpack: 4.*.* and I am on webpack: 5.75.* which is the latest stable version.

error

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node should be false.
    * configuration.node should be an object:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.

here is my webpack.config.js

const path = require('path')
const webpack = require('webpack')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev'

const dirApp = path.join(__dirname, 'src')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'

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

    // https://webpack.js.org/configuration/resolve/
    resolve: {
        modules: [
            dirApp,
            dirShared,
            dirStyles,
            dirNode
        ],
    },

    plugins: [
        new webpack.DefinePlugin({
            // Definitions...
            IS_DEVELOPMENT
        }),

        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './shared',
                    to: ''
                }
            ]
        }),

        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),

        new ImageMinimizerPlugin({
            minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                    // Lossless optimization with custom option
                    // Feel free to experiment with options for better result for you
                    plugins: [
                        ["gifsicle", { interlaced: true }],
                        ["jpegtran", { progressive: true }],
                        ["optipng", { optimizationLevel: 1 }]
                    ],
                },
            },
        }),

        new NodePolyfillPlugin(),
    ],

    module: {
        rules: [
            {
                // regular expression
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },

            {
                test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
                loader: 'file-loader',
                options: {
                    name (file) {
                        return '[contenthash].[ext]'
                    }
                }
            },

            {
                test: /\.(jpe?g|png|gif|svg|webp)$/i,
                use: [
                    {
                        loader: ImageMinimizerPlugin.loader,
                        options: {
                            minimizer: {
                                implementation: ImageMinimizerPlugin.imageminMinify,
                                options: {
                                    plugins: [
                                        "imagemin-gifsicle",
                                        "imagemin-mozjpeg",
                                        "imagemin-pngquant",
                                    ],
                                },
                            },
                        },
                    },
                ],
            },
        ]
    }
}

package.json

{
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack --progress --config webpack.config.build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "devDependencies": {
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "image-minimizer-webpack-plugin": "^3.8.1",
    "imagemin": "^8.0.1",
    "mini-css-extract-plugin": "^2.7.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "postcss-loader": "^7.0.2",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }
}

I did try adding the node object at it mentions in the error and also in the docs but it does not work. webpack node docs

node: false | {
__dirname: false,
__filename: false,
global: false
}
Rutvik
  • 21
  • 1
  • 3
  • I have also tried making changes from this thread but nothing has worked for me. https://stackoverflow.com/questions/42060243/invalid-configuration-object-webpack-has-been-initialised-using-a-configuration?rq=1 – Rutvik Mar 03 '23 at 19:15

1 Answers1

1

My package.json was pointing to the webpack.config.development.js and in there i had a typo where I had typed node: 'development' instead of mode:development and that is why it was throwing the above error. The above webpack.config.js is compatible and working with webpack:5.75.0 and below is my webpack.config.development.js for reference. I hope this is helpful to someone trying to figure out webpack.config.js

const path = require('path')

const { merge } = require('webpack-merge')

const config = require('./webpack.config')

module.exports = merge(config, {
    mode: 'development',

    devtool: 'inline-source-map',

    devServer: {
        devMiddleware: {
            writeToDisk: true
        },
    },

    output: {
        path: path.resolve(__dirname, 'public')
    }
})
Rutvik
  • 21
  • 1
  • 3