__webpack_require__(...) is not a function when using ES5 module in ES6

Viewed 1660

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
0 Answers
Related