Clarify polyfilling and browserlist usage documentation

[hugomallet]

Hi,

The docs about supported browsers is not clear.

After reading it i still dont understand the following :

• If the polyfills are not imported, what the browserlist field in package.json is used for ?
• If i need to support ie11 (and Array.includes for example), what do i need to do exactly ?
• Is @babel/preset-env used to automatically require polyfills ?
• Moreover the docs from @babel/preset-env (included with preset react app) indicates to import @babel/polyfill which is now deprecated. react-app-polyfill/stable.js requires the correct package core-js/stable but is browserlist still used using this file ?

Thanks for your help

[petetnt]

I ran to a similar issue myself not too long ago and I think first and foremost it would make sense to fix the instructions on Babel's end first

[lukejagodzinski]

I ran into same issue. Actually I want to support IE11 and from what I understand I have to import import "react-app-polyfill/ie11"; at the top of the index.js file what I do. However, checking polyfill's code I don't see any code for Array.prototype.includes which is not available in IE11...

[petetnt]

Hi @lukejagodzinski, you'll also need to add react-app-polyfill/stable as stated in the docs. The ie9 and ie11 entrypoints only contain language features needed for CRA itself

[lukejagodzinski]

@petetnt yep I've noticed that. But instead of polyfilling everything I've just polyfilled features that I needed using core-js and it works. Would assume that when I use browserslists it should automatically polyfill everything that's needed and also detect what features I'm using and only polyfill them. That would be ideal scenario.

[ksrb]

I just tried to modify the browserlist config to polyfill for older versions of Firefox (52) but it didn't work and I and had to do:

src/index.tsx

// First line in file
import "react-app-polyfill/stable";

// ... other stuff

But, unless I'm reading the code wrong, it seems that the current setup should automatically polyfill based on the browserlist config aka:

it should automatically polyfill everything that's needed and also detect what features I'm using and only polyfill them

See https://github.com/facebook/create-react-app/blob/v3.1.1/packages/babel-preset-react-app/create.js#L78-L92

      (isEnvProduction || isEnvDevelopment) && [
        // Latest stable ECMAScript features
        require('@babel/preset-env').default,
        {
          // Allow importing core-js in entrypoint and use browserlist to select polyfills
          useBuiltIns: 'entry', 
          // Set the corejs version we are using to avoid warnings in console
          // This will need to change once we upgrade to corejs@3
          corejs: 3,
          // Do not transform modules to CJS
          modules: false,
          // Exclude transforms that make all code slower
          exclude: ['transform-typeof-symbol'],
        },
      ],

We should just be able to do:

src/index.tsx

// First line in file
import "core-js";

// ... other stuff

package.json:

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ff >= 52"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ff >= 52"
    ]
  },

When I tried the above the import "core-js" did allow my application to run in FF 52 but the browserlist modifications didn't seem to matter.

For example when I removed ff >= 52 but kept the import "core-js" the application still ran in FF 52.

[ianschmitz]

Would assume that when I use browserslists it should automatically polyfill everything that's needed and also detect what features I'm using and only polyfill them. That would be ideal scenario.

@lukejagodzinski yes that is technically supported in @babel/preset-env by setting useBuiltIns: "usage", but it can lead to subtle bugs that you may not expect when usage doesn't detect the correct usage and it fails to run in a specific browser. Instead we rely on browserslist to polyfill everything needed in your target browser when you choose to import "react-app-polyfill/stable". More advanced usage we recommend that you import the individual polyfills that you need. This will result in a smaller bundle as well.

@ksrb it doesn't look like you've followed the directions over at https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md#polyfilling-other-language-features. Try following that and see if it works for you.

[M0ns1gn0r]

Can someone answer the questions raised by the topic starter one by one?

[Vrq]

Is it possible to deactivate the browserlist config altogether?