I am building the website using React and compiling it using babel and webpack. I am using html-webpack-plugin to create html files on compiling using webpack. But the root element is created twice once the file is rendered.
HTML file after rendering by webpack.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Far-Away</title>
</head>
<body>
<div id="root"></div>
<div id="crx-root"></div>
</body>
</html>
the following are the files that are used to build the project.
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = [
{
entry: "./src/index.js",
mode: "development",
target: "web",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.[contenthash].js",
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.jpg$/,
type: "asset/resource",
},
],
},
},
];
index.html in the src folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Far-Away</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js file
import React from "react";
import ReactDOM from "react-dom/client";
import "./App.css";
export default function App() {
return (
<div>
<Logo />
<Form />
<PackingList />
<Stats />
</div>
);
}
function Logo() {
return <h1 className="h1">Far Away</h1>;
}
function Form() {
return (
<div className="add-form">
<h3 className="h3">What do you need for your trip?</h3>
</div>
);
}
function PackingList() {
return <div className="list">LIST</div>;
}
function Stats() {
return <footer className="stats"></footer>;
}
index.js file
import React, { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App.js";
ReactDOM.createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);
index.html in the dist folder which is created by html-webpack-plugin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Far-Away</title>
<script defer src="bundle.810e2640f2598054fc60.js"></script></head>
<body>
<div id="root"></div>
</body>
</html>
Do check out the github repo: https://github.com/rakshithvk19/far-away