My npm start for react tutorial project is not working

Question

I am trying to learn react and following egghead's video tut from https://egghead.io/lessons/react-react-fundamentals-development-environment-setup?series=react-fundamentals on setting up my dev environment. However, after installing relevant modules as mentioned in the first video, when I try npm start, it is throwing following error:

Shaileshs-MacBook-Pro:react-project shailesh$ npm start

> shaileshgupta@1.0.0 start /Users/shaileshgupta/react-project
> webpack-dev-server

/Users/shaileshgupta/react-project/webpack.config.js:3
  output: {
  ^^^^^^

SyntaxError: Unexpected identifier
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at module.exports (/Users/shaileshgupta/react-project/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (/Users/shaileshgupta/react-project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:55:48)
    at Module._compile (module.js:398:26)

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/Cellar/node/5.3.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.3.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! shaileshgupta@1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shaileshgupta@1.0.0 start script 'webpack-dev-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the shaileshgupta package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server
npm ERR! You can get their info via:
npm ERR!     npm owner ls shaileshgupta
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/shaileshgupta/react-project/npm-debug.log

I banged my head and tried to debug it, but couldn't find any possible solution to it. Could anyone help me understand what is going on here? Let me know if you need more information.

post your whole webpack.config.js file – devwannabe Dec 24 '15 at 18:47 — devwannabe, Dec 24 '15 at 18:47

score 3 · Answer 1 · answered Jun 10 '16 at 08:28

3

You might need to install the webpack dev server

npm install webpack-dev-server --save-dev

answered Jun 10 '16 at 08:28

Huntario

1,120
12
18

score 1 · Answer 2 · answered Dec 24 '15 at 18:48

1

Post the whole code, you're probably missing a comma after the first property of module.exports object

answered Dec 24 '15 at 18:48

Gabs00

1,869
1
13
12

score 0 · Answer 3 · answered Nov 15 '16 at 07:00

0

If you have a file with the .jsx extension, try changing it to .js. That worked for me when I had the same problem.

answered Nov 15 '16 at 07:00

Jacob Oakley

1

score 0 · Answer 4 · answered Dec 27 '17 at 11:20

Most of the times we will copy paste the webpack.config.js file from tutorials. Some part of the code will look like this in the webpack.config.js.

devServer: {
  inline: true,
  port: 8080   }

When you run npm start from command prompt you might have not installed webpack-dev-server. if so run the below line

npm install webpack-dev-server -g

In few cases webpack-dev-server is installed but something else will be running in 8080 port.
In that cases simply change the port number in webpack.config.js file. below is the updated code.

 devServer: {
  inline: true,
  port: 4000   }

That should resolve your problem.

Click here for more about this issue

My npm start for react tutorial project is not working

4 Answers4