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...

The config you posted does not reflect the error message. Additionally you have replaced a relevant part of the error with `*******` which would have shown your actual entry points. But as the error suggests, you have the same entry point twice in the entry array. Please make sure to post a [Minimal, Complete, and **Verifiable** example](https://stackoverflow.com/help/mcve). — Michael Jungo, Sep 23 '17 at 12:35
I wasn't able to reproduce your issue. Possibly unrelated, I noticed that you set your output path to your root directory. You probably want something else, like `__dirname` or `path.resolve(__dirname, 'some/path')`. — thisgeek, Sep 23 '17 at 12:37
Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Zafar Kurbonov, Sep 23 '17 at 13:23
@michael: "data": [ "C:\\Users\\David\\Documents\\GitHub\\react-tutorial\\node_m‌odules\\webpack-dev-‌server\\client\\inde‌x.js?http: //localhost:8080", "webpack/hot/dev-server", "C:\\Users\\David\\documents\\github\\react-tutorial\\node_m‌odules\\webpack-dev-‌server\\client\\inde‌x.js?http: //localhost:8080", "webpack/hot/dev-server", "./index.js" ] }). [non-empty string] * configuration.entry should be an instance of function" I appreciate the help... done the path.resolve...same issues — david_chukaogwude, Sep 23 '17 at 13:35
@david_chukaogwude So the problem is the `webpack/hot/dev-server`. Did you add it manually to the entry point as well? Can you try to run `webpack-dev-server` without the `--hot` flag? — Michael Jungo, Sep 23 '17 at 13:44
@ michael tried both i.e webpack-dev-server without the --hot flag, and i also added webpack/hot/dev-server to the entry point manually... still throws the same error... — david_chukaogwude, Sep 23 '17 at 23:47

Philippe Sultan · Answer 1 · 2017-09-23T13:50:00.937

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!

score 0 · Answer 2 · answered Sep 23 '17 at 15:22

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

webpack 2.6.2, javascript

2 Answers2