node v20+ esm module resolution / types not working properly

[tom2strobl]

Environments

• Framework name: react
• Framework version: 18
• Component name: @scena/react-guides
• Component version: 0.28.2

Description

Hi there! I'm using node v20+ ESM with type: "module" and typescript with "moduleResolution": "NodeNext" in tsconfig.json.

import Guides from '@scena/react-guides'

function Component() {
  return <Guides />
}

In VSCode <Guides> is underlined with the following:
JSX element type 'Guides' does not have any construct or call signatures.ts(2604)

I also tried the following things without success:

// same issue
import { default as Guides } from '@scena/react-guides'

// not available
import { Guides } from '@scena/react-guides'

// obviously breaks the types
import Guides from '@scena/react-guides/dist/guides.esm.js'
import Guides from '@scena/react-guides/src/index.esm.js'

I think moveable and your other repos are suffering from the same issue.

Here's a minimal reproduction repository:
https://github.com/tom2strobl/daybrush-node-esm

Maybe it's as simple as adding an "exports" field to the package.json? I'm not sure if the module property is still the way to go
"module": "./dist/guides.esm.js", -> "exports": { "./": "./dist/guides.esm.js" }"

Let me know if I can help!

[tom2strobl]

Ah I just saw that the repo is pretty much abandoned. Well in case anyone stumbles upon the same issue and looks for a quick intermediate solution, I ended up re-exporting to have types again like so:

// note that you probably want to @ts-ignore here since it will nag about a declaration file being missing
import GuidesImpl from '@scena/react-guides/dist/guides.esm.js'
import type GuidesType from '@scena/react-guides/declaration/index.esm.d.ts'
// any types you want to reimport
import type { OnChangeGuides } from '@scena/react-guides/declaration/types.d.ts'

const Guides: typeof GuidesType.default = GuidesImpl

export { Guides, OnChangeGuides }