2

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.

SCRIPT1053: Const must be initialized

. 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:

App.tsx

      const SandboxLazy = lazy(() => import('./microfronts/Sandbox'));

      export const App = () =>{
        return (
         <>
          <Header/>
          <Suspense fallback={<Progress />}>
            <Switch>
              <Route path="/sandbox">
                <MicrofrontErrorBoundary>
                  <SandboxLazy />
                </MicrofrontErrorBoundary>
              </Route>
            </Switch>
          </Suspense>
        </>
       );
      }

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.

This is our webpack and babel configs:

Webpack:

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()),
        }),
      ],
    };
  },
};

Babel:

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "corejs": {
          "version": "^3.15.2"
        },
        "useBuiltIns": "usage",
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
          "ie": "11"
        }
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-jsx",
    [
      "babel-plugin-styled-components",
      {
        "namespace": "host"
      }
    ]
  ]
}

Does anyone know what the problem could be? Thanks in advance

hunvee3
  • 87
  • 1
  • 10
  • Does this code have the same problem in other browsers? Maybe you can try with the complete call: `const SandboxLazy = React.lazy(() => import('./microfronts/Sandbox'));` – Xudong Peng Jul 19 '21 at 07:22

0 Answers0