提问人：Zlatika 提问时间：10/20/2023 更新时间：10/20/2023 访问量：26
将 env 变量添加到索引 .html src 并出现错误“无法在”节点“上执行”removeChild“：要删除的节点不是此节点的子节点。
Add env variable to index.html src and got error "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
问：
在我的 React webpack 项目中，我将 env 变量 （VERSION） 添加到我的 index.html 中。它有效！
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,
},
}),
],
};
索引正文
<body>
<div id="root">
...
<script src="bundle.js?v=<%= htmlWebpackPlugin.options.templateParameters.VERSION %>"></script>
</body>
.env 文件
VERSION=version1
这就是我改变的一切。现在我得到了这个：
不知道该怎么办，我的项目中根本没有“removeChild”方法。怎么了？
在项目中搜索“removeChild”方法。谷歌错误。问 ChatGPT
答： 暂无答案
评论