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