npm start not working after installation of webpack and babel

user_2842172 0
Viewed 2371

I have created an app in react-redux. After that I have installed babel and webpack using below link.

https://medium.com/@siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8

Below 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')},
       path: path.resolve(__dirname, 'build'),
   },
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
       }]
   },
   plugins:[
       new HWP(
          {template: path.join(__dirname,'/src/index.html')}
       )
   ]
}

I'm getting below error when I run the "npm start"

> my-app@0.1.0 start /var/www/html/SFL
> webpack-dev-server — mode development — open — hot

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
    * configuration.entry['main'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['main'] should not contain the item '—' twice.
    * configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module which is loaded upon startup.
    * configuration.entry should be an array:
      [non-empty string]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `webpack-dev-server — mode development — open — hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I'm trying to solve above error. Is there any other way to solve this error?

npm webpack reactjs node.js javascript
4 Answers

try this.. revert your changes and run npm run eject

this will enable webpack into your project

user_61296400

Try this delete you node_modules && your package-lock.json

and run npm i again.

let me know if it works.

user_87016610

Try changing your entry to this (taken from create-react-app):

entry: [ require.resolve('webpack-dev-server/client') + '?/', require.resolve('webpack/hot/dev-server'), path.join(__dirname, '/src/index.js') ]
user_65227130

Your folder structure should look like this

├── webpack.config.js
├── src
│   ├── index.js
user_67815180
Related