ts-loader: Problem with esm module

So, there is a library nanobus, which is using another library remove-array-items.

Nanobus in its dist file imports remove-array-items like that:

var splice = require('remove-array-items')

remove-array-items has 2 dist files, commonjs and es module. It exports itself like that in module file:

function removeItems() ...
// actual code there
[...]

export default removeItems;

In my project, when I compile everything with webpack and ts-loader, I get a runtime error that splice is not a function. And indeed it is not a function, but an object which default field is needed function (splice).

My .tsconfig looks like this:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "experimentalDecorators": true,
    "importHelpers": true
  },
  "include": ["./src/**/*"]
}

Webpack loader config:

{
          test: [/\.tsx?$/, /\.js?$/],
          use: {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              compilerOptions: {
                noEmit: false
              }
            }
          },
          exclude: /node_modules/
        },

I tried many different options, tried to remove or add some flags, include and exclude files, but nothing changes for some reason. No compile error, always runtime error.

Generated webpack export of remove-array-items looks like that

/* harmony default export */ __webpack_exports__["default"] = (removeItems);

Import inside nanobus like that

var splice = __webpack_require__(/*! remove-array-items */ "./node_modules/remove-array-items/dist/remove-array-items.esm.js")

So, am I doing something wrong or there is no way to compile that stuff? The only thing I cannot change is module: "es2015" I think, because I need dynamic imports.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 1
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Agreed. But I’m not certain there is a problem with ts-loader. If it can be clearly demonstrated there is then great. But it’s not clear to me that’s the case