У меня есть приложение реагирования, к которому нужно добавить поддержку IE11. Он работает, но есть ошибка, которая делает приложение непригодным для использования.
Консоль жалуется, что тип пропора неправильный (на что не жалуется другой браузер):
Invalid prop `children` supplied to `ModalProvider`
Я подозреваю, что проблема в Symbol (неправильно) не заполнена поскольку, когда я регистрирую объект props.children, он говорит что-то о Symbol и undefined, и в StackOverflow есть много других проблем, описывающих Symbol, IE11 и polyfill. Смотрите скриншот ниже:
Я пробовал множество различных описанных решений, но не могу удалить эту ошибку, и поэтому заставляю приложение работать должным образом. У тебя есть идеи? 101
Проект
Во-первых, проект состоит из двух отдельных проектов реагирования, где один (простое приложение-сценарий реакции, которое просто отображает импортированный / связанный компонент, позволяет называть его A ) ссылки на другие (комплексный экспортируемый модуль, назовем его B ). Так что я не совсем уверен, какой из них должен быть заполнен, или оба.
Webpack.config.js для
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 для
B :
{
"presets": [
["@babel/preset-env"],
"@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}