Pin babel-preset-react-app to a minor core-js version as per core-js readme #8779

Activity

1. Mrman

   added

   issue: proposal

   needs triage

   on Apr 3, 2020
2. pakaponk commented on Apr 15, 2020

   

   pakaponk

   on Apr 15, 2020

   More actions

   I had the same problem four months ago.

   At that time, I solved it by importing the specific polyfill instead of just corejs

   import 'core-js/modules/esnext.string.match-all';
   
3. Mrman commented on Apr 16, 2020

   

   Mrman

   on Apr 16, 2020

   Last edited by Mrman

   Author

   More actions

   I had the same problem four months ago.

   At that time, I solved it by importing the specific polyfill instead of just corejs

   import 'core-js/modules/esnext.string.match-all';
   

   Thanks @pakaponk, I'm doing the same as you as a workaround in my project knowing the CRA is specifically targetting v3 of core-js.

   This issue is really to explore what's stopping CRA from targetting a more recent version of core-js. core-js@3.0.0 was released over a year ago now (19 Mar 2019).

   👍React with 👍5Reacted by Pakapon Kaewmark, Ethan Setnik, roman, Sergey Vlasov and Aleksandr Chernyavenko
4. puopg commented on Oct 6, 2021

   

   puopg

   on Oct 6, 2021

   More actions

   Yea agreed, or at least expose an option to configure it if you so desire.
5. xprommer commented on Jan 9, 2022

   

   xprommer

   on Jan 9, 2022

   More actions

   The similar issue, babel-plugin-polyfill-corejs3 removes my side-effect import because of babel-preset-react-app provides old version of core-js and there is no way to specify a correct version at least 3.17.
   So I just wanted to use the latest stable ES with nice stuff like Array.prototype.at, Object.hasOwn and so on and
   importing it like a polyfill import "core-js/es/array/at"; with only side effect does not work :(
   The sole solution I've found so far is to use export * from "core-js/es/array/at"; instead of side effect import, but I don't like it.
   It would be much better to add an option for corejs version, or at least update it to the latest 3.20

   👍React with 👍6Reacted by csc-bo, Titanium, zahgboat, martin, Nik Sauer and Sergey Vlasov
6. AndyBoat commented on Aug 15, 2022

   

   AndyBoat

   on Aug 15, 2022

   Last edited by AndyBoat

   More actions

   I have a similar issue when polyfilling Array.prototype.at
   and an ugly but useful workaround is to force import and use it to avoid tree-shaking (? or anything like that)

   import R from "core-js/stable";
   import React from "react";
   import ReactDOM from "react-dom/client";
   import "./index.css";
   import App from "./App";
   import reportWebVitals from "./reportWebVitals";
   
   // eslint-disable-next-line no-unused-expressions
   R;

   👍React with 👍6Reacted by Gavan, ahuet67, blockmood, Aleksandr Sidorenko, kouchao and Virgilio Gómez
7. jakwuh commented on Oct 8, 2023

   

   jakwuh

   on Oct 8, 2023

   More actions

   If you are using craco to override CRA config - you can override corejs version by using the following code

   // craco.config.js
   
   const path = require("path");
   
   const fixCoreJsVersion = (babelConfig) => {
     babelConfig.presets.forEach((preset) => {
       if (preset?.[1]?.corejs)
         preset[1].corejs = require("core-js/package.json").version;
     });
   };
   
   const fixPresetReactAppLoaderOptions = (babelLoaderOptions) => {
     const babelPresetReactAppDependencies =
       require("babel-preset-react-app/dependencies")(null, {
         helpers: true,
       });
   
     const babelPresetReactApp = require("babel-preset-react-app")(null, {
       runtime: "automatic",
     });
   
     fixCoreJsVersion(babelPresetReactAppDependencies);
     fixCoreJsVersion(babelPresetReactApp);
   
     return {
       ...babelLoaderOptions,
       presets: babelLoaderOptions.presets?.map((preset) => {
         if (
           typeof preset?.[0] === "string" &&
           preset[0].includes("babel-preset-react-app/dependencies")
         ) {
           return babelPresetReactAppDependencies;
         }
         if (
           typeof preset?.[0] === "string" &&
           preset[0].includes("babel-preset-react-app/index")
         ) {
           return babelPresetReactApp;
         }
         return preset;
       }),
     };
   };
   
   module.exports = {
     // ...
     babel: {
        // ...
       loaderOptions: fixPresetReactAppLoaderOptions,
     },
   };

   As soon as CRA will be updated to automatically use current node_modules core-js version (same as in the snippet above) – you will be able to remove this code snippet from you craco config 🙌

   ❤️React with ❤️3Reacted by Alexander Balandin, Aleksandr Chernyavenko and yar2001