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 compiling 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 { compiler?, 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 compiles properly from the docs or anywhere else. Any help would be appreciated, thank you!
