JavaScript Automating Your Development with webpack Dev Server

webpack-dev-server not starting. Showing error messages.


I can't run the dev-server when I type: npm start. I'm getting this message:

Error: Cannot find module 'webpack/bin/config-yargs'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\sharads\Documents\Visual Studio     2017\Projects\webpack-workshop\node_modules\webpack-dev-server\bin\webpack-dev-
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program 
Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! webpack-treehouse-example@0.0.1 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-treehouse-example@0.0.1 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 webpack-treehouse-example 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 information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-treehouse-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-treehouse-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\sharads\Documents\Visual Studio 2017\Projects\webpack-    workshop\npm-debug.log

Thanks, Sharad

2 Answers

Hunter Rancourt
Hunter Rancourt
3,485 Points

This is a little late, but I was able to resolve this by doing the following.

I installed babel-core because earlier I got an error about it being a dependency npm install --save-dev babel-core

Then I got the error pasted above.

I first installed a module globally that updates local modules of a project npm install npm-update-all -g After that completed from the root directory of the project (webpack-workshop) I ran the below to update the modules npm-update-all

I attempted to npm start again and got a new error(below).

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. -configuration.output.path: The provided value "build" is not an absolute path! -> The output directory as absolute path (required).

I installed the path module as a dependency (not a dev dependency) npm install --save path

Once that finished I update the webpack.config.js file. Include const path = require('path'); near the top and then change webbpackConfig.output.path to have a value of path.resolve(__dirname, 'build')

I saved that, ran npm start and it worked as expected... finally!

Hope this helps!

  • Hunter
Jesus Mendoza
Jesus Mendoza
Treehouse Moderator 22,583 Points

Check if you have any type error on the start script at your package.json