0

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"
  ]
Julien S
  • 3
  • 3

0 Answers0