CODEWITHSUNDEEP
reactjsnpmwebpack
Wai Yan Hein
Wai Yan Hein

Reputation: 14831

React JS and Webpack throwing error "Cannot find module 'webpack-cli/bin/config-yargs'" on "npm run start"

I am starting to build a React JS project from scratch. I am using Webpack to compile the assets and for development. But it is not working as expected when I run "npm run start".

This is my package.json file.

{
  "name": "way-ui-react",
  "version": "1.0.0",
  "description": "Way UI for React JS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Wai Yan Hein",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "autoprefixer": "^10.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

This is my project structure.

enter image description here

This is my webpack.config.js file

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "[name]__[local]___[hash:base64:5]",
                            },
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [ 'autoprefixer', {}, ],
                                ],
                            },
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: 'body'
        })
    ]
};

When I run "npm run start", I am getting the following error.

> [email protected] start C:\Users\Acer\Desktop\way-ui-react
> webpack-dev-server --open --hot --mode development

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Acer\Desktop\way-ui-react\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\Users\Acer\Desktop\way-ui-react\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --open --hot --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Acer\AppData\Roaming\npm-cache\_logs\2020-11-01T18_14_24_782Z-debug.log

What is wrong with my project and how can I fix it?

Upvotes: 0

Views: 2708

Answers (1)

Amr Eraky
Amr Eraky

Reputation: 1791

In your package.json "start": "webpack-dev-server --open --hot --mode development" was for webpack 4 version.

But in webpack 5 -that you've installed- must be:

"start": "webpack serve"

For more: Using webpack-dev-server in Webpack Documentation

Upvotes: 1

Related Questions