Invalid configuration object. Webpack has been initialized using a configuration object; devtool should match pattern

Question

I am trying to implement webpack 5 with es6 syntax, but I'm coming up short even though i'm explicitly providing a devtool setting as per the documentation.

Error Message: [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.

import webpack from 'webpack';
import HtmlWebpackPlugin from "html-webpack-plugin"
import path from "path";

import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
    mode: 'development',
    devtool: 'eval-cheap-source-map',
    entry: "./client/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./client/index.html",
            filename: "index.html"
        }),
    ],
    resolve: {
        modules: [__dirname, "node_modules"],
        extensions: [".js", ".jsx"],
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
        ],
    },
    devServer: {
        host: 'localhost',
        port: 3001,
        static: {
            directory: path.resolve(__dirname, 'dist'),
            publicPath: '/',
        },
        hot: true,
        proxy: {
            '/NHLdata/**': {
                target: 'http://localhost:3002/',
                secure: false,
            }
        }
    },
};

Applicable dependencies from package.json:

  "devDependencies": {
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "source-map-loader": "^4.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

score 0 · Answer 1 · answered Dec 15 '22 at 23:59

I tried running your webpack file and the only thing I ran into an issue on was this line:

const __dirname = dirname(fileURLToPath(import.meta.url));

Try removing that. I use __dirname in my webpack files without that.

Also. I actually write my webpack files in typescript. If you have babel it works.

So you could always try that. You just have to install the types from npm.

https://webpack.js.org/configuration/configuration-languages/#typescript

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server < v4.7.0
npm install --save-dev @types/webpack-dev-server

And rename your webpack file to webpack.config.ts

Invalid configuration object. Webpack has been initialized using a configuration object; devtool should match pattern

1 Answers1