无法在 IE11 中运行 React 应用程序：提供给“Provider”的道具“children”无效

Question

I have a react app I need to add IE11 support to. It's running, but there is an error which makes the app not usable.

The console complains that the prop type is incorrect (which other browser does not complain about):

Invalid prop `children` supplied to `ModalProvider`

I suspect that the issue is Symbol is not being (properly) polyfilled, since when I log the props.children object, it says something about Symbol and undefined , and there are many other issues on StackOverflow describing Symbol , IE11 and polyfill. See screenshot below:

I have tried a lot of different solutions described, but can't remove this error, and therefore get the app to work properly. Do you have any ideas? 😊

The project

First off, the project is two separate react projects, where one (simple react-scripts app that just displays the imported/linked component, lets call it A ) links to the other (complex exported module, lets call it B ). So I'm not entirely sure which one of them that should be polyfilled, or both.

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 browserlist for 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

Have you followed the below steps to support react app in IE 11?

1. Install the package: npm install react-app-polyfill .
2. Add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; at the first line in src/index.js .
3. Add ie 11 in packge.json like this:

4. You can restart your app and it will work in IE11.

And I think you should polyfill both react projects to make both of them compatible with IE 11. If the error still persists, it could be better if you provide a minimal, reproducible sample so that we can test on our sides.