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)

Most upvoted comments

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 exports map 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 PDT First 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 = value syntax rather than $parcel$export it solves the issue for NodeJS. But I would like to avoid needing to patch-package everything.

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 .mjs file 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.