Problems with webpack-dev-server React

Question

I am reading an article about Webpack the moment has come when I have to start Webpack but I get an error

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: webpack npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build 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\suren\AppData\Roaming\npm-cache_logs\2021-01-04T07_14_10_733Z-debug.log

Here are also screenshots https://ibb.co/sjLKYgX

package.json

{
  "name": "cra-tutorial",
  "version": "1.0.0",
  "description": "link tutorial ",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
  },
  "author": "Suren Zakaryan",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Joseph Cho Joseph Cho · Accepted Answer · 2021-01-04T07:34:26

Your screenshot says there is an issue parsing your HelloWorld module since there is no appropriate loader. You need to install Babel to transpile ES2015 javascript, and Webpack to bundle your assets.

npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
Add .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Add webpack.config.js

const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
   entry: path.join(__dirname, '/src/index.js'),
   output: {
       filename: 'build.js',
       path: path.join(__dirname, '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
       }]
   },
   plugins:[
       new HWP(
          {template: path.join(__dirname,'/src/index.html')}
       )
   ]
}

Problems with webpack-dev-server React

1 Answers