CODEWITHSUNDEEP
reactjswebpack
Irum Ghafoor
Irum Ghafoor

Reputation: 33

ERROR: Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack:

I have been trying to run the following code since 1 week now. I have re-written the same code around 4-5 times in case if I missed something. Tried looking for solutions as well but I am unable to detect what exactly the error is?

Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack:

  • C:\Users\NFC\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js

webpack.config.js

const path = require('path');

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

module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},


 devServer: {
   
   inline: true,
  
   port: 8001
},

module: {
  rules: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['es2015', 'react']
        }
     }
  ]
 },
 plugins:[
  new HtmlWebpackPlugin({
     template: './index.html'
  })
 ]
}

package.json

 {
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
 "author": "",
 "license": "ISC",
 "dependencies": {
 "react": "^17.0.1",
 "react-dom": "^17.0.1",
 "webpack": "^5.4.0",
 "webpack-cli": "^4.2.0",
 "webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.5.0"
}
}

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>React App</title>
</head>
<body>
  <div id = "app"></div>
  <script src = 'index_bundle.js'></script>
</body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

.babelrc

{
  "presets":["env", "react"]
}

App.js

import React, { Component } from 'react';
class App extends Component{
render(){
  return(
     <div>
        <h1>Hello World</h1>
     </div>
  );
  }
  }
export default App;

Upvotes: 1

Views: 3902

Answers (1)

Sam Chen
Sam Chen

Reputation: 2148

Seems you're using webpack-cli v4, try to update your start script from webpack-dev-server --mode development --open --hot to webpack serve. You can check this issue https://github.com/webpack/webpack-dev-server/issues/2424 on webpack-dev-server for more.

Upvotes: 3

Related Questions