title: React compatibility with IE11 - Const must be initialized - Lazy - Suspense
body: <p>I've got a React project that needs to be compatible with Internet Explorer 11 and after applying some compatibility polyfills we still get the error.</p>
  <blockquote>
  <p>SCRIPT1053: Const must be initialized</p>
  </blockquote>
  <p>.
  It seems to be caused by the lazy function but I couldn't find any reference to this issue anywhere.
  Let me show you some of the code:</p>
  <p>App.tsx</p>
  <pre><code>      const SandboxLazy = lazy(() =&gt; import('./microfronts/Sandbox'));
  
        export const App = () =&gt;{
          return (
           &lt;&gt;
            &lt;Header/&gt;
            &lt;Suspense fallback={&lt;Progress /&gt;}&gt;
              &lt;Switch&gt;
                &lt;Route path=&quot;/sandbox&quot;&gt;
                  &lt;MicrofrontErrorBoundary&gt;
                    &lt;SandboxLazy /&gt;
                  &lt;/MicrofrontErrorBoundary&gt;
                &lt;/Route&gt;
              &lt;/Switch&gt;
            &lt;/Suspense&gt;
          &lt;/&gt;
         );
        }
  </code></pre>
  <p>We obviously have more routes than that and if I replace the SandboxLazy for Sandbox without lazy (including it in the project) everythign works fine.</p>
  <p>This is our webpack and babel configs:</p>
  <p><strong>Webpack:</strong></p>
  <pre><code>const webpack = require('webpack');
  const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
  const microfront = require('./modules/microfront.jsx');
  const package = require('../package.json');
  
  module.exports = {
    getConfig(env) {
      console.log('ENV', env);
      const entries = microfront.getEntries(env);
      const shared = microfront.getSharedDeps(env);
      console.log('Current entries', entries);
  
      return {
        target: ['web', 'es5'],
        mode: 'development',
        entry: {
          app: [
            'react-app-polyfill/ie11',
            'react-app-polyfill/stable',
            'core-js/stable',
            './src/index.tsx',
          ],
        },
        output: {
          publicPath: '/',
        },
        devServer: {
          port: 8080,
          historyApiFallback: true,
        },
        plugins: [
          new ModuleFederationPlugin({
            name: 'container',
            remotes: entries,
            shared: shared,
          }),
          new webpack.DefinePlugin({
            ENV: JSON.stringify(env),
            CURRENT_VERSION: JSON.stringify(package.version),
            LOCALHOST_PATH: JSON.stringify(microfront.getLocalhostEntry()),
          }),
        ],
      };
    },
  };
  </code></pre>
  <p><strong>Babel:</strong></p>
  <pre><code>{
    &quot;presets&quot;: [
      &quot;@babel/preset-react&quot;,
      [
        &quot;@babel/preset-env&quot;,
        {
          &quot;corejs&quot;: {
            &quot;version&quot;: &quot;^3.15.2&quot;
          },
          &quot;useBuiltIns&quot;: &quot;usage&quot;,
          &quot;targets&quot;: {
            &quot;edge&quot;: &quot;17&quot;,
            &quot;firefox&quot;: &quot;60&quot;,
            &quot;chrome&quot;: &quot;67&quot;,
            &quot;safari&quot;: &quot;11.1&quot;,
            &quot;ie&quot;: &quot;11&quot;
          }
        }
      ],
      &quot;@babel/preset-typescript&quot;
    ],
    &quot;plugins&quot;: [
      &quot;@babel/plugin-transform-runtime&quot;,
      &quot;@babel/plugin-syntax-jsx&quot;,
      [
        &quot;babel-plugin-styled-components&quot;,
        {
          &quot;namespace&quot;: &quot;host&quot;
        }
      ]
    ]
  }
  </code></pre>
  <p>Does anyone know what the problem could be?
  Thanks in advance</p>