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; 
