ESM build cannot be loaded by Node.js

[brillout]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite + vite-plugin-ssr

What browsers are you seeing the problem on?

Chrome

Please describe your bug.

Node.js cannot import @aws-amplify/ui-react:

(node:30335) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
node_modules/@aws-amplify/ui-react/dist/esm/index.js:1

The fix is to set "type": "module" in node_modules/@aws-amplify/ui-react/package.json, but then another error is thrown:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'node_modules/lodash/debounce' imported from node_modules/@aws-amplify/ui-react/dist/esm/primitives/Collection/Collection.js
Did you mean to import lodash@4.17.21/node_modules/lodash/debounce.js?
    at new NodeError (node:internal/errors:372:5)
  code: 'ERR_MODULE_NOT_FOUND'
}

The problem here is that node_modules/@aws-amplify/ui-react/dist/esm/primitives/Collection/Collection.js contains import a from"lodash/debounce" but it should be import a from"lodash/debounce.js" instead. (If you change that line, you'll see the error go away but another similar error is thrown then.)

What's the expected behaviour?

No errors.

Help us reproduce the bug!

Minimal reproduction: https://github.com/brillout/aws-amplify-bug-esm-build.

(In case you're curious, this is the real-world reproduction: https://github.com/micah-redwood/vite-prerender-aws-amplify-compat. With the Vite workaround I mention down below: https://github.com/brillout/vite-prerender-aws-amplify-compat.)

Code Snippet

No response

Additional information and screenshots

I'm the author of vite-plugin-ssr; one of my users reported this bug.

For Vite, a workaround is to add @aws-amplify/ui-react to vite.config.js.noExternal.

But other stacks don't have this possibility, e.g. companies that implement SSR themselves without using a bundler such as Vite or webpack. See the minimal reproduction.

Possibly related: aws-amplify/amplify-js#11421. (Since SvelteKit uses Vite.)

[reesscot]

@brillout Can you confirm which versions of Node you're seeing this in? From your example, it looks like you've primarily tested Node 18, is that correct?

[brillout]

That is correct

…

On Mon 12. Dec 2022 at 18:25, Scott Rees ***@***.***> wrote: @brillout <https://github.com/brillout> Can you confirm which versions of Node you're seeing this in? From your example, it looks like you've primarily tested Node 18, is that correct? — Reply to this email directly, view it on GitHub <#3155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRXD76Y5AI55KOQ2WKTWM5NW7ANCNFSM6AAAAAAS2JF2AU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[0618]

Thank you. I was able to reproduce it with NodeJS 16

[ljharb]

type module isn't required; better and simpler would be to make ESM files have an .mjs extension.

[reesscot]

Just an update that we are making progress on this and will have a PR out soon.

[reesscot]

@brillout @micah-redwood @johanhenrikssn @sheremet-va @ljharb We've published the fix for this to a node-esm tag, if anyone is willing to test it out:

npm install @aws-amplify/ui-react@node-esm

I've tested it out with https://github.com/brillout/aws-amplify-bug-esm-build and it appears to be working.

[reesscot]

The ESM fix has been released in @aws-amplify/ui-react@4.3.6

npm install @aws-amplify/ui-react@latest

@brillout @ljharb @micah-redwood, @johanhenrikssn, @sheremet-va, please let us know if it's working for you.

[micah-redwood]

Thanks @reesscot , it's working great for me (using Vite 3.2.3)!

And hopefully eventually we can get rid of the Vite workarounds mentioned in this issue:
aws-amplify/amplify-js#9639

[reesscot]

So glad to hear ESM in NodeJS is working for you @micah-redwood! We are also working on fixing the remaining vite issues as well, which can be tracked in the ticket you linked.