Accessing the default export of a Typescript ESM module from a CommonJS require

At the time of writing this article, I am migrating some plain old Javascript files to Typescript in a production codebase. Since the migration is an ongoing process, each commit is merged directly to the main trunk, so caution to not break anything in the process is required. I ended up migrating a file to Typescript, with its Javascript CommonJS export being a class, like so:

// original javascript file
class AnExampleClass {
  // ...
}

module.exports = AnExampleClass

I thought mapping this to the default export in the typescript version would perpetuate the original design and limit the changes to propagate in the codebase since the export would not be named and the imports could keep their naming:

// migrated typescript file
class AnExampleClass {
  // ...
}

export default AnExampleClass

Still, a lot of other Javascript files are importing it with a CommonJS require statement:

// A file importing the migrated module
// original import
const awesomeModule = require('./awesome-module');

After migrating the module, I happily started the test suite which resulted in a halt because of the awesomeModule import being undefined and failing to call the corresponding class’ methods. I did scratch my head a bit before finding out kinda by chance on the IDE suggestions that I had access to a default property on the import. BINGO! Here’s the corrected require statement:

// A file importing the migrated module
// fixed import
const awesomeModule = require('./awesome-module').default;

And the test suite returns green, and I live happily ever after seeing my Typescript kingdom getting bigger and bigger every day (I actually have a love/hate relationship with Typescript, but let’s just pretend we’re deeply in love for the needs of this post).