TypeError: Class extends value #<Object> is not a constructor or null

[jarda-svoboda]

Hi,
i'm facing this issue with CJS bundles. I have two files:

// ./a.js

export default class A {
  constructor() {
    console.log('Hello world!');
  }
}

// ./b.js

import A from './a.cjs'; // should be evaluated dynamically

class B extends A {
  constructor() {
    super();
    console.log("How ya doin'?");
  }
}

new B();

Building two separate files using:
tsup ./a.js and tsup ./b.js --external ./a.cjs

Which produces desired cjs files in the dist folder.

The problem appears if I run:

$ node ./dist/b.cjs 
./dist/b.cjs:22
var B = class extends import_a.default {
                               ^

TypeError: Class extends value #<Object> is not a constructor or null

Expected output :

$ node ./dist/b.cjs
Hello world!
How ya doin'?

ESM works well.

Update: It works well if i remove __toESM from b.cjs:

// ./dist/b.cjs

// Changed this:
var import_a = __toESM(require("./a.cjs"), 1);

// To this:
var import_a = require("./a.cjs");

[onursagir]

same another workaround i've find to work is:

import A from './a.cjs';

//                 vvvv
class B extends A.default {
  constructor() {
    super();
    console.log("How ya doin'?");
  }
}

However it does upset my editor a little bit.

Edit: you may need to place // @ts-ignore above class B extends A.default {

[jarda-svoboda]

splitting: true does the magic...

// tsup.config.js

import { defineConfig } from 'tsup';

export default defineConfig(
  /** @type {() => import('tsup').Options} */
  (options) => ({
    clean: true,
    dts: true,
    format: ['cjs', 'esm'],
    entry: ['src/index.ts'],
    minify: !options.watch,
    sourcemap: options.watch,
    splitting: true,
  }),
);

It works fine with this config!