4

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
Wellington
  • 383
  • 1
  • 4
  • 13
  • issue is by default the application was being rendered on IE7 that is not on only IE IE11/EDGE that support the transpiled build. So you need to mention the meta information to let browser know that the intended browser is IE11/edge. Add this in the head section of your index.html: Ref: https://stackoverflow.com/questions/49649831/reactjs-script1010-expected-identifier-production-build-not-running-on-ie11 – Deepak-MSFT Jul 26 '19 at 05:56
  • @Deepak-MSFT I have exactly that in my index.html `` But it still doesn't work – Wellington Jul 26 '19 at 07:55
  • 2
    I suggest you to create a new sample app and try to access it from IE 11 to check whether it is displaying properly or not. It can help to narrow down the issue like every new app has this issue or some specific code in your app causing this issue. – Deepak-MSFT Jul 29 '19 at 07:17
  • Are you calling dispatchEvent anywhere? I have experienced similar issues when calling dispatchEvent. – Shmili Breuer Aug 06 '19 at 13:36
  • If you are using dispatchEvent in your code try using [mdn-polyfills](https://www.npmjs.com/package/mdn-polyfills) – swapnil2993 Aug 07 '19 at 14:15
  • I'm not using any dispatchEvent but I tried using mdn-polyfills, still no luck – Wellington Aug 14 '19 at 10:02

0 Answers0