Improve Babel configuration and automatically load polyfills (#27333)

babel.config.js

@@ -7,8 +7,8 @@ module.exports = (api) => {
   };
 
   const envOptions = {
-    loose: true,
-    modules: false,
+    useBuiltIns: "usage",
+    corejs: { version: "3.30" },
     debug: false,
     include: [
       'transform-numeric-separator',
@@ -18,29 +18,14 @@ module.exports = (api) => {
     ],
   };
 
-  const config = {
-    presets: [
-      '@babel/preset-typescript',
-      ['@babel/react', reactOptions],
-      ['@babel/env', envOptions],
-    ],
-    plugins: [
-      ['formatjs'],
-      'preval',
-    ],
-    overrides: [
-      {
-        test: /tesseract\.js/,
-        presets: [
-          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
-        ],
-      },
-    ],
-  };
+  const plugins = [
+    ['formatjs'],
+    'preval',
+  ];
 
   switch (env) {
   case 'production':
-    config.plugins.push(...[
+    plugins.push(...[
       'lodash',
       [
         'transform-react-remove-prop-types',
@@ -63,14 +48,29 @@ module.exports = (api) => {
       ],
     ]);
     break;
+
   case 'development':
     reactOptions.development = true;
     envOptions.debug = true;
     break;
-  case 'test':
-    envOptions.modules = 'commonjs';
-    break;
   }
 
+  const config = {
+    presets: [
+      '@babel/preset-typescript',
+      ['@babel/react', reactOptions],
+      ['@babel/env', envOptions],
+    ],
+    plugins,
+    overrides: [
+      {
+        test: /tesseract\.js/,
+        presets: [
+          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
+        ],
+      },
+    ],
+  };
+
   return config;
 };