Can't build with Astro

[riywo]

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?

Astro (using Vite under the hood for build)

What browsers are you seeing the problem on?

No response

Please describe your bug.

I just tried to experiment Amplify UI with Astro but couldn't build withAuthenticator by the error below:

SyntaxError: Named export 'withAuthenticator' 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 { withAuthenticator } = 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 generatePages (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/core/build/generate.js:61:20)
    at async staticBuild (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/core/build/static-build.js:68:7)
    at async AstroBuilder.build (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/core/build/index.js:86:5)
    at async AstroBuilder.run (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/core/build/index.js:127:7)
    at async build (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/core/build/index.js:21:3)
    at async runCommand (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/cli/index.js:150:14)
    at async cli (file:///workspaces/demo-amplify-ui-astro/node_modules/astro/dist/cli/index.js:168:5)

What's the expected behaviour?

No error during npm run build

Help us reproduce the bug!

Try https://github.com/opsbr/demo-amplify-ui-astro

Code Snippet

See https://github.com/opsbr/demo-amplify-ui-astro

Additional information and screenshots

No response

[reesscot]

Potentially related ticket: #3155

[reesscot]

I was able to reproduce the same build error. However, a workaround is setting the ssr.noexternal config change in astro.config.mjs.

export default defineConfig({
  integrations: [react()],
  vite: {
    ssr: {
      noExternal: ["@aws-amplify/*", "@radix-ui/*"],
    },
  },
});

I confirmed that this fixes this issue using your demo repo. This tells vite not to externalize Amplify UI packages. Please let me know if this fixes your issue.

We are working on updating our ES module exports to make this unnecessary in the future.

[riywo]

@reesscot Thank you for the workaround! It looks working along with another workaround: aws/aws-sdk-js#3673 (comment)

Here is the commit and I can login to Cognito using Amplify UI with Astro SSR on Node.js: opsbr/demo-amplify-ui-astro@1d56947

[riywo]

Actually, one more change was needed for npm run dev: aws-amplify/amplify-js#9639

Commit: opsbr/demo-amplify-ui-astro@dd63862

[reesscot]

@riywo Glad it's working for you now, and thanks for identifying the other change.

We will also update our ES module exports to make the noExternal workaround unnecessary in the future. You can follow that work in #3155

[reesscot]

Closing in favor of tracking the underlying issue in #3155

[reesscot]

The ESM fix has been released in @aws-amplify/[email protected]

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

The workaround should no longer be needed.

[bilal-korir]

This solution worked for me, edit astro.config.mjs as follow:

import {defineConfig} from 'astro/config'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
import react from '@astrojs/react'
import tailwind from '@astrojs/tailwind'

export default defineConfig({
  integrations: [react(), tailwind()],
  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
      },
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()],
      },
    },
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
  },
}) 

Orginal answer can be found here

[reesscot]

@bilal-korir Can you share what parts of Amplify you are using? Maybe we need to add a general troubleshooting section for Astro in the documentation.

[bilal-korir]

Hi @reesscot, the services I use within Amplify are, GraphQL API, Cognito, S3, and hosting.

Here is a screenshot of the error from the console:

Tapping into index.js takes me to the node_modules/buffer/index.js file, particularly this line:

...
 * We detect these buggy browsers and set `Buffer.TYPED_ARRAY_SUPPORT` to `false` so they
 * get the Object implementation, which is slower but behaves correctly.
 */
Buffer.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT !== undefined
  ? global.TYPED_ARRAY_SUPPORT
  : typedArraySupport()
...

Tapping into AuthenticationHelper.js take me to the node_module/amazon-cognito-identity-js/AuthenticationHelper.js file, where it imports the buffer package:

import { Buffer } from 'buffer';
import WordArray from './utils/WordArray';
import { Sha256 } from '@aws-crypto/sha256-js';
...

Thank you, hope this info could help.

[reesscot]

@bilal-korir I've added a section to our troubleshooting guide for Astro: #3410
I'm proposing a simpler node polyfill solution, so you don't have to take on any extra dependencies. Please let me know if this works for you.