2

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?

Carven
  • 14,988
  • 29
  • 118
  • 161
  • First idea: maybe you do not put the polyfills into the bundle. second idea: you use other ES6 functions in your main project that still need polyfills. – Martin Sep 11 '21 at 13:37

0 Answers0