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 Automating Your Development with webpack Dev Server

Posted by Christopher Francisco
Christopher Francisco
6,425 Points

webpack-dev-server wont start

It keeps saying Cannot find module 'webpack/bin/config-yargs'. I'm using the exact same versions the teacher's branch comes with.

I already --save-dev installed babel-core too.

Also, what's the point of having 1 branch per lesson if that's gonna screw up the node_modules folder and you have to remove/re-install.

6 Answers

Craig Curtis
Craig Curtis
19,985 Points
Craig Curtis
Craig Curtis
19,985 Points

Install path

    $ npm install --save-dev path

Require path as a var // webpack.config.js

    var path = require('path');

Rewrite the path from:

    path: 'build',

To:

    path: path.resolve(__dirname, 'build'),

Solution from Github Webpack Issues

Christian Z
Christian Z
437 Points

This was the error message that I was receiving and Craig's answer solved it as well. Thanks Craig!

"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!"
Nick Cummings
Nick Cummings
9,571 Points

None of the other threads worked for me, but this did the trick. Thanks!

Clayton Zamperini
Clayton Zamperini
1,901 Points
Clayton Zamperini
Clayton Zamperini
1,901 Points

In case anyone is still having trouble getting npm start to work, this is what worked for me.

Like Craig Curtis said, install path, and rewrite webpack.config.js as outlined above.

Then, completely remove the local webpack.

$ npm uninstall webpack

Install the latest version of webpack. (version 3.5.2 as of this posting)

$ npm install --save-dev webpack@latest

You may still get a dependency error at this point, so install babel-core.

$ npm install babel-core

fingers crossed, the dev server should run correctly the next time you run npm start

Chavah Jacobs
Chavah Jacobs
12,333 Points

Thanks Craig Curtis and Clayton Zamperini!

This really helped me out.

Brian Cortes
Brian Cortes
294 Points
Brian Cortes
Brian Cortes
294 Points

this is my configuration of webpack for the resolved the problem !! 

const path = require('path');
var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                loader: "babel-loader",
                test: /\.js$/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;
Nick Lloyd
Nick Lloyd
4,892 Points
Nick Lloyd
Nick Lloyd
4,892 Points

Doing everything suggested on this thread worked for me. Cheers,

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Everything here worked for me, but I don't understand any of it. Am I the only one?

It's great to have support here in the community, but out in the real world I'd be completely lost!

Gregory Burgess
.a{fill-rule:evenodd;}techdegree
Gregory Burgess
Front End Web Development Techdegree Student 31 Points

I completely agree. Webpack config is a little bit of a nightmare. (that said with a vast appreciation of what the tool does). Coming from a rails background I've spent literally a month trying to really understand how to understand how to set-up webpack - not sure where to really go to understand this. I can cut and paste code, but in the end it seems there is a lot of nuance needed for different cases.

Olga Isakova
Olga Isakova
5,349 Points
Olga Isakova
Olga Isakova
5,349 Points

Thank you guys so much, it helped! jaycode, I kinda got it reading through that Github issue Craig linked. An earlier version of Webpack didn't enforce using absolute path, but it was always what they expected.