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?