Stack: React 17 Webpack 5 Babel 7 core-js 3
I want to fix the lighthouse error ci: Avoid serving legacy JavaScript to modern browsers
When i add debug property debug: true
to babel/preset-env of my babel config and I build the application, i have this output:
Using modules transform: commonjs
Using plugins:
syntax-class-static-block
syntax-private-property-in-object
syntax-class-properties
syntax-numeric-separator
syntax-nullish-coalescing-operator
syntax-optional-chaining
syntax-json-strings
syntax-optional-catch-binding
syntax-async-generators
syntax-object-rest-spread
transform-modules-commonjs
proposal-dynamic-import
proposal-export-namespace-from { }
Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
my configuration is largely inspired by an example of loadable/server. https://github.com/gregberge/loadable-components/tree/main/examples/webpack/webpack5
babel.config.js
presets: [
'@babel/preset-typescript',
'@babel/react',
[
'@babel/preset-env',
{
useBuiltIns: web ? 'usage' : undefined,
corejs: web ? 'core-js@3' : false,
targets: !web ? { node: 'current' } : 'last 2 versions',
modules: webpack ? false : 'commonjs',
debug: true,
},
],
],
webpack.config.babel.js
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
caller: { target },
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
cacheDirectory: true,
cacheCompression: false,
compact: !isEnvDevelopment,
},
},
I tried changing the values โโof useBuiltIns of the babel/preset-env object but with no effect. I find few resources on this problem.
I also try this without any effects:
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11"
]