I upgraded to webpack 5 mid-project (a small Movie List mini-app) because I was having issues with testing webpack 4 and React Context, and now Webpack isn't piling with my old configuration file or seemingly any configuration file I try to give it. I will roll back to webpack 4 if I have to, but at some point I can imagine webpack 4 will be deprecated so I might as well learn how to work with webpack 5 now if I can.

App type: Movie List mini-app
Framework: React 16.18
State management: React Context
Testing frameworks: Jest, Enzyme, Supertest
Server: Node/Express

Here is the error message it gives me:

[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.
 - configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
   object { piler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.

Here is my webpack config:

    const webpack = require('webpack');
    const path = require('path');
    const SRC_DIR = path.join(__dirname, '/client/src');
    const DIST_DIR = path.join(__dirname, '/client/dist');
    
    module.exports = {
      entry: `${SRC_DIR}/index.jsx`,
      output: {
        path: DIST_DIR,
        filename: 'bundle.js'
      },
    
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: [
                "@babel/preset-react",
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      resolve: {
        extensions: ['.js', '.jsx']
      },
    };

Here is my .babelrc:

    {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-react-jsx",
        "@babel/plugin-transform-runtime"
      ]
    }

Here is my package.json:

    {
      "name": "xxxxxxxxxx",
      "version": "1.0.0",
      "description": "xxxxxxxxxxxxxxxxx",
      "main": "server/server.js",
      "scripts": {
        "start": "nodemon server/server.js",
        "react-dev": "webpack -d --watch",
        "test": "jest"
      },
      "jest": {
        "setupTestFrameworkScriptFile": "./client/src/setupTests.js"
      },
      "repository": {
        "type": "git",
        "url": "xxxxxxxxxxxxxxxxxxxxx"
      },
      "author": "Owen Wexler",
      "license": "ISC",
      "bugs": {
        "url": xxxxxxxxxxxx"
      },
      "homepage": "xxxxxxxxxxxxxxx",
      "dependencies": {
        "axios": "^0.21.0",
        "express": "^4.17.1",
        "jest": "^26.6.3",
        "prop-types": "^15.7.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-transform-react-jsx": "^7.10.4",
        "@babel/plugin-transform-runtime": "^7.12.1",
        "@babel/preset-env": "^7.12.7",
        "@babel/preset-react": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "babel-jest": "^26.3.0",
        "babel-loader": "^8.2.2",
        "check-prop-types": "^1.1.2",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.14.0",
        "jest-enzyme": "^7.1.0",
        "moxios": "^0.4.0",
        "regenerator-runtime": "^0.13.7",
        "supertest": "^5.0.0",
        "webpack": "^5.10.0",
        "webpack-cli": "^4.2.0"
      }
    }

I'm not sure what I'm doing wrong as my configuration follows most of the webpack configurations I've seen on createapp.dev and elsewhere, and can't seem to get a straight answer on how to fix it so it piles properly from the docs or anywhere else. Any help would be appreciated, thank you!

I upgraded to webpack 5 mid-project (a small Movie List mini-app) because I was having issues with testing webpack 4 and React Context, and now Webpack isn't piling with my old configuration file or seemingly any configuration file I try to give it. I will roll back to webpack 4 if I have to, but at some point I can imagine webpack 4 will be deprecated so I might as well learn how to work with webpack 5 now if I can.

App type: Movie List mini-app
Framework: React 16.18
State management: React Context
Testing frameworks: Jest, Enzyme, Supertest
Server: Node/Express

Here is the error message it gives me:

[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.
 - configuration.module.rules[0] has an unknown property 'query'. These properties are valid:
   object { piler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.

Here is my webpack config:

    const webpack = require('webpack');
    const path = require('path');
    const SRC_DIR = path.join(__dirname, '/client/src');
    const DIST_DIR = path.join(__dirname, '/client/dist');
    
    module.exports = {
      entry: `${SRC_DIR}/index.jsx`,
      output: {
        path: DIST_DIR,
        filename: 'bundle.js'
      },
    
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: [
                "@babel/preset-react",
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      resolve: {
        extensions: ['.js', '.jsx']
      },
    };

Here is my .babelrc:

    {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-react-jsx",
        "@babel/plugin-transform-runtime"
      ]
    }

Here is my package.json:

    {
      "name": "xxxxxxxxxx",
      "version": "1.0.0",
      "description": "xxxxxxxxxxxxxxxxx",
      "main": "server/server.js",
      "scripts": {
        "start": "nodemon server/server.js",
        "react-dev": "webpack -d --watch",
        "test": "jest"
      },
      "jest": {
        "setupTestFrameworkScriptFile": "./client/src/setupTests.js"
      },
      "repository": {
        "type": "git",
        "url": "xxxxxxxxxxxxxxxxxxxxx"
      },
      "author": "Owen Wexler",
      "license": "ISC",
      "bugs": {
        "url": xxxxxxxxxxxx"
      },
      "homepage": "xxxxxxxxxxxxxxx",
      "dependencies": {
        "axios": "^0.21.0",
        "express": "^4.17.1",
        "jest": "^26.6.3",
        "prop-types": "^15.7.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-transform-react-jsx": "^7.10.4",
        "@babel/plugin-transform-runtime": "^7.12.1",
        "@babel/preset-env": "^7.12.7",
        "@babel/preset-react": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "babel-jest": "^26.3.0",
        "babel-loader": "^8.2.2",
        "check-prop-types": "^1.1.2",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.14.0",
        "jest-enzyme": "^7.1.0",
        "moxios": "^0.4.0",
        "regenerator-runtime": "^0.13.7",
        "supertest": "^5.0.0",
        "webpack": "^5.10.0",
        "webpack-cli": "^4.2.0"
      }
    }

I'm not sure what I'm doing wrong as my configuration follows most of the webpack configurations I've seen on createapp.dev and elsewhere, and can't seem to get a straight answer on how to fix it so it piles properly from the docs or anywhere else. Any help would be appreciated, thank you!

• javascript
• reactjs
• webpack
• babeljs

• Does this answer your question? Webpack 5: devtool ValidationError, invalid configuration object – Joe Commented Dec 6, 2020 at 4:34
• See linked question. You need an explicit devtool even if false. – Joe Commented Dec 6, 2020 at 4:34
• Set devtool to false, got the same error :( – Owen Wexler Commented Dec 6, 2020 at 4:54
• 1 Do you need to update webpack-cli too? Looks like it is still Webpack 4.x, and you pass -d which sets the devtool flag. – loganfsmyth Commented Dec 6, 2020 at 5:27
• looks like module.rules query option was also removed as well – tmhao2005 Commented Dec 7, 2020 at 8:56

2 Answers 2

Based on ment of loganfsmyth:

Instead of webpack -d watch use webpack -d source-map watch

devtool: env.mode === 'development' ? 'source-map' : false,