無法在 IE11 中運行 React 應用程序：提供給“Provider”的道具“children”無效

Question

我有一個需要添加 IE11 支持的 React 應用程序。 它正在運行，但有一個錯誤使應用程序無法使用。

控制台抱怨 prop 類型不正確（其他瀏覽器沒有抱怨）：

Invalid prop `children` supplied to `ModalProvider`

我懷疑問題是Symbol沒有（正確）polyfill，因為當我記錄props.children對象時，它說一些關於Symbol和undefined東西，並且 StackOverflow 上還有許多其他問題描述Symbol ，IE11 和 polyfill。 請看下面的截圖：

我嘗試了許多描述的不同解決方案，但無法消除此錯誤，因此無法使應用程序正常運行。 你有什么想法？ 😊

該項目

首先，該項目是兩個獨立的反應項目，其中一個（簡單的反應腳本應用程序，只顯示導入/鏈接的組件，我們稱之為A ）鏈接到另一個（復雜的導出模塊，我們稱之為B ）。 所以我不完全確定應該填充其中的哪一個，或者兩者都填充。

B 的Webpack.config.js ：

var path = require('path')

module.exports = {
  entry: {
    maps: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
    library: 'Map',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.[s]?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[local]--[sha1:hash:hex:4]'
            }
          },
          'sass-loader'
        ],
        include: /\.module\.[s]?css$/
      },
      {
        test: /\.[s]?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /\.module\.[s]?css$/
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack']
      },
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'file-loader?name=/public/icons/[name].[ext]'
      }
    ]
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ],
    extensions: ['.js', '.jsx']
  },
  externals: {
    // Use external version of React
    react: 'react',
    'react-dom': 'react-dom'
  },
  // NOTE: @claus added options to fix files not being watched
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
}

B 的package.json瀏覽器列表：

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

B 的.babelrc ：

{
  "presets": [
    ["@babel/preset-env"],
    "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

Answer 1

您是否按照以下步驟在 IE 11 中支持 React 應用程序？

1. 安裝包： npm install react-app-polyfill 。
2. 添加import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; 在src/index.js的第一行。
3. 在packge.json 中添加ie 11像這樣：

4. 您可以重新啟動您的應用程序，它將在 IE11 中運行。

而且我認為您應該對兩個 react 項目進行 polyfill，使它們都與 IE 11 兼容。如果錯誤仍然存​​在，最好提供一個最小的、可重現的示例，以便我們可以進行測試。