"moduleResolution": "Node16" default/named export bug

[jroru]

Reproduction example

Note: unable to provide a codesandbox link due to the inability to control the version of TypeScript used by the IDE

Prerequisites

1. typescript@4.8.3
2. @testing-library/user-event@14.4.3
3. package.json type: module
4. tsconfig moduleResolution set to Node16

// tsconfig
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node16"
  }
}

Expected behavior

userEvent should be the default export of the module

import userEvent from "@testing-library/user-event";

userEvent.click(...);

Actual behavior

userEvent is exported as a named export called default

import userEvent from "@testing-library/user-event";

userEvent.default.click(...);

User-event version

14.4.3

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

This may be invalid for Node 16's ESM spec.

I suspect changing it to the following will resolve the issue:

import {userEvent} from './setup';
export default userEvent;

[jroru]

Changing the syntax did not resolve the issue, but importing a named export did. Created a PR #1070 which adds a named export for userEvent.

[sachinahya]

This happens because the name of the types file ends with .d.ts which, according to its closest package.json, causes TypeScript to be treated as a types file that defines a CommonJS module.

If I put a package.json file in ./dist/types with "type": "module" then the type errors go away, and the .d.ts file gets treated as ESM. Though I guess this could break the types if you try and require it.

[mzaharie]

There's also this problem when you need the type of the return type of the setup method. I have to do either of the following:

import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
function myHelper(user: UserEvent) { ... }

LE: ☝️ still has eslint error saying that import is not good
or

function myHelper(user: ReturnType<typeof userEvent.setup>) { ... }

I'd like UserEvent to be a top level export