React + Webpack 5 + Babel 7 IE11 问题——未附加到 root [英] React + Webpack 5 + Babel 7 IE11 issue -- not attaching to root
问题描述
我一直在互联网上寻找一个又一个解决方案，但似乎没有任何效果，所以我请求帮助.
I have been scouring the internet for solution after solution and nothing seems to be working for me so I'm requesting help.
问题:无论我做什么，我都无法在根 div 中获取任何内容.IE11 中根本没有控制台错误.该应用程序在 chrome、ff 和 & 上运行良好野生动物园.
Issue: No matter what I do, I can't get anything inside my root div. There are no console errors at all in IE11. The app works fine on chrome, ff, & safari.
依赖项/版本
- 反应":^17.0.2"，
- "@babel/core": "^7.14.6",
- babel-loader":^8.2.2"，
- core-js":^3.8.0"，
- webpack":^5.41.1"，
index.js
import "core-js/stable";
import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';
//simplified my app down to just this p tag and still nothing
ReactDOM.render(
<p>hello world</p>,
document.getElementById('root'),
);
package.json
{
"scripts": {
"build": "webpack",
"start": "webpack serve",
"test": "npx jest",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "prettier --check \"src/**/*.{js,jsx}\"",
"preinstall": "npx npm-force-resolutions",
"echo": "echo \"Testinig gradle scripts with npm\" && exit 1"
},
"sideEffects": false,
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!<rootDir>/node_modules/"
],
"verbose": true,
"coverageReporters": [
"html"
]
},
"resolutions": {
"chokidar": "^3.4.3"
},
"browserslist": [
">0.2%",
"not dead",
"not ie < 11",
"not op_mini all"
],
//also tried this for browserlist
//"browserlist": [
// "ie 11"
//]
"dependencies": {
"@material-ui/core": "^4.12.0"
"@reduxjs/toolkit": "^1.6.0",
"connected-react-router": "^6.4.0",
"history": "^4.10.1",
"jest": "^26.6.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intl": "^5.20.4",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-test-renderer": "^17.0.2",
"redux": "^4.1.0",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"babel-loader": "^8.2.2",
"core-js": "^3.8.0",
"css-loader": "^5.2.6",
"html-webpack-plugin": "^5.3.2",
"http2-proxy": "^5.0.53",
"identity-obj-proxy": "^3.0.0",
"path": "^0.12.7",
"prettier": "^2.2.1",
"style-loader": "^3.0.0",
"webpack": "^5.41.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.1.1",
"webpack-nano": "^1.1.1"
}
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const options = {
fileName: 'asset-manifest.json'
};
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, "build"),
filename: "[name].[contenthash].js",
// filename: "index.bundle.js",
publicPath: '/',
clean: true,
},
mode: process.env.NODE_ENV || "development",
resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
devServer: {
contentBase: path.join(__dirname, "src") ,
port: 3001,
host: 'myapp0001.localhost',
proxy: {
'/admin/api': {
target: 'http://myap0001.localhost:8080'
}
},
historyApiFallback: true,
},
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
}),
new WebpackManifestPlugin(options),
],
optimization: {
// splitChunks: { chunks: "all" },
// runtimeChunk: { name: "runtime" },
usedExports: true,
},
target: ['web', 'es5'],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3,
}]
]
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
}
};
babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-transform-runtime']
};
当我在 IE11 中查看时，我得到以下 html
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<!-- Because edge adds icons on their inputs -->
<style>input::-ms-reveal, input::-ms-clear {display: none;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="My App" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/main.1ec970745dfb9692d654.js"></script>
</body>
</html>
我也收到 0 个控制台警告 &0 个错误
我尝试过的东西
- 将
target: ['web','es5']添加到我的 webpack.config.js - 安装
react-app-polyfill并将以下内容添加到index.js的顶部，即使我没有使用 create-react-app
- Adding
target: ['web','es5']to my webpack.config.js - installing
react-app-polyfilland adding the following to the top ofindex.jseven though I didn't use create-react-app
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import "core-js/stable";
import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';
- 从 package.json 中删除我的浏览器列表并使用以下 webpack 配置
presets: [
['@babel/preset-env', {
corejs:"3",
useBuiltIns: 'entry',
targets: {
browsers: [
"edge >= 16",
"safari >= 9",
"firefox >= 57",
"ie >= 11",
"ios >= 9",
"chrome >= 49"
]
}
}]
]
我的智慧已尽.我无法在控制台中收到任何警告来帮助我 -- 任何和所有帮助都将非常感激.
I am at my wit's end. I can't get any warnings in the console to assist me -- Any and all help will be supremely appreciated.
推荐答案
我不需要 package.json nor webpack.config 中的浏览器列表.js，但是我确实需要 target: ['web','es5'] 在我的 webpack.config.js 中.我的问题是这个 &来自@matthiasgiger 的建议——即使我已经为我的输出环境将模块设置为 false，删除 type=module" 是它们的关键
I didn't need the browserlist in package.json nor webpack.config.js, I did however need the target: ['web','es5'] in my webpack.config.js. My issue was this & the suggestion from @matthiasgiger -- even though I had set modules to false for my output environment, removing the type="module" was they key
这篇关于React + Webpack 5 + Babel 7 IE11 问题——未附加到 root的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
