Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Setting up Webpack Dev Server

Alex Koltun
PLUS
Alex Koltun
Courses Plus Student 1,945 Points
Posted by Alex Koltun
Alex Koltun
Courses Plus Student 1,945 Points

npm start error

I have been able to run npm run build successfully, but I haven't been able to run npm start because when I do so I get an error saying Error: Cannot find module 'webpack/bin/config-yargs'. Not sure if I just need to add an extra file?

3 Answers

trio-group I.AM
trio-group I.AM
25,711 Points
trio-group I.AM
trio-group I.AM
25,711 Points

Hey! Sounds like you're missing a dependency. Can you share your package.json ?

Alex Koltun
PLUS
Alex Koltun
Courses Plus Student 1,945 Points
Alex Koltun
Alex Koltun
Courses Plus Student 1,945 Points

This is my package.json:

{ "name": "scoreboard", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack-dev-server --progress --inline --hot" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^15.2.1", "react-dom": "^15.2.1" }, "devDependencies": { "babel-core": "^6.11.4", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "css-loader": "^0.23.1", "react-hot-loader": "^1.3.1", "style-loader": "^0.13.2", "webpack": "^1.15.0", "webpack-dev-server": "^1.14.1" } }

trio-group I.AM
trio-group I.AM
25,711 Points
trio-group I.AM
trio-group I.AM
25,711 Points

Hey!

This seems to be a known issue in webpack Github. Can you try installing the path module like this:

npm install path --save-dev

Open webpack.config.js and try changing this:

module.exports = {
    entry: './src/main.js',
    output: {
        path: './bin', 
        filename: 'app.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }
}

to this:

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './bin'),
        filename: 'app.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }
}

So this is assuming the source code file for your application entry point is in src/main.js (bin/app.js. is the output file). Replace these filenames with your actual filenames.

Good luck!