I have a bug in my React app, where it does not work on IE11. I have tried polyfills and hoped they would handle all such errors on old browsers. The best solution would be to prompt all IE users to just download Chrome or Firefox, but theres no place for hate in the world, plus one of those users is my grandma and she's sweet, so I need to fix this.
I've added babel-polyfill
and also tried adding it directly in the index.html <script src-"https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>.
react-app-polyfill/ie11` doesn't seem work either.
Here's my babel config:
module.exports = {
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react', '@babel/preset-flow'],
plugins: [
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-transform-react-constant-elements',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-template-literals',
].filter(Boolean),
env: {
test: {
presets: [
['@babel/preset-env',{ modules: false }],
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
['emotion', { sourceMap: true, autoLabel: true }],
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-template-literals',
],
},
development: {
plugins: [['emotion', { sourceMap: true, autoLabel: true }]],
},
},
};
Here's my Webpack config:
module.exports = {
mode: 'development',
entry: ['whatwg-fetch', '@babel/polyfill', 'bootstrap-loader', './app/index.js'],
output: {
filename: 'app.js',
chunkFilename: '[name].[hash:6].app.js', // for code splitting. will work without but useful to set
publicPath: '/',
path: path.resolve(__dirname, 'build', 'assets'),
},
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules'],
extensions: ['.js', '.jsx', '.css', '.scss'],
symlinks: false,
alias: {
react: path.resolve('../../node_modules/react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /@babel(?:\/|\\{1,2})runtime|mapbox-gl/,
include: [path.resolve(__dirname, 'app'), /homelike/],
},
{
test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
loader: 'imports-loader',
},
],
},
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV', 'APP_ENV']),
new webpack.DefinePlugin({
__PRODUCTION__: 'false',
}),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
}),
new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
awKey: env.awKey,
tmKey: env.tmKey,
}),
],
devServer: {
contentBase: './build',
historyApiFallback: true,
port: 3000,
},
};
Here's code from my entry point js file:
import 'react-app-polyfill/ie11';
import 'object-assign-polyfill';
import 'string.prototype.startswith';
import 'string.fromcodepoint';
import '@babel/polyfill';
import React from 'react';
import { render } from 'react-dom';
...
render(
<IconProvider>
<Provider store={store}>
<ApolloProvider client={client}>
<StripeProvider apiKey={stripeKey.pk}>
<ThemeProvider theme={Theme}>
<Router history={history}>{routes}</Router>
</ThemeProvider>
</StripeProvider>
</ApolloProvider>
</Provider>
</IconProvider>,
document.getElementById('root')
);
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
EDIT: index.html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I get the error SCRIPT1010: Expected identifier
- Windows 10
- IE 11
- React 16.8.1
- webpack 4.34.0
- @babel/polyfill 7.0.0
- babel-loader 8.0.6