I am working with webpack to setup a react project. but after running mand below

npm start

I have got following error in terminal

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['main'] should not contain the item '—' twice.
   -> A non-empty array of non-empty strings

here is my webpack.config.js file

const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')},
    module:{
        rules:[{
           test: /\.js$/,
           exclude: /node_modules/,
           loader: 'babel-loader'
        }]
    },
    plugins:[
        new HWP(
           {template: path.join(__dirname,'/src/index.html')}
        )
    ]
}

And below is the code for package.json

{
  "name": "aragon-connect-1.1",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server — mode development — open — hot",
    "build": "webpack — mode production"
  },
  "author": "Author Name",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Can anyone let me know about where I am getting wrong? Thanks in advance

I am working with webpack to setup a react project. but after running mand below

npm start

I have got following error in terminal

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['main'] should not contain the item '—' twice.
   -> A non-empty array of non-empty strings

here is my webpack.config.js file

const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')},
    module:{
        rules:[{
           test: /\.js$/,
           exclude: /node_modules/,
           loader: 'babel-loader'
        }]
    },
    plugins:[
        new HWP(
           {template: path.join(__dirname,'/src/index.html')}
        )
    ]
}

And below is the code for package.json

{
  "name": "aragon-connect-1.1",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server — mode development — open — hot",
    "build": "webpack — mode production"
  },
  "author": "Author Name",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Can anyone let me know about where I am getting wrong? Thanks in advance

• javascript
• reactjs
• webpack
• babeljs

• Not sure if it's a formatting problem, but I find this very strange: — mode development. It should be --mode development, with two hyphens not followed by space. Same with the other parameters in start and build. – David González Commented Jul 30, 2020 at 10:49
• thanks for your reply But it does not help in my case – Mind Gauge Commented Jul 30, 2020 at 11:08

4 Answers 4

Can you try with this scripts?

"scripts": {
  "start": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
}

Also, make sure webpack config is called webpack.config.js?

The issue is in the options format you're using in scripts

  "scripts": {
    "start": "webpack-dev-server — mode development — open — hot",
    "build": "webpack — mode production"
  },

Options passed in running webpack build should be used like --mode, but you've used - above.

entry assumes to have relative path not absolute path.

entry: {  main: "./src/index.js" },

Check that in your package.json file change the "main" property

{
"main": "node_modules/expo/AppEntry.js",
}