In my React webpack project I added env variable (VERSION) into my index.html. It works!
webpack.config.js
import dotenv from "dotenv";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import CompressionPlugin from "compression-webpack-plugin";
// eslint-disable-next-line @typescript-eslint/no-var-requires
import webpack from "webpack";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
dotenv.config();
module.exports = {
entry: path.resolve("src/index.tsx"),
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.less|css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
modifyVars: {
"@primary-color": "#009ef7",
"@height-base": "40px",
"@height-lg": "45px",
"@border-radius-base": "5px",
"@text-color-secondary": "rgba(0,0,0,.3)",
"@radio-size": "20px",
"@input-bg": "#ffffff",
"@input-border-color": "#D9DBE4",
"@label-color": "#a1a5b7",
"@btn-default-bg": "#E4E6EF",
"@btn-default-color": "#7E8299",
"@btn-default-border": "#F5F8FA",
"@btn-primary-bg": "#3E97FF",
"@btn-primary-border": "#3E97FF",
"@input-hover-border-color": "#B5B5C3",
"@checkbox-size": "20px",
"@input-height-lg": "43px",
"@btn-font-weight": "500",
"@menu-item-color": "#A1A5B7",
},
javascriptEnabled: true,
},
},
},
],
},
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["@svgr/webpack"],
},
{
test: /\\.(png|jp(e*)g|svg|gif)$/,
use: ["file-loader"],
},
],
},
resolve: {
modules: [
path.resolve(__dirname, "./src"),
path.resolve(__dirname, "."),
"node_modules",
],
extensions: [".tsx", ".ts", ".js"],
},
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
mode: "development",
plugins: [
new ForkTsCheckerWebpackPlugin(),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),
new CompressionPlugin({
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
// eslint-disable-next-line no-useless-escape
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en)$/),
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html",
templateParameters: {
VERSION: process.env.VERSION,
},
}),
],
};
index body
<body>
<div id="root">
...
<script src="bundle.js?v=<%= htmlWebpackPlugin.options.templateParameters.VERSION %>"></script>
</body>
.env file
VERSION=version1
This is all I changed. And now I got this:
Don't know what to do, I have no "removeChild" methods in my project at all. What's wrong?
search for "removeChild" methods in project. Google the error. Ask ChatGPT