I have been stuck with this problem of react not rendering since a few weeks now, it used to work fine before...
index.js // Note -> Has Been Bundled with babel-loader
import React from 'react';
import ReactDOM from 'react-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<h1>
Hello, world!
</h1>
);
webpack.config.js
const path = require("path");
// const config = require("./package.json");
module.exports = {
target: 'web',
mode: 'production',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.jsx$/, use: 'babel-loader' },
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.json$/, use: 'json-loader'},
{ test: /\.(png|jpe?g|webp|ttf|eot|svg|gif)$/, use: 'file-loader'},
],
},
entry: "./Src/index.js",
devtool: "source-map",
output: {
path: __dirname,
filename: './Public/JavaScript/Webpack/index.js',
}
}
babel.config.json
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": []
}
package.json
{
...
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.3",
"@tauri-apps/api": "^1.0.2",
"axios": "^0.27.2",
"cassandra-driver": "^4.6.4",
"clsx": "^1.2.1",
"framer-motion": "^7.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"@electron/get": "^2.0.0",
"@tauri-apps/cli": "^1.0.5",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"electron": "^20.1.1",
"file-loader": "^6.2.0",
"jest": "^29.0.2",
"json-loader": "^0.5.7",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
index.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Hello, World!</title>
<script type="text/javascript" src="./JavaScript/Console.js"></script>
</head>
<body>
<!-- ... -->
<div id="root"></div>
<!-- ... -->
<scirpt src="./JavaScript/Webpack/index.js"></scirpt>
</body>
</html>
Surprisingly, React Dev Tools also doesn't detect React in here, Nor do I get any errors in the Console.
I've tried the following solutions ->
- Reinstalling all dependencies with Npm
- Cloning other projects to find out whether it works with them (It Does)
- Re-checking File names, paths etc...
- Browsing the web for solutions
Please don't hesitate to request, if you need extra information.
