React + Webpack 5 + Babel 7 IE11 问题——没有附加到 root

Question

我一直在互联网上搜索一个又一个解决方案，但似乎没有任何效果，所以我请求帮助。

问题： 无论我做什么，我都无法在根 div 中获取任何内容。 IE11 中根本没有控制台错误。该应用程序在 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

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"
      ]
    }
  }]
]

我已经无计可施了。我无法在控制台中收到任何警告来帮助我 -- 任何和所有帮助都将 至高无上 感激不尽。

Answer 1

我不需要 package.json 和 webpack.config.js 中的浏览器列表，但是我确实需要 [=11] 中的 target: ['web','es5'] =].我的问题是这个和@matthiasgiger 的建议——即使我已经为我的输出环境将模块设置为 false，删除 type="module" 是它们的关键

React + Webpack 5 + Babel 7 IE11 问题——没有附加到 root

React + Webpack 5 + Babel 7 IE11 issue -- not attaching to root

reactjs

webpack

babeljs

internet-explorer-11