react-spectrum: Unable to load @react-aria/textfield as ESM module
🐛 Bug Report
Starting with version 3.5.1, the contents of @react-aria/textfield/dist/module.js seems to have become garbled. The file at version 3.5.0 looks good and can be correctly loaded as an ESM module.
🤔 Expected Behavior
The file to be loaded correctly, for example, by jest.
😯 Current Behavior
The module is not understood by node:
SyntaxError: The requested module '@react-aria/textfield' does not provide an export named 'useTextField'
💁 Possible Solution
🔦 Context
Trying to run unit tests against a component that depends on @react-aria/textfield.
💻 Code Sample
🌍 Your Environment
| Software | Version(s) |
|---|---|
| react-spectrum | 3.5.2 |
| Browser | Firefox |
| Operating System | macOS |
🧢 Your Company/Team
🕷 Tracking Issue (optional)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 6
- Comments: 19 (17 by maintainers)
You could use a CJS require in the meantime, or transpile your code to CJS. Node ESM has never really been supported by React Aria. It may have worked by accident sometimes due to node’s flaky interop, but we don’t currently test against it.
If we wanted to support it, I guess using an
exportsmap would be the right way, though I suspect some other things might be broken as well. Node’s ESM is quite strict compared with bundlers/transpilers - for example, relative imports must use file extensions.Update: I think I got a new approach working in https://github.com/adobe/react-spectrum/pull/4038. We will do some more testing to be sure.
I’ve merged this branch, we’re going to have it in nightlies for a while to make sure we haven’t broken anything. Our targeted release date for this is January. Please try it out on the nightlies which publish at 2am PDT.
"0 9 * * *" # 02:00 PDTFirst one will be tonight. Thank you for helping us with this work!We’re blocked on this as well. Is there a workaround anyone as found? Currently if I rewrote the output to use normal
module.exports.foobar = valuesyntax rather than$parcel$exportit solves the issue for NodeJS. But I would like to avoid needing topatch-packageeverything.I have this issue with viteJS in SSR mode which also use ESM by default in V3 https://vitejs.dev/guide/migration.html#architecture-changes-and-legacy-options
corresponding error in my app
NextJS uses ESM by default as of version 12!
Possibly related, I’m having issues using these components in NextJS SSR while native ESM is enabled due to a missing
"type": "module"or.mjsfile extension on the module files. NextJS is resolving the"module"path, but when Node tries to load it, it expects CJS without either of the criteria for ESM being fulfilled.