Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fix ESM distribution for node import usage #819

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

isaacs
Copy link

@isaacs isaacs commented Sep 28, 2023

When loading this module with import() in Node, the CommonJS module was being loaded, resulting in {default:{default:fn}} instead of just {default:fn} as intended.

Because the types are only defined for CommonJS, this was further compounded, meaning that instead of doing this:

import reactElementToJSXString from 'react-element-to-jsx-string'

TypeScript users would have to do this:

const {
  default: { default: reactElementToJSXString },
} = (await import('react-element-to-jsx-string')) as unknown as {
  default: typeof import('react-element-to-jsx-string')
}
// wat.
  • Add conditional exports for import and require, so that the ESM is served to import() users.
  • Add a build script to place a package.json file in dist/esm, setting it to ESM mode for Node's loader and TypeScript's module resolution.
  • Test that require() and import() receive matching objects, when loading from a mjs file in a folder outside this project.

With this change, import() in Node loads the ESM version, properly typed, without any hassle.

When loading this module with import() in Node, the CommonJS module was
being loaded, resulting in {default:{default:fn}} instead of just
{default:fn} as intended.

Because the types are only defined for CommonJS, this was further
compounded, meaning that instead of doing this:

```ts
import reactElementToJSXString from 'react-element-to-jsx-string'
```

TypeScript users would have to do this:

```ts
const {
  default: { default: reactElementToJSXString },
} = (await import('react-element-to-jsx-string')) as unknown as {
  default: typeof import('react-element-to-jsx-string')
}
// wat.
```

- Add conditional exports for import and require, so that the ESM is
  served to import() users.
- Add a build script to place a package.json file in dist/esm, setting
  it to ESM mode for Node's loader and TypeScript's module resolution.
- Test that require() and import() receive matching objects, when
  loading from a mjs file in a folder outside this project.

With this change, `import()` in Node loads the ESM version, properly
typed, without any hassle.
@armandabric
Copy link
Collaborator

armandabric commented Oct 2, 2023

@isaacs I will have look. It looks like the smoke test suite it not really well done for modern ESM build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants