How to correctly import a module with module.exports = { default: ... }?

Question

The JS version of my project's Cypress config has

const cucumber = require('cypress-cucumber-preprocessor').default;

This works fine. But I thought the import equivalent should be

import cucumber from 'cypress-cucumber-preprocessor';

and this results in

TypeError: (0 , cypress_cucumber_preprocessor_1.default) is not a function

Looking at the module's code I see it exports like this:

const preprocessor = <an arrow function>

module.exports = {
  default: preprocessor,
  transform,
};

In my tsconfig.json I have

"module": "commonjs",
"esModuleInterop": true,

I found two workarounds which work, but I don't like either:

Option 1:

import cucumber_ from 'cypress-cucumber-preprocessor';
const cucumber = cucumber_.default;

which doesn't pass TS typechecking, it thinks cucumber_ is the default exported function.

Option 2: keep the old version with a type assertion

const cucumber = require('cypress-cucumber-preprocessor').default as (options?: any) => (file: any) => Promise<string>;

What am I missing?

The first variant should've worked. But try `import { default as cucumber } from 'cypress-cucumber-preprocessor'` — Parzh from Ukraine, Jul 26 '23 at 16:10
@ParzhfromUkraine I had tried that, it gives the same `TypeError`. — Alexey Romanov, Jul 26 '23 at 16:13
@ParzhfromUkraine That's a different error: `TypeError: cucumber is not a function`, and `console.log(cucumber)` shows it's `{ default: [Function: preprocessor], transform: [Function: transform] }`. — Alexey Romanov, Jul 26 '23 at 16:43
At this point my best guess is that Cypress uses some internal `tsconfig.json` to compile the config file, and it has some settings which don't work with this case. — Alexey Romanov, Jul 26 '23 at 16:47
You can also type module augmentation. I have only tried it with untyped modules so far though, so there might be some conflicts. — Parzh from Ukraine, Jul 26 '23 at 16:58
It's really weird that *cypress-cucumber-preprocess* exports `{ default: preprocessor, transform }` and not [`{ default: preprocessor, transform, __esModule: true }`](https://stackoverflow.com/q/50943704/1048572). This is apparently at odds with the TypeScript declarations it provides. I'd consider this to be a but in the library — Bergi, Jul 26 '23 at 21:22
@Bergi Yes, probably. It's a very old version, too, I was planning to upgrade later. — Alexey Romanov, Jul 27 '23 at 08:15
@Bergi And the example in Allen's answer there clearly shows the reason for the error I get. — Alexey Romanov, Jul 27 '23 at 08:18

0 Answers0