Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ESM build cannot be loaded by Node.js #3155

Closed
4 tasks done
brillout opened this issue Dec 10, 2022 · 9 comments · Fixed by #3287
Closed
4 tasks done

ESM build cannot be loaded by Node.js #3155

brillout opened this issue Dec 10, 2022 · 9 comments · Fixed by #3287
Labels
Authenticator An issue or a feature-request for an Authenticator UI Component bug Something isn't working build Pull request for fixing a build issue

Comments

@brillout
Copy link

Before creating a new issue, please confirm:

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 reesscot added build Pull request for fixing a build issue bug Something isn't working labels Dec 12, 2022
@reesscot
Copy link
Contributor

@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
Copy link
Author

brillout commented Dec 12, 2022 via email

@0618
Copy link
Contributor

0618 commented Dec 12, 2022

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

@ljharb
Copy link

ljharb commented Jan 3, 2023

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

@reesscot
Copy link
Contributor

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

@reesscot
Copy link
Contributor

@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
Copy link
Contributor

reesscot commented Feb 1, 2023

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
Copy link

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
Copy link
Contributor

reesscot commented Feb 1, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Authenticator An issue or a feature-request for an Authenticator UI Component bug Something isn't working build Pull request for fixing a build issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants