@aws-amplify/ui-react not recognized as ESM

[micah-redwood]

Description

I'm working on integrating authentication into my app using the AWS Amplify library. AWS maintains a React library used for rendering user-related UI (e.g. login, logout, reset password, etc)
NPM: https://www.npmjs.com/package/@aws-amplify/ui-react
Docs: https://ui.docs.amplify.aws/

This package works great on the client (npm run dev), but when I run npm run build, Vite is no longer able to import the named exports from this package (see error below)

My project's structure is based on the react-full example: pre-rendering HTML during build. I just updated the PageShell.tsx file so it includes an authentication provider and then I use authentication hooks & components in my pages/child-components. Should all be pretty basic React stuff, but happy to setup a basic repo to reproduce the issue if that'd be helpful.

I set things up identically with the boilerplate-react-ts example and things worked fine, so it must have to do with pre-rendering.

My best guess is that vite-plugin-ssr is having trouble reading the package.json file for this package correctly:
https://github.com/aws-amplify/amplify-ui/blob/main/packages/react/package.json

Also @brillout , I just got approval to sponsor your project--need to wait on some internal review processes but expect to start paying in late December / early January

Thanks again!

Error Message + Error Stack

file:///Users/micah/Sites/customer-portal/dist/server/assets/dashboard.page.160458e8.js:1
import { useAuthenticator } from "@aws-amplify/ui-react";
         ^^^^^^^^^^^^^^^^
SyntaxError: Named export 'useAuthenticator' not found. The requested module '@aws-amplify/ui-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@aws-amplify/ui-react';
const { useAuthenticator } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async pageFile.loadFile (/Users/micah/Sites/customer-portal/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/parseGlobResults.js:25:40)
    at async Promise.all (index 0)
    at async loadPageFilesServerSide (/Users/micah/Sites/customer-portal/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/analyzePageServerSide/loadPageFilesServerSide.js:8:5)
    at async Promise.all (index 0)
    at async loadPageFilesServer (/Users/micah/Sites/customer-portal/node_modules/vite-plugin-ssr/dist/cjs/node/renderPage.js:383:69)
    at async /Users/micah/Sites/customer-portal/node_modules/vite-plugin-ssr/dist/cjs/node/prerender.js:203:48

[micah-redwood]

Just wanted to confirm that pre-rendering is indeed the issue. If I change ssr({ prerender: true }) to ssr({ prerender: false }) in vite.config.ts plugins, then vite build and vite preview work fine.

Thanks again for your help on this! I expect I'm not the only one struggling to use AWS Amplify in the Vite ecosystem.

[micah-redwood]

As far as reading the package.json file goes, it looks like at least during vite dev, Vite is using the main package (dist/index.js) instead of the module package (dist/esm/index.js):

{
  "name": "@aws-amplify/ui-react",
  "version": "4.2.0",
  "main": "dist/index.js",
  "module": "dist/esm/index.js",

I modified both files locally in node_modules (adding a log statement), and the non-ESM one is being used by Vite. Not sure why this is. During vite build, I don't see either of the log statements...

Also, I'm running the latest version of Vite (3.2.5) and vite-plugin-ssr (0.4.54)

[brillout]

Yea, a reproduction would be the best.

Also, FYI there is also dist/server/package.json (I'm not entirely sure when Node.js resolves to ESM/CJS but it may influence it).

Also @brillout , I just got approval to sponsor your project--need to wait on some internal review processes but expect to start paying in late December / early January

That'd be great. Definitely makes a difference and with enough sponsors we can all looking forward to a bright VPS future.

[micah-redwood]

Thanks @brillout , reproduction here (examples/react-full plus this package installed)
https://github.com/micah-redwood/vite-prerender-aws-amplify-compat

[brillout]

Seems like AWS Amplify's build is broken.

The ESM build of @aws-amplify/ui-react cannot be consumed by Node.js. (Its package.json doesn't have type: "module" and, even when patching that, the code references lodash/debounce which Node.js cannot resolve.)

Does it work with Next.js? I don't think it does, so it's a @aws-amplify/ui-react problem.

A workaround is to use @aws-amplify/ui-react with pages in SPA mode. That way you bypass loading it in Node.js.

Happy to further investigate, especially if your company ends up sponsoring!

[micah-redwood]

Hey @brillout , thanks for looking into this. I also posted on the AWS Amplify Discord yesterday but haven't heard back.

Unfortunately, I need AWS Amplify UI to work well for authentication at work (we use AWS for everything and it's a startup so I can't justify writing my out auth state management & UI), so I've swapped out Vite for NextJS since they're compatible with Webpack, sigh.

Here's hoping AWS Amplify eventually becomes compatible with Vite and the broader non-Webpack ecosystem. If they do, I hope to return to using Vite and get your plugin sponsored. Thanks again for your help, and for all the work you do to make the Vite ecosystem great.

[brillout]

I further checked and, indeed, it works with Next.js. What's going on is that Next.js bundles the @aws-amplify/ui-react server-side imports and that's why it works.

You can achieve the same with Vite by adding @aws-amplify/ui-react to vite.config.js.noExternal.

I forked your reproduction and made it work: https://github.com/brillout/vite-prerender-aws-amplify-compat.

If they do, I hope to return to using Vite and get your plugin sponsored.

👍 No worries if you don't. Although note that if you do end up choosing and sponsoring VPS, then you can expect direct support from me.

I've swapped out Vite for NextJS since they're compatible with Webpack, sigh.

Keep me updated whether you end up with Next.js or Vite/vite-plugin-ssr. I do care about knowing the reasons leading users to chose Next.js over Vite. Thanks!

[brillout]

Created a bug report over at AWS Amplify: aws-amplify/amplify-ui#3155.

In the meantime, use the vite.config.js.noExternal workaround. (If someone doesn't want to use that workaround, e.g. to save build time, another workaround is to build CJS instead of ESM.)

[micah-redwood]

Hey, thanks @brillout ! I'll be on vacation for the next few weeks but will check back in at the end of the month.

[brillout]

Sounds good. Have a restful vacation.

…

On Mon 12. Dec 2022 at 18:42, Micah Engle-Eshleman ***@***.***> wrote: Hey, thanks @brillout <https://github.com/brillout> ! I'll be on vacation for the next few weeks but will check back in at the end of the month. — Reply to this email directly, view it on GitHub <#543 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRV5N7YSY2WC7WVCAOLWM5PXPANCNFSM6AAAAAASXFL3XM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[micah-redwood]

Hey @brillout , just a heads up that we're now sponsoring you (nicka-redwood is my boss at Redwood Materials). I realize it's not a large amount, but hopefully it helps. As our team and production apps grow, I expect we can do more. Really appreciate your help w/ this issue and others!

[brillout]

Thanks Micah 💚, I appreciate it a lot! If you can, also say thanks to Nicka 💚.

Let me know if you have any questions. Also, feel free to PM me on Discord, I can create a private channel for live VPS support.