Errow with Webpack serve Command

Question

Trying to create a React app with Webpack and Babel. Followed a tutorial on YouTube and some other Tutorials on different Websites and if i run the webpack serve command i run into this error every time. Even if index.js contains nothing.

[ERROR]:

ERROR in ../../../#discorddev/CBG/cbg-server-status-webpage/src/index.js
Module build failed (from ../../../#discorddev/CBG/cbg-server-status-webpage/node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\babel-loader\lib\index.js'
Require stack:
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\loader-runner\lib\loadLoader.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\loader-runner\lib\LoaderRunner.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\NormalModuleFactory.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\Compiler.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\webpack.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\index.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-cli\lib\webpack-cli.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-cli\lib\bootstrap.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-cli\bin\cli.js
- D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadLoader (D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\loader-runner\lib\loadLoader.js:19:17)
    at iteratePitchingLoaders (D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
    at runLoaders (D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
    at NormalModule._doBuild (D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\NormalModule.js:812:3)
    at NormalModule.build (D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\NormalModule.js:956:15)
    at D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack\lib\Compilation.js:1367:12

ERROR in Module not found: Error: Can't resolve 'D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10' in 'D:\#discorddev\CBG\cbg-server-status-webpage'
resolve 'D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10' in 'D:\#discorddev\CBG\cbg-server-status-webpage'
  using description file: D:\#discorddev\CBG\cbg-server-status-webpage\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\package.json (relative path: ./client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10 doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10.wasm doesn't exist
      as directory
        D:\#discorddev\CBG\cbg-server-status-webpage\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3030&pathname=%2Fws&logging=info&reconnect=10 doesn't exist
  using description file: D:\#discorddev\CBG\cbg-server-status-webpage\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    No description file found in D: or above
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      D:\ is not a file
    .js
      Field 'browser' doesn't contain a valid alias configuration
      D:\.js doesn't exist
    .json
      Field 'browser' doesn't contain a valid alias configuration
      D:\.json doesn't exist
    .wasm
      Field 'browser' doesn't contain a valid alias configuration
      D:\.wasm doesn't exist
    as directory
      existing directory D:\
        No description file found in D:\ or above
        using path: D:\index
          No description file found in D: or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            D:\index doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            D:\index.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            D:\index.json doesn't exist
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            D:\index.wasm doesn't exist

webpack 5.64.4 compiled with 2 errors in 722 ms

package.json

{
  "name": "cbg-server-status-webpage",
  "version": "0.1.0",
  "private": true,
  "main": "./src/index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }
            },
        ]
    },
    devServer: {
        port: 3030,
        liveReload: true
    },
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';

ReactDOM.render(
  <App />,
  document.getElementsByTag('root')[0]
);

Answer 1

Ok guys fixed it. Took me one day to realise that the version of [email protected] doesn't work with babel-loader. So I installed [email protected] and downgraded other devDepencies. Now it's working like a charm.

EDIT: Nice to know. If you want to use asynchronus functions in react Just add browserlist like below to your package.json file.

package.json

{
  "name": "cbg-server-status-webpage",
  "version": "0.1.0",
  "private": true,
  "main": "./src/index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "browserslist": [
    "last 3 and_chr versions",
    "last 3 chrome versions",
    "last 3 opera versions",
    "last 3 ios_saf versions",
    "last 3 safari versions"
  ],
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^5.2.7",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "style-loader": "^2.0.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|jp(e*)g|svg|gif)$/,
                use: ['file-loader'],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: path.join(__dirname, "src", "index.html"),
        }),
    ],
    devServer: {
        port: 3030,
        liveReload: true
    },
};