Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Webpack unknown error : Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

Ask Question

I tried to learn simple project with MERN stack by doing example. But i don't know why webpack didn't work and throw an error like this in terminal.

I'm using Ubuntu v16.04.

npm run dev

mern-stack@1.0.0 dev /home/trungh13/Dev/mern-stack

webpack -wd Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules ( NormalModuleFactory ). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! mern-stack@1.0.0 dev: webpack -wd npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the mern-stack@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Here is my package.json file:

"name": "mern-stack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon --exec babel-node ./server/server.js --ignore public/", "dev": "webpack -wd" "author": "trungh13", "license": "ISC", "dependencies": { "ejs": "^2.5.7", "express": "^4.16.3", "mongodb": "^3.0.5", "react": "^16.2.0", "react-dom": "^16.2.0" "devDependencies": { "babel-cli": "^6.26.0", "babel-eslint": "^8.2.2", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "eslint": "^4.19.1", "eslint-plugin-react": "^7.7.0", "nodemon": "^1.17.2", "webpack": "^4.2.0"

Here is my webpack.config.js:

module.exports={
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        filename:'bundle.js'
    module:{
        loaders:[
                test:/\.js$/,
                loader:'babel-loader'
Thanks a lot.
The problem is inside the module object. The loaders property is invalid and you should use the rules property instead. Also, in webpack-4 you need to provide the mode property (possible values are development, production and none).
Another thing to mention is that you need to include the webpack-cli package in your devDependencies because in the latest version of webpack, the CLI tool was moved to this package: webpack-cli
Check this webpack-demo project using Webpack 4 configuration objects (for development and production environments).
I think the previous tutorial project could be helpful.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.