Why does a pollyfilled component need to be polyfilled in imported project again?

106 Views Asked by At

I've a React component that I've created as a library. I've run the build for it with webpack and babeljs. In the babel.config.js of the Babel for this component library, I had the following to polyfill functions that may not exist in older browsers:

  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "useBuiltIns": "usage",
        "corejs": {
          "version": "3.17",
          "proposals": true
        }
      }
    ]
  ],

However, when I import this component library into my main React app, the browsers complain that a few JS functions are "not a function" when run.

What I had to do in the end was to have the same exact setting in the babel.config.js of my main React app too for it to work, which I couldn't understand.

Hasn't the component library already been polyfilled when it was built from its own repository since I had those babel configurations?

Why doesn't it work when I import it into my main React app without those babel configuration in the main React app? Why do I have to have the same settings again in my main React app to polyfill again for it to work?

0

There are 0 best solutions below