Webpack-cli: Cannot find module 'webpack-cli/bin/config-yargs'

[Romalei]

Describe the bug

An error occurs after running the following command: webpack-dev-server --open --config webpack.dev.js.

> webpack-dev-server --open --config webpack.dev.js

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\dev\github\snoweb\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

To Reproduce

Steps to reproduce the behavior:

1. git clone https://github.com/Romalei/snoweb
2. npm i
3. npm start

Expected behavior

Dev server is up and running

Output of webpack-cli info

>  webpack-cli info

System:
   OS: Windows 10 10.0.18363
   CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
   Memory: 3.08 GB / 15.38 GB
 Binaries:
   Node: 10.15.1 - C:\Program Files\nodejs\node.EXE
   Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
   npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
 Browsers:
   Chrome: 85.0.4183.121
   Edge: Spartan (44.18362.449.0)
   Internet Explorer: 11.0.18362.1
 Packages:
   clean-webpack-plugin: ^3.0.0 => 3.0.0
   html-webpack-plugin: ^4.5.0 => 4.5.0
   webpack: ^5.0.0 => 5.0.0
   webpack-cli: ^4.0.0 => 4.0.0
   webpack-dev-server: ^3.11.0 => 3.11.0
   webpack-merge: ^5.2.0 => 5.2.0

Additional context

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),
    ],
});

webpack.common.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

This is the repository where the error occurs. And it can be used for debugging.

[alexander-akait]

https://github.com/webpack/webpack-dev-server/issues/2759

[alexander-akait]

Please use webpack serve

[budarin]

@evilebottnawi
but the package is archived https://github.com/webpack-contrib/webpack-serve

[alexander-akait]

webpack serve and webpack-serve are different things.

• webpack serve is command to run webpack-dev-server, you need install the latest webpack-cli package and put "serve": "webpack serve" in you package.json
• https://github.com/webpack-contrib/webpack-serve is deprecated package, and has nothing to do with the command webpack serve

[budarin]

webpack serve and webpack-serve are different things.

• webpack serve is command to run webpack-dev-server, you need install the latest webpack-cli package and put "serve": "webpack serve" in you package.json
• https://github.com/webpack-contrib/webpack-serve is deprecated package, and has nothing to do with the command webpack serve

@evilebottnawi
webpack-dev-serve cannot be replaced with webpack-serve due to absence options for

• publicPath
• writeToDisk

:(

[alexander-akait]

@budarin do you read my answer? Please try again, webpack serve is built-in sub command in webpack-cli to run webpack-dev-server, not webpack-serve

[alexander-akait]

Follow my instruction above and try to run

[budarin]

@budarin do you read my answer? Please try again, webpack serve is built-in sub command in webpack-cli to run webpack-dev-server, not webpack-serve

@evilebottnawi
I dont understand: I've used devServer option in webpack.config.json - what should I replace this option with now?

webpack.config.json

   ...
   devServer: {
        hot: true,
        port: 5000,
        overlay: true,
        publicPath: '/',
        historyApiFallback: true,
        proxy: {
            '*': `http://localhost:${PROXY_SERVER_PORT}`,
        },
        writeToDisk: true,
    },

[alexander-akait]

https://github.com/webpack/webpack-dev-server/issues/2424

No, just update webpack-cli to v4 and change webpack-dev-server on webpack serve in your package.json

[Romalei]

@evilebottnawi thanks for you answer, it works!
webpack serve instead of webpack-dev-server