search

theKashey / react-focus-lock

It is a trap! A lock for a Focus. 🔓
MIT License
1.27k stars 67 forks source link

Failing to import ESM module in Node #316

Open brynshanahan opened 1 month ago

brynshanahan commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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