CODEWITHSUNDEEP
node.jsreactjsbabeljspackage.json
A K
A K

Reputation: 183

React.js code is not running after installing it using nodejs through npm installer

I was trying to learn react, so I have this sample code of my first react app, and I am trying to get it work but after running npm install followed by npm start I receive the following error:

C:\Users\Ak\Desktop\reactapp>npm start

> [email protected] start C:\Users\Ak\Desktop\reactapp
> webpack-dev-server --hot

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\Ak\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:60:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Ak\AppData\Roaming\npm-cache\_logs\2019-06-07T07_08_01_594Z-debug.log

Don't know how to solve this issue. Here is my log file.

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ak\Desktop\reactapp\node_modules\.bin;G:\Software files\Python\Scripts\;G:\Software files\Python\;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;G:\Software files\Brackets Editor\command;C:\Program Files\nodejs\;C:\Users\Ak\AppData\Local\Programs\Python\Python36\Scripts\;C:\Users\Ak\AppData\Local\Programs\Python\Python36\;G:\Software files\Java\bin;C:\Users\Ak\AppData\Local\Microsoft\WindowsApps;G:\Software files\NMDVPN\bin;C:\Users\Ak\AppData\Roaming\npm
9 verbose lifecycle [email protected]~start: CWD: C:\Users\Ak\Desktop\reactapp
10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] 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:301:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
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 ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Ak\Desktop\reactapp
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v10.16.0
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Here is my package.json file: 

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "Learning ReactJs with AK",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "keywords": [
    "npm",
    "learn",
    "react"
  ],
  "author": "AK",
  "license": "UNLICENSED",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.33.0",
    "webpack-dev-server": "^3.7.0"
  }
}

I have installed the react using Nodejs through npm installer.

Upvotes: 1

Views: 1133

Answers (1)

DanBonehill
DanBonehill

Reputation: 145

The first 3 lines of the error message advise what to do.

You need to install webpack-cli in order to run the webpack-dev-server. If you run the command it's giving you, you'll install webpack-cli as a devDependency and it'll all run.

If you're going to be using webpack a lot going forward it may be worth installing it globally, rather than needing to add it each time.

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli

Upvotes: 3

Related Questions