webpack 2.6.2, javascript

Question

I've been trying to follow the simplest example on how to set up a minimal react app with webpack... but i can't seem to get the webpack-dev-server to work.. i've tried alot of suggestions here and they dont seem to work. i started off with webpack 3.-.- version and now changed to webpack 2.6.2 still same issue.

this is my package.json file:

{
  "name": "react-tutorial",
  "version": "1.0.0",
  "description": "app to learn how to make react apps",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified...leave no be by force to test\" && exit 1",
    "start": "webpack-dev-server --hot"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/davidsbelt/react-tutorial.git"
  },
  "author": "Chuka-ogwude David",
  "license": "ISC",
  "bugs": {
    "url": "****"
  },
  "homepage": "****",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"

  },
  "devDependencies": {
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

this is the webpack.config.js file:

 var config = {
entry: './index.js',

output: {//make sure to install 
    path: '/',
    filename: 'bundle.js'
},

devServer: {
    inline: true,
    port: 8080
},

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
}

module.exports = config

and this is the error i get when i run npm start:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API sche
ma.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry should NOT have duplicate items (items ## 1 and 3 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 3,
          "j": 1
        },
        "message": "should NOT have duplicate items (items ## 1 and 3 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        *********
    * configuration.entry should be an instance of function
      function returning an entry object or a promise.. 

"

all my files (index.js, App.js, index.html, webpack.config.js, package.json) are in the same directory...

Please help... this seemingly straightforward configuration has cost me a lot of hours.

Thanks...

Answer 1

Strange, I was not able to reproduce your problem with your webpack.config.js file. However, modifying the entry line to the following dumps the same error message :

  entry:
  [
    "./index.js",
    "webpack/hot/dev-server",
  ],

Are you sure you're using the right webpack config file here ? Hope this will help you fix the issue.

Note, on my system, I have webpack@2.7.0, webpack-dev-server@2.8.2

Answer 2

It looks like you're running a configuration file that matches with webpack the older version 1. In particular, the module.loaders statement no longer exist in webpack > 2, and has been replaced with module.rules see : https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Note that there are less changes when migrating from webpack 2 to 3, so I guess the migration guide will be helpful in your case.

Hope this helps!