How can I configure babel/preset-env to include core-js URLSearchParams polyfill?

Question

I'm using URLSearchParams in my app. The code is transpiled with babel, using babel/preset-env and core-js@3 to include polyfills needed for the browsers I target.

This is my babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "corejs": "3",
        "useBuiltIns": "entry",
        "forceAllTransforms": true
      }
    ]
  ]
}

Here is my .browserslistrc:

IE 11
Edge >= 14
last 2 Chrome versions
last 2 Firefox versions

The problem is that even though I've specified IE11 in .browserslistrc, the polyfill for URLSearchParams is still not included in the final bundle. So far I've solved this by manually importing core-js/web/url-search-params.js but I would rather that was done automatically by babel/preset-env.

Can I configure babel/preset-env somehow to include the URLSearchParams polyfill from core-js?

score 2 · Accepted Answer · answered Feb 14 '20 at 09:49

Since I'm getting upvotes on the question I should probably add my answer here as well.

The problem for me was that I was adding @babel/polyfill next to my entrypoint in my webpack config:

{
  entry: {
    "my.js": ["@babel/polyfill", "my.js"]
  }
}

To fix my problem I removed @babel/polyfill from the entrypoint, and instead added the following to the top of my.js:

import "core-js/stable";
import "regenerator-runtime/runtime";

How can I configure babel/preset-env to include core-js URLSearchParams polyfill?

1 Answers1