Failing to import ESM module in Node

[brynshanahan]

trafficstars

A consumer of our component library is trying to import react-focus-lock in Vitest as a nested dependency which is failing because Node imports the ESM module as { default: FocusLockComponent } rather than FocusLockComponent

I have a reproduction here. If you run yarn workspace common node-test then it shows that the component is being imported incorrectly.

I think a solution might be to use the .mjs extension for the dist/es2015 folder but I'm not totally sure

[brynshanahan]

The way I've gotten our modules to work in most environments is the following config in our package.json files. I'm not sure how necessary it all is(it's been a while) but I've been trying to follow what the team at React Spectrum do with their modules

{
    "main": "dist/cjs/index.cjs",
    "module": "dist/module/index.js", // same as "import" module but without the .mjs ext
    "types": "dist/types/index.d.ts",
    "exports": {
        "import": "./dist/esm/index.mjs",
        "require": "./dist/cjs/index.cjs",
        "types": "./dist/types/index.d.ts"
    },
}

The PR describing their implementation https://github.com/adobe/react-spectrum/pull/4038

[theKashey]

Focus Lock was already migrated to ESM, but that caused a little incident. Unfortunately, it's less about this particular library, it is esm compatible, but about all other libraries it depends on, the ones that has to be updated before this one can migrate - https://github.com/theKashey/react-focus-lock/pull/304

On my short list of things

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.