JavaScript Automating Your Development with webpack Dev Server

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

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

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!"

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

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

Thanks Craig Curtis and Clayton Zamperini!

This really helped me out.

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;

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

jlampstack
jlampstack
17,752 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!

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

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.