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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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:&hostname=0.0.0.0&port=3030&pathname=/ws&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]
);
CodePudding user response:
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
},
};