Attempting to start a react app, npm start error with "webpack-dev-server --hot"

Question

Please note I have tried what related stack overflow topics have suggested. I've reached the end point of a tutorial for starting a react app and everything installs and runs till the last part.

I'm following the tutorial here:

React Tutorial

I've researched the error codes and redone the whole process 3 times making sure everything matches but it just won't work.

Everything seems to install and work fine until I reach the very bottom of the tutorial when it asks to do type npm start on the command prompt.

This is the error I get each time after I run that:

This is my package.json, exactly following how the tutorial writes it and told me to change "test" "echo \"Error: no test specified\" && exit 1" instead the script object to "start": "webpack-dev-server --hot".

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "First React App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "Kranti Nebhwani",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.15"
  }
}

And finally my error log that npm logs out mentioned in the command line:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@5.6.0
3 info using node@v8.11.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle reactapp@1.0.0~prestart: reactapp@1.0.0
6 info lifecycle reactapp@1.0.0~start: reactapp@1.0.0
7 verbose lifecycle reactapp@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle reactapp@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Kranti\Desktop\reactApp\node_modules\.bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Users\Kranti\AppData\Local\Microsoft\WindowsApps;C:\Users\Kranti\AppData\Local\atom\bin;C:\Users\Kranti\AppData\Local\Microsoft\WindowsApps;C:\Python27;C:\Users\Kranti\AppData\Roaming\npm
9 verbose lifecycle reactapp@1.0.0~start: CWD: C:\Users\Kranti\Desktop\reactApp
10 silly lifecycle reactapp@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
11 silly lifecycle reactapp@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle reactapp@1.0.0~start: Failed to exec start script
13 verbose stack Error: reactapp@1.0.0 start: `webpack-dev-server --hot`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid reactapp@1.0.0
15 verbose cwd C:\Users\Kranti\Desktop\reactApp
16 verbose Windows_NT 10.0.16299
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v8.11.1
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error reactapp@1.0.0 start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the reactapp@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I've failed at getting react set up multiple times during last year each time following a different tutorial and it's really demotivating as I check and make sure everything is right. Hopefully someone with more experience can see something I don't or know what the error is as I really want to get react running on my system. I'm too poor for a mac system at the moment though I've heard it's easier to set up there and pretty much all tutorials on youtube show it with a mac. Thanks for your time.

Answer 1

The tutorial assumes you are using webpack 1 (tutorial is very old). But you installed webpack 4. Since webpack version 2, property loaders has been renamed to rules and smaller changes have been done. This is why webpack tells you your webpack.config.js is wrong. So you have two options here:

Rename and change your loaders props to match the new rules prop. This might help: https://javascriptplayground.com/moving-to-webpack-2/

Install webpack in version 1: npm install webpack@1.x --save-dev

Or take another tutorial.