CODEWITHSUNDEEP
reactjsnpmwebpackterminalwebpack-4
trungh13
trungh13

Reputation: 167

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

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

[email protected] 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! [email protected] dev: webpack -wd npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] 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.

Upvotes: 1

Views: 7837

Answers (1)

Carloluis
Carloluis

Reputation: 4320

The problem is inside the module object. The loaders property is invalid and you should use the rules property instead. Also, in 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.

Upvotes: 1

Related Questions