I have a ReactJs component library that I build using Typescript + Webpack and target ES5. Here are the relevant sections of tsconfig, webpack.config.json files.
// Library files
// tsconfig.json
"target": "ES5",
"module": "commonjs",
// webpack.config.js
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.jsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.jsx'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
I then reference it in another ReactJS package built that is compiled using TypeScript and targets ES6. Here are the relevant sections in tsconfig.json
// Consumer package files
//tsconfig.json
"lib": ["es6", "DOM", "es5"],
"module": "commonjs",
// webpack.config.js
// No resolve or rules entries
The build succeeds for both library and consumer package. But when I load the consumer package in browser I get following error in console.
I can not change the ReactJS component library that is using ES5, how can I use it in my Consumer library that is using ES6?
When I compile the ES5 library this is what I see in bundle.js file (I have compiled in development mode for readibility.
exports.getQuestionsFromS3 = getQuestionsFromS3;
Uncaught TypeError: sample_module_name.getQuestionsFromS3 is not a function
at Object../app/index.tsx (index.tsx:30)
at __webpack_require__ (bootstrap:848)
at fn (bootstrap:150)
at Object.0 (app.chunk.js:2887)
at __webpack_require__ (bootstrap:848)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at app.chunk.js:1