无法获得在IE11中工作的react应用程序:向“`Provider`”提供的无效的支柱`子程序‘

Question

我有一个反应应用程序，我需要添加IE11支持。它正在运行，但有一个错误，使应用程序无法使用。

控制台抱怨支柱类型不正确(其他浏览器不抱怨)：

Invalid prop `children` supplied to `ModalProvider`

我怀疑问题是Symbol没有被(正确地)填充，因为当我记录props.children对象时，它提到了一些关于Symbol和undefined的内容，还有许多关于StackOverflow描述Symbol、IE11和polyfill的问题。见下面的截图：

​

​

我尝试了很多不同的解决方案，但无法消除这个错误，因此，使应用程序正常工作。你有什么想法吗？

项目

首先，该项目是两个单独的react项目，其中一个(简单的react脚本应用程序，它只显示导入/链接的组件，让它称为A)链接到另一个(复杂的导出模块，我们称它为B)。所以我不完全确定哪一个应该被填充，或者两者都填充。

Webpack.config.js for B：

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

package.json B浏览器列表：

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

.babelrc for B：

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

Answer 1

您是否按照以下步骤在IE 11中支持react应用程序？

安装包：npm install react-app-polyfill.

• Add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';在src/index.js.

• Add ie 11 in packge.json中的第一行，如下所示：

​

​

1. 您可以重新启动应用程序，它将在IE11.

中工作。

我认为你应该多填两个反应项目，使他们都兼容IE 11。如果错误仍然存在，如果你提供a minimal, reproducible sample，以便我们可以测试我们的立场。