Getting weird error when using `runWithAmplifyServerContext`

jrwpatterson commented 5 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Other

Environment information

``` # Put output below this line System: OS: macOS 14.2.1 CPU: (12) arm64 Apple M2 Max Memory: 477.22 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node Yarn: 3.2.0 - /opt/homebrew/bin/yarn npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm pnpm: 8.14.0 - ~/Library/pnpm/pnpm bun: 1.0.9 - ~/.bun/bin/bun Browsers: Chrome: 120.0.6099.216 Safari: 17.2.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/adapter-nextjs: ^1.0.12 => 1.0.12 @aws-amplify/adapter-nextjs/api: undefined () @aws-amplify/adapter-nextjs/data: undefined () @aws-amplify/api: ^6.0.12 => 6.0.12 @aws-amplify/api-graphql: ^4.0.12 => 4.0.12 @aws-amplify/api-graphql/internals: undefined () @aws-amplify/api-graphql/internals/server: undefined () @aws-amplify/api-graphql/server: undefined () @aws-amplify/api/internals: undefined () @aws-amplify/api/server: undefined () @aws-amplify/auth: ^6.0.12 => 6.0.12 @aws-amplify/auth/cognito: undefined () @aws-amplify/auth/cognito/server: undefined () @aws-amplify/auth/enable-oauth-listener: undefined () @aws-amplify/auth/server: undefined () @aws-amplify/core: ^6.0.12 => 6.0.12 @aws-amplify/core/internals/adapter-core: undefined () @aws-amplify/core/internals/aws-client-utils: undefined () @aws-amplify/core/internals/aws-client-utils/composers: undefined () @aws-amplify/core/internals/aws-clients/cognitoIdentity: undefined () @aws-amplify/core/internals/aws-clients/pinpoint: undefined () @aws-amplify/core/internals/providers/pinpoint: undefined () @aws-amplify/core/internals/utils: undefined () @aws-amplify/core/server: undefined () @aws-amplify/ui-react: ^6.1.1 => 6.1.1 @aws-amplify/ui-react-internal: undefined () @babel/core: undefined () @babel/plugin-transform-modules-commonjs: ^7.23.3 => 7.23.3 (7.16.8, 7.23.0) @babel/plugin-transform-runtime: ^7.23.6 => 7.23.6 @babel/runtime: 7.22.5 @builder.io/partytown: ^0.8.2 => 0.8.2 @builder.io/partytown/integration: 0.8.2 @builder.io/partytown/react: 0.8.2 @builder.io/partytown/services: 0.8.2 @builder.io/partytown/utils: 0.8.2 @commitlint/cli: ^18.4.3 => 18.4.3 @commitlint/config-conventional: ^18.4.3 => 18.4.3 @edge-runtime/cookies: 4.0.2 @edge-runtime/ponyfill: 2.4.1 @edge-runtime/primitives: 4.0.2 @emotion/css: ^11.11.2 => 11.11.2 @emotion/eslint-plugin: ^11.11.0 => 11.11.0 @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @googlemaps/jest-mocks: ^2.21.4 => 2.21.4 @googlemaps/js-api-loader: ^1.16.2 => 1.16.2 @graphql-codegen/cli: 5.0.0 => 5.0.0 @graphql-codegen/plugin-helpers: ^5.0.1 => 5.0.1 (3.1.2, 2.7.2) @graphql-codegen/typescript: 4.0.1 => 4.0.1 @graphql-codegen/typescript-document-nodes: 4.0.1 => 4.0.1 @graphql-codegen/typescript-graphql-files-modules: 3.0.0 => 3.0.0 @graphql-codegen/typescript-operations: 4.0.1 => 4.0.1 @graphql-codegen/typescript-react-query: 6.0.0 => 6.0.0 @graphql-codegen/visitor-plugin-common: 4.0.1 => 4.0.1 (2.13.1) @hapi/accept: undefined () @hookform/resolvers: ^3.3.4 => 3.3.2 @hookform/resolvers/ajv: 1.0.0 @hookform/resolvers/arktype: 1.0.0 @hookform/resolvers/class-validator: 1.0.0 @hookform/resolvers/computed-types: 1.0.0 @hookform/resolvers/io-ts: 1.0.0 @hookform/resolvers/joi: 1.0.0 @hookform/resolvers/nope: 1.0.0 @hookform/resolvers/superstruct: 1.0.0 @hookform/resolvers/typanion: 1.0.0 @hookform/resolvers/typebox: 1.0.0 @hookform/resolvers/valibot: 1.0.0 @hookform/resolvers/vest: 1.0.0 @hookform/resolvers/yup: 1.0.0 @hookform/resolvers/zod: 1.0.0 @lottiefiles/react-lottie-player: ^3.5.3 => 3.5.3 @mswjs/interceptors: undefined () @mui/icons-material: ^5.15.4 => 5.14.19 @mui/material: ^5.15.4 => 5.14.20 @napi-rs/triples: undefined () @next/bundle-analyzer: ^14.0.4 => 14.0.4 @next/font: undefined () @next/react-dev-overlay: undefined () @next/third-parties: ^14.0.3 => 14.0.3 @opentelemetry/api: undefined () @react-google-maps/api: ^2.19.2 => 2.19.2 @react-native-community/eslint-config: ^3.2.0 => 3.2.0 @storybook/react: ^7.6.4 => 7.6.4 @svgr/cli: ^8.1.0 => 8.1.0 @svgr/core: ^8.1.0 => 8.1.0 @svgr/webpack: 8.1.0 => 8.1.0 @tanstack/query-codemods: 4.24.3 @tanstack/react-query: ^5.17.15 => 5.17.15 @testing-library/dom: ^9.3.3 => 9.3.3 @testing-library/jest-dom: ^6.1.5 => 6.1.5 @testing-library/react: ^14.1.2 => 14.1.2 @testing-library/react-hooks: ^8.0.1 => 8.0.1 @testing-library/user-event: ^14.5.1 => 14.5.1 @types/aws4: ^1.11.6 => 1.11.6 @types/babel__core: ^7.20.5 => 7.20.5 (7.1.18) @types/babel__plugin-transform-runtime: ^7.9.5 => 7.9.5 @types/braintree-web-drop-in: ^1.39.3 => 1.39.3 @types/css-mediaquery: ^0.1.4 => 0.1.4 @types/es6-promisify: ^6.0.4 => 6.0.4 @types/google-map-react: ^2.1.10 => 2.1.10 @types/google.maps: ^3.54.10 => 3.54.10 (3.53.5) @types/jest: ^29.5.11 => 29.5.11 @types/jsdom: ^21.1.6 => 21.1.6 (20.0.0) @types/lodash: ^4.14.202 => 4.14.202 @types/lodash-es: ^4.17.12 => 4.17.12 @types/luxon: ^3.3.3 => 3.3.3 @types/marked: ^6.0.0 => 6.0.0 @types/mdx-js__react: ^1.5.8 => 1.5.8 @types/node: ^20.10.4 => 20.10.4 (18.18.8, 20.8.10, 18.18.11) @types/pluralize: ^0.0.33 => 0.0.33 @types/react: ^18.2.43 => 18.2.43 (18.2.35) @types/react-dom: ^18.2.17 => 18.2.17 @types/react-gtm-module: ^2.0.3 => 2.0.3 @types/react-helmet: ^6.1.8 => 6.1.8 @types/react-native-maps: ^0.24.2 => 0.24.2 @types/react-native-snap-carousel: ^3.8.9 => 3.8.9 @types/react-pdf: ^7.0.0 => 7.0.0 @types/react-test-renderer: ^18.0.7 => 18.0.7 @types/react-transition-group: ^4.4.10 => 4.4.10 @types/rimraf: ^4.0.5 => 4.0.5 @types/setimmediate: ^1.0.4 => 1.0.4 @types/url-parse: ^1.4.11 => 1.4.11 @types/yup: ^0.32.0 => 0.32.0 @typescript-eslint/eslint-plugin: ^6.14.0 => 6.14.0 (5.30.5, 6.9.1) @typescript-eslint/parser: ^6.14.0 => 6.14.0 (5.30.5, 6.9.1, 6.10.0) @v2-digital/eslint-plugin-v2-linter: 1.14.2 => 1.14.2 @vercel/analytics: ^1.1.1 => 1.1.1 @vercel/edge-config: ^0.4.1 => 0.4.1 @vercel/nft: undefined () @vercel/og: 0.6.2 @vercel/speed-insights: ^1.0.4 => 1.0.4 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aus-postcode: ^0.0.4 => 0.0.4 autoprefixer: ^10.4.16 => 10.4.16 aws-amplify: ^6.0.12 => 6.0.12 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () axios: 1.6.5 => 1.6.5 axios-hooks: ^5.0.2 => 5.0.2 babel-jest: ^29.7.0 => 29.7.0 babel-packages: undefined () babel-plugin-lodash: ^3.3.4 => 3.3.4 braintree-web-drop-in: ^1.41.0 => 1.41.0 browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chromatic: 10.1.0 => 10.1.0 ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () commitizen: ^4.3.0 => 4.3.0 (4.2.4) compression: undefined () concurrently: ^8.2.2 => 8.2.2 conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () copy-webpack-plugin: ^11.0.0 => 11.0.0 cross-env: ^7.0.3 => 7.0.3 cross-spawn: undefined () crypto-browserify: undefined () css-mediaquery: ^0.1.2 => 0.1.2 css.escape: undefined () cz-conventional-changelog: ^3.3.0 => 3.3.0 (3.2.0) data-uri-to-buffer: undefined () dayjs: ^1.11.10 => 1.11.10 debug: undefined () devalue: undefined () domain-browser: undefined () duplicate-package-checker-webpack-plugin: ^3.0.0 => 3.0.0 edge-runtime: undefined () es6-promisify: ^7.0.0 => 7.0.0 eslint: ^8.55.0 => 8.55.0 (8.53.0, 6.8.0) eslint-config-standard-react: ^13.0.0 => 13.0.0 eslint-config-standard-with-typescript: ^42.0.0 => 42.0.0 (39.1.1) eslint-formatter-gitlab: ^5.1.0 => 5.1.0 eslint-import-resolver-typescript: ^3.6.1 => 3.6.1 eslint-import-resolver-workspaces: ^1.2.0 => 1.2.0 eslint-plugin-cypress: ^2.15.1 => 2.15.1 eslint-plugin-graphql: ^4.0.0 => 4.0.0 eslint-plugin-import: ^2.29.0 => 2.29.0 eslint-plugin-jest: ^27.6.0 => 27.6.0 (26.9.0) eslint-plugin-jest-dom: ^5.1.0 => 5.1.0 eslint-plugin-json: ^3.1.0 => 3.1.0 eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0 eslint-plugin-markdown: ^3.0.1 => 3.0.1 eslint-plugin-md: ^1.0.19 => 1.0.19 eslint-plugin-n: ^16.4.0 => 16.4.0 (16.2.0) eslint-plugin-node: ^11.1.0 => 11.1.0 eslint-plugin-package-json: ^0.2.0 => 0.2.0 eslint-plugin-prefer-arrow: ^1.2.3 => 1.2.3 eslint-plugin-prettier: ^5.0.1 => 5.0.1 (4.2.1) eslint-plugin-promise: ^6.1.1 => 6.1.1 eslint-plugin-react: ^7.33.2 => 7.33.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 (5.0.0-canary-7118f5dd7-20230705) eslint-plugin-security: ^1.7.1 => 1.7.1 eslint-plugin-sonarjs: ^0.23.0 => 0.23.0 eslint-plugin-standard: ^5.0.0 => 5.0.0 eslint-plugin-tailwindcss: ^3.13.0 => 3.13.0 eslint-plugin-unicorn: ^49.0.0 => 49.0.0 eslint-plugin-yml: ^1.10.0 => 1.10.0 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () get-yarn-workspaces: ^1.0.2 => 1.0.2 glob: undefined () google-map-react: ^2.2.1 => 2.2.1 graphql: ^16.8.1 => 16.8.1 (15.8.0) graphql-request: ^6.1.0 => 6.1.0 gzip-size: undefined () html-react-parser: ^5.0.7 => 5.0.7 http-proxy: undefined () http-proxy-agent: undefined () http-server: ^14.1.1 => 14.1.1 https-browserify: undefined () https-proxy-agent: undefined () husky: ^8.0.3 => 8.0.3 icss-utils: undefined () ignore-loader: undefined () image-size: undefined () invalid-top-level-property-order: 1.0.0 is-animated: undefined () is-docker: undefined () is-wsl: undefined () isomorphic-dompurify: ^1.12.0 => 1.12.0 jest: ^29.7.0 => 29.7.0 jest-circus: 29.7.0 => 29.7.0 jest-date-mock: ^1.0.8 => 1.0.8 jest-environment-jsdom: ^29.7.0 => 29.7.0 jest-esm-transformer: ^1.0.0 => 1.0.0 jest-fail-on-console: ^3.1.2 => 3.1.2 jest-junit-reporter: ^1.1.0 => 1.1.0 jest-resolve: 29.7.0 => 29.7.0 jest-watch-typeahead: 2.2.2 => 2.2.2 jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () junit-report-merger: ^6.0.3 => 6.0.3 lint-staged: ^15.0.2 => 15.0.2 loader-runner: undefined () loader-utils: undefined () lodash-es: ^4.17.21 => 4.17.21 lodash.curry: undefined () lru-cache: undefined () marked: ^11.1.0 => 11.1.0 (9.1.5) micromatch: undefined () mini-css-extract-plugin: undefined () mocha-junit-reporter: ^2.2.1 => 2.2.1 mochawesome: ^7.1.3 => 7.1.3 mochawesome-merge: ^4.3.0 => 4.3.0 mochawesome-report-generator: ^6.2.0 => 6.2.0 mq-polyfill: ^1.1.8 => 1.1.8 nanoid: undefined () native-url: undefined () neo-async: undefined () next: v14.0.5-canary.59 => 14.0.5-canary.59 node-fetch: undefined () node-html-parser: ^6.1.11 => 6.1.11 () notistack: ^3.0.1 => 3.0.1 ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () platform: undefined () pluralize: ^8.0.0 => 8.0.0 postcss: ^8.4.33 => 8.4.33 (8.4.31) postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () prettier: ^3.2.3 => 3.2.3 (2.8.8, 3.0.3) prettier-plugin-packagejson: ^2.4.9 => 2.4.9 prettier-plugin-tailwindcss: ^0.5.11 => 0.5.11 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.2.0 => 18.2.0 react-builtin: undefined () react-dev-tools: ^0.0.1 => 0.0.1 react-dom: ^18.2.0 => 18.2.0 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-gtm-module: ^2.0.11 => 2.0.11 react-helmet: ^6.1.0 => 6.1.0 react-hook-form: ^7.49.0 => 7.49.0 (7.48.2) react-is: 18.2.0 react-merge-refs: ^2.1.1 => 2.1.1 react-pdf: ^7.6.0 => 7.6.0 (7.5.1) react-player: ^2.13.0 => 2.13.0 react-refresh: 0.12.0 react-responsive-carousel: ^3.2.23 => 3.2.23 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () react-test-renderer: ^18.2.0 => 18.2.0 react-transition-group: ^4.4.5 => 4.4.5 react-transition-group/CSSTransition: undefined () react-transition-group/ReplaceTransition: undefined () react-transition-group/SwitchTransition: undefined () react-transition-group/Transition: undefined () react-transition-group/TransitionGroup: undefined () react-transition-group/TransitionGroupContext: undefined () react-transition-group/config: undefined () react-unleash-flags: ^1.3.0 => 1.3.0 react-use: ^17.4.2 => 17.4.2 regenerator-runtime: 0.13.4 rimraf: ^5.0.5 => 5.0.5 (3.0.2, 2.6.3) sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: ^1.0.5 => 1.0.5 () sharp: ^0.33.0 => 0.33.0 shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superstruct: undefined () supports-color: ^9.4.0 => 8.1.1 swiper: ^11.0.5 => 11.0.5 tailwind-scrollbar-hide: ^1.1.7 => 1.1.7 tailwindcss: ^3.4.1 => 3.4.1 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () ts-node: ^10.9.2 => 10.9.2 (10.7.0, 9.1.1) tty-browserify: undefined () typescript: ^5.3.3 => 5.3.3 (4.9.5, 5.2.2) ua-parser-js: undefined () unalphabetized-collections: 1.0.0 unistore: undefined () url-parse: ^1.5.10 => 1.5.10 use-deep-compare: ^1.1.0 => 1.1.0 use-deep-compare-effect: ^1.8.1 => 1.8.1 util: undefined () valid-local-dependency: 1.0.0 vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () webpack-stats-report: ^2.0.6 => 2.0.6 ws: undefined () xhr-mock: ^2.5.1 => 2.5.1 yup: ^1.3.2 => 1.3.2 zod: undefined () npmGlobalPackages: @aws-amplify/cli: 12.8.2 corepack: 0.20.0 deadfile: 2.1.0 dpdm: 3.14.0 madge: 6.1.0 npm: 10.1.0 ```

Describe the bug

When running this code on the server

const tokens = await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec)
        return session.tokens
      } catch (error) {
        console.log(error)
        return false
      }
    },
  })

When I run the nextjs build script I get the following error

./node_modules/@aws-amplify/core/node_modules/@aws-crypto/sha256-js/build/module/index.js + 11 modules
Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js

Expected behavior

The application should build

Reproduction steps

add this to a server side function

run next build

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

cwomack commented 5 months ago

Hello, @jrwpatterson 👋 and sorry to hear you're running into these errors. To make sure this isn't an easy fix first, can you first try deleting your node_modules folder, then deleting your package-lock.json, and then reinstalling dependencies with npm i helps resolve the issue?

If it doesn't, can you check to see if there are multiple versions of the aws-crypto/sha256-js or smithy/util-utf8 dependencies? You should be able to run npm ls @aws-crypto/sha256-js and npm ls @smithy/util-utf8 and see if you get more than 1 output.

grasdal commented 5 months ago

I have started seeing the same issue recently. when using the latest @aws-amplify/adapter-nextjs npm package that pulls in various aws packages.

./node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules
Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js

Deleting the node_modules folder, and package-lock.json does not resolve the issue.

npm ls @smithy/util-utf8 output

└─┬ @aws-amplify/adapter-nextjs@1.0.13
  └─┬ aws-amplify@6.0.13
    ├─┬ @aws-amplify/analytics@7.0.13
    │ ├─┬ @aws-sdk/client-firehose@3.398.0
    │ │ ├─┬ @aws-sdk/client-sts@3.398.0
    │ │ │ └── @smithy/util-utf8@2.0.0 deduped
    │ │ ├─┬ @aws-sdk/credential-provider-node@3.398.0
    │ │ │ └─┬ @aws-sdk/credential-provider-sso@3.398.0
    │ │ │   ├─┬ @aws-sdk/client-sso@3.398.0
    │ │ │   │ └── @smithy/util-utf8@2.0.0 deduped
    │ │ │   └─┬ @aws-sdk/token-providers@3.398.0
    │ │ │     └── @smithy/util-utf8@2.0.0 deduped
    │ │ ├─┬ @aws-sdk/middleware-signing@3.398.0
    │ │ │ └─┬ @smithy/signature-v4@2.1.1
    │ │ │   └── @smithy/util-utf8@2.1.1
    │ │ ├─┬ @smithy/hash-node@2.1.1
    │ │ │ └── @smithy/util-utf8@2.1.1
    │ │ ├─┬ @smithy/smithy-client@2.3.1
    │ │ │ └─┬ @smithy/util-stream@2.1.1
    │ │ │   └── @smithy/util-utf8@2.1.1
    │ │ └── @smithy/util-utf8@2.0.0 deduped
    │ ├─┬ @aws-sdk/client-kinesis@3.398.0
    │ │ └── @smithy/util-utf8@2.0.0 deduped
    │ ├─┬ @aws-sdk/client-personalize-events@3.398.0
    │ │ └── @smithy/util-utf8@2.0.0 deduped
    │ └── @smithy/util-utf8@2.0.0
    ├─┬ @aws-amplify/core@6.0.13
    │ └─┬ @aws-crypto/sha256-js@5.2.0
    │   └─┬ @aws-crypto/util@5.2.0
    │     └── @smithy/util-utf8@2.0.0 deduped
    └─┬ @aws-amplify/storage@6.0.13
      └─┬ @smithy/md5-js@2.0.7
        └── @smithy/util-utf8@2.0.0 deduped

npm ls @aws-crypto/sha256-js output:

└─┬ @aws-amplify/adapter-nextjs@1.0.13
  └─┬ aws-amplify@6.0.13
    ├─┬ @aws-amplify/analytics@7.0.13
    │ ├─┬ @aws-sdk/client-firehose@3.398.0
    │ │ ├─┬ @aws-crypto/sha256-browser@3.0.0
    │ │ │ └── @aws-crypto/sha256-js@3.0.0
    │ │ ├── @aws-crypto/sha256-js@3.0.0
    │ │ ├─┬ @aws-sdk/client-sts@3.398.0
    │ │ │ └── @aws-crypto/sha256-js@3.0.0
    │ │ └─┬ @aws-sdk/credential-provider-node@3.398.0
    │ │   └─┬ @aws-sdk/credential-provider-sso@3.398.0
    │ │     ├─┬ @aws-sdk/client-sso@3.398.0
    │ │     │ └── @aws-crypto/sha256-js@3.0.0
    │ │     └─┬ @aws-sdk/token-providers@3.398.0
    │ │       └── @aws-crypto/sha256-js@3.0.0
    │ ├─┬ @aws-sdk/client-kinesis@3.398.0
    │ │ └── @aws-crypto/sha256-js@3.0.0
    │ └─┬ @aws-sdk/client-personalize-events@3.398.0
    │   └── @aws-crypto/sha256-js@3.0.0
    └─┬ @aws-amplify/core@6.0.13
      └── @aws-crypto/sha256-js@5.2.0

HuiSF commented 5 months ago

Hi @grasdal looking at the output of npm ls @smithy/util-utf8 it's odd that aws-amplify@6.0.13 is a leaf on the tree of @aws-amplify/adapter-nextjs@1.0.13. aws-amplify is a peer dependency, so it should be located right under your project.

Could you share the content of the dependencies section in your package.json?

grasdal commented 5 months ago

@HuiSF

I normally would also would have aws-amplify in my dependencies, however, for the above post I reduced it to only @aws-amplify/adapter-nextjs from Amplify to show that the build issue persisted even with a minimum example of letting the @aws-amplify/adapter-nextjs package pull in amplify for me.

This is how the full dependencies looks when both aws-amplify and @aws-amplify/adapter-nextjs included

Installing with npm i aws-amplify @aws-amplify/adapter-nextjs

results in

 "dependencies": {
        "@aws-amplify/adapter-nextjs": "^1.0.13",
        "@datadog/browser-rum": "^5.8.0",
        "@headlessui/react": "^1.7.18",
        "@headlessui/tailwindcss": "^0.2.0",
        "@heroicons/react": "^2.1.1",
        "@hookform/resolvers": "^3.3.4",
        "@next/bundle-analyzer": "^14.1.0",
        "@tanstack/react-query": "^5.17.19",
        "@tanstack/react-query-devtools": "^5.17.21",
        "aws-amplify": "^6.0.13",
        "base64url": "^3.0.1",
        "bitmovin-player": "^8.149.0",
        "bitmovin-player-ui": "^3.53.0",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
        "date-fns": "^3.3.1",
        "jsonwebtoken": "^9.0.2",
        "moment": "^2.30.1",
        "next": "^14.1.0",
        "next-international": "^1.2.3",
        "next-themes": "^0.2.1",
        "nextjs13-progress": "^1.2.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-error-boundary": "^4.0.12",
        "react-hook-form": "^7.49.3",
        "react-multi-carousel": "^2.8.4",
        "sharp": "^0.33.2",
        "ua-parser-js": "^1.0.37",
        "use-debounce": "^10.0.0",
        "uuid": "^9.0.1",
        "zod": "^3.22.4"
    },
    "devDependencies": {
        "@tanstack/eslint-plugin-query": "^5.17.20",
        "@types/jsonwebtoken": "^9.0.5",
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@types/ua-parser-js": "^0.7.39",
        "@types/uuid": "^9.0.7",
        "autoprefixer": "^10.4.17",
        "eslint": "^8",
        "eslint-config-next": "14.1.0",
        "eslint-plugin-validate-filename": "^0.0.4",
        "postcss": "^8",
        "prettier": "^3.2.4",
        "prettier-plugin-tailwindcss": "^0.5.11",
        "tailwindcss": "^3.4.1",
        "typescript": "^5"
    }

npm ls @smithy/util-utf8 output

└─┬ aws-amplify@6.0.13
  ├─┬ @aws-amplify/analytics@7.0.13
  │ ├─┬ @aws-sdk/client-firehose@3.398.0
  │ │ ├─┬ @aws-sdk/client-sts@3.398.0
  │ │ │ └── @smithy/util-utf8@2.0.0 deduped
  │ │ ├─┬ @aws-sdk/credential-provider-node@3.398.0
  │ │ │ └─┬ @aws-sdk/credential-provider-sso@3.398.0
  │ │ │   ├─┬ @aws-sdk/client-sso@3.398.0
  │ │ │   │ └── @smithy/util-utf8@2.0.0 deduped
  │ │ │   └─┬ @aws-sdk/token-providers@3.398.0
  │ │ │     └── @smithy/util-utf8@2.0.0 deduped
  │ │ ├─┬ @aws-sdk/middleware-signing@3.398.0
  │ │ │ └─┬ @smithy/signature-v4@2.1.1
  │ │ │   └── @smithy/util-utf8@2.1.1
  │ │ ├─┬ @smithy/hash-node@2.1.1
  │ │ │ └── @smithy/util-utf8@2.1.1
  │ │ ├─┬ @smithy/smithy-client@2.3.1
  │ │ │ └─┬ @smithy/util-stream@2.1.1
  │ │ │   └── @smithy/util-utf8@2.1.1
  │ │ └── @smithy/util-utf8@2.0.0 deduped
  │ ├─┬ @aws-sdk/client-kinesis@3.398.0
  │ │ └── @smithy/util-utf8@2.0.0 deduped
  │ ├─┬ @aws-sdk/client-personalize-events@3.398.0
  │ │ └── @smithy/util-utf8@2.0.0 deduped
  │ └── @smithy/util-utf8@2.0.0
  ├─┬ @aws-amplify/core@6.0.13
  │ └─┬ @aws-crypto/sha256-js@5.2.0
  │   └─┬ @aws-crypto/util@5.2.0
  │     └── @smithy/util-utf8@2.0.0 deduped
  └─┬ @aws-amplify/storage@6.0.13
    └─┬ @smithy/md5-js@2.0.7
      └── @smithy/util-utf8@2.0.0 deduped

npm ls @aws-crypto/sha256-js output

└─┬ aws-amplify@6.0.13
  ├─┬ @aws-amplify/analytics@7.0.13
  │ ├─┬ @aws-sdk/client-firehose@3.398.0
  │ │ ├─┬ @aws-crypto/sha256-browser@3.0.0
  │ │ │ └── @aws-crypto/sha256-js@3.0.0
  │ │ ├── @aws-crypto/sha256-js@3.0.0
  │ │ ├─┬ @aws-sdk/client-sts@3.398.0
  │ │ │ └── @aws-crypto/sha256-js@3.0.0
  │ │ └─┬ @aws-sdk/credential-provider-node@3.398.0
  │ │   └─┬ @aws-sdk/credential-provider-sso@3.398.0
  │ │     ├─┬ @aws-sdk/client-sso@3.398.0
  │ │     │ └── @aws-crypto/sha256-js@3.0.0
  │ │     └─┬ @aws-sdk/token-providers@3.398.0
  │ │       └── @aws-crypto/sha256-js@3.0.0
  │ ├─┬ @aws-sdk/client-kinesis@3.398.0
  │ │ └── @aws-crypto/sha256-js@3.0.0
  │ └─┬ @aws-sdk/client-personalize-events@3.398.0
  │   └── @aws-crypto/sha256-js@3.0.0
  └─┬ @aws-amplify/core@6.0.13
    └── @aws-crypto/sha256-js@5.2.0

grasdal commented 5 months ago

When troubleshooting further the cryptic error in our project seems related to a child component of a client component importing a components tagged with 'use server' that contain amplify server code such as createServerRunner.

Specifically we had a package that contained mixed client and server named exports in its index.tsx where the belowuseServerAuthentication was exported.

Old code for a 'useServerAuthentication.tsx' (react hook pattern on server side) 🤷

'use server';

import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import { getCurrentUser as ampGetCurrentUser, fetchAuthSession } from 'aws-amplify/auth/server';
import { cookies } from 'next/headers';
import { config } from '../utils/AmplifyConfiguration';

const useServerAuthentication = async () => {
    const { runWithAmplifyServerContext } = createServerRunner({ config });

    const getCurrentUser = async () => {
        try {
            const { username, userId, signInDetails } = await runWithAmplifyServerContext({
                nextServerContext: { cookies },
                operation: (contextSpec) => ampGetCurrentUser(contextSpec),
            });
            return { username, userId, signInDetails };
        } catch {
            // user is not logged in
            return undefined;
        }
    };
...

Anytime this ends up somewhere in the child tree of another 'use client'component we get the build error

> next build

   ▲ Next.js 14.1.0
   - Environments: .env

   Creating an optimized production build ...
Failed to compile.

./node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules
Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js

In order to resolve it the line const { runWithAmplifyServerContext } = createServerRunner({ config }); was simply moved into a server-utils.tsx file (following patterns from https://aws.amazon.com/blogs/mobile/amplify-javascript-v6/ )

import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';
import { cookies } from 'next/headers';
import { config } from './AmplifyConfiguration';

export const serverClient = generateServerClientUsingCookies({
    config,
    cookies,
});

export const { runWithAmplifyServerContext } = createServerRunner({ config });

So now useServerAuthentication.tsx becomes

'use server';

import { getCurrentUser as ampGetCurrentUser, fetchAuthSession } from 'aws-amplify/auth/server';
import { cookies } from 'next/headers';
import { runWithAmplifyServerContext } from '../utils/server-utils';

const useServerAuthentication = async () => {
    const getCurrentUser = async () => {
        try {
            const { username, userId, signInDetails } = await runWithAmplifyServerContext({
                nextServerContext: { cookies },
                operation: (contextSpec) => ampGetCurrentUser(contextSpec),
            });
            return { username, userId, signInDetails };
        } catch {
            // user is not logged in
            return undefined;
        }
    };
...

and now the build error is gone :)

HuiSF commented 5 months ago

Thanks for the follow-up. @grasdal So it sounds like when mix-matched client and service-specific code, the underlying bundler of Next.js cannot resolve the correct module to build the bundles, respectively, for client and server. That makes sense. Glad that you were able to locate the cause.

Is there anything else we can assist you here?

gavacq commented 5 months ago

I am in the same situation with mixed server and client components in a form action as @grasdal however I'm following the recommended practice of exporting the server context runner from utils (e.g. import { runWithAmplifyServerContext } from 'app/lib/utils') and still seeing the error.

HuiSF commented 5 months ago

Hey @gavacq everything under app is a part of the route following Next.js's spec. And as Next.js evaluates it as server side code by default, that may cause issues.

Can you try to move the utils out of the app directory see if it makes any difference?

gavacq commented 5 months ago

Hi @HuiSF , I moved utils out of the app directory and the error persists: ./lib/utils ├── amplifyServerUtils.ts ./app/user/ ├── actions.ts <-- import { runWithAmplifyServerContext } from 'lib/utils'

I understand your troubleshooting approach, but I want to highlight that NextJS does support safe colocation of project files in the app directory.

HuiSF commented 4 months ago

Hi @gavacq thanks for pointing that out.

I did some testing but I couldn't reproduce this error. Here's my set up for testing:

src
  ⎿app
    ⎿test-page
      ⎿actions
         ⎿serverAction.tsx (exports serverAction)
      ⎿page.tsx
         ⎿<ClientForm />
  ⎿components
    ⎿ClientForm.tsx ('use client', imports `serverAction`)
       ⎿<form action={serverAction}><input type='submit'/></form>
  ⎿amplifyUtils.ts
     ⎿runWithAmplifyServerContext

The serverAction.tsx contains

"use server";
import { cookies } from "next/headers";

import { runWithAmplifyServerContext } from "@/amplifyUtils";
import { fetchAuthSession } from "aws-amplify/auth/server";

export const submitForm = async (formData: FormData) => {
  const session = await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: (contextSpec) => fetchAuthSession(contextSpec),
  });
  console.log("🚀 ~ SubmitForm ~ session:", session);
};

npx next build completed without errors
serverAction works as expected

Could you try to create a minimum app that can reproduce this issue and share with us?

gavacq commented 4 months ago

I want to help with this but I've already transitioned off AmplifyUI and Cognito for unrelated reasons and I doubt I'll have time to reproduce this. I really appreciate your time debugging this, thank you.

cwomack commented 4 months ago

@gavacq we'll close this issue then for now, but let us know if you get time to reproduce this so we can dig deeper. Thanks!

bhaveshabuild commented 4 months ago

Getting the same issue, tried switching to require instead of import of @aws-amplify/adapter-nextjs library as suggested here:

https://www.sanity.media/p/65a2421194f7a8782500f775-how-i-fixed-aws-crypto-build-error

The build error is gone but now I am getting this error while calling the fetchAuthSession method

Attempted to get the Amplify Server Context that may have been destroyed.

Please suggest if there is any solution

HuiSF commented 4 months ago

Hi @bhaveshabuild Could you provide a minimal sample repo that can reproduce this error you saw so I can do some digging?

sasumasa commented 4 months ago

@HuiSF Hello, I am facing the same issue. Could you please share the specific code you mentioned in https://github.com/aws-amplify/amplify-js/issues/12856#issuecomment-1939594022 where you confirmed the error does not occur? I would like to verify it by myself.

For your reference, here is what have tried:

What I've done

bunx create-next-app
Create files according to your comment

bun run dev → It works ✅

➜  my-app git:(main) ✗ bun run dev
$ next dev
▲ Next.js 14.1.1
- Local:        http://localhost:3000

✓ Ready in 1451ms
○ Compiling / ...
✓ Compiled / in 1748ms (514 modules)
✓ Compiled in 110ms (244 modules)
✓ Compiled /favicon.ico in 100ms (521 modules)
○ Compiling /test-page ...
✓ Compiled /test-page in 649ms (930 modules)
🚀 ~ SubmitForm ~ session: {
tokens: {
accessToken: { toString: [Function: toString], payload: [Object] },
idToken: { toString: [Function: toString], payload: [Object] },
signInDetails: undefined
},
credentials: undefined,
identityId: undefined,
userSub: '4afecbb7-c279-4bc5-acbf-3adde2d87f3f'
}

bun run build → error occurs ❌


➜  my-app git:(main) ✗ bun run build
$ next build
▲ Next.js 14.1.1

Creating an optimized production build ...
Failed to compile.

../node_modules/@aws-crypto/sha256-js/build/module/index.js + 13 modules Cannot get final name for export 'fromUtf8' of ../node_modules/@aws-crypto/util/node_modules/@smithy/util-utf8/dist-es/index.js

Build failed because of webpack errors error: script "build" exited with code 1

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/adapter-nextjs": "^1.0.18",
    "next": "14.1.1",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.1"
  }
}

Code

`my-app/app/test-page/page.tsx`

import ClientForm from "../components/ClientForm";

export default function Page() {
  return <ClientForm />;
}

`my-app/app/components/ClientForm.tsx`

"use client";

import { submitForm } from "../test-page/actions/serverAction";

export default function ClientForm() {
  return (
    <div>
      <h1>Test Page</h1>
      <button
        onClick={(e) => {
          e.preventDefault();
          submitForm(new FormData());
        }}
      >
        Submit
      </button>
    </div>
  );
}

`my-app/app/test-page/actions/serverAction.tsx`

"use server";
import { cookies } from "next/headers";

import { fetchAuthSession } from "aws-amplify/auth/server";
import { runWithAmplifyServerContext } from "../../../amplifyUtils";

export const submitForm = async (formData: FormData) => {
  const session = await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: (contextSpec) => fetchAuthSession(contextSpec),
  });
  console.log("🚀 ~ SubmitForm ~ session:", session);
};

`my-app/amplifyUtils.ts`

import { createServerRunner } from "@aws-amplify/adapter-nextjs";

export const amplifyConfig = {
  // config info here...
};

export const { runWithAmplifyServerContext } = createServerRunner({
  config: amplifyConfig,
});

sasumasa commented 4 months ago

⚠️ This is just workaround, please check https://github.com/aws-amplify/amplify-js/issues/12856#issuecomment-2016599862 ⚠️

I've solved error in my codebase.

I just changed how to pass Server Actions to Client Component from importing directly to passing via props.

It's unclear how this relates to the advice previously posted by @grasdal, but regardless of where const { runWithAmplifyServerContext } = createServerRunner({ config }); is placed, it might be problematic import Server Actions that use runWithAmplifyServerContext (either directly or indirectly) within Client Components.

Premise (Build failed ❌)

app/lib/amplify-server.ts(Amplify Codes)

import { amplifyConfig } from "@/lib/amplify-config";
import { createServerRunner } from "@aws-amplify/adapter-nextjs";
import { fetchAuthSession } from "aws-amplify/auth/server";
import { cookies } from "next/headers";

export const { runWithAmplifyServerContext } = createServerRunner({
  config: amplifyConfig,
});

export const getCurrentSessionTokens = async () => {
  const { tokens } = await runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: (contextSpec) => fetchAuthSession(contextSpec),
  });

  if (!tokens) {
    throw new Error("No tokens found in the session.");
  }

  return tokens;
};

app/lib/actions.ts（Server Actions)

"use server";

import { getCurrentSessionTokens } from "@/lib/amplify-server";
// some other imports

export async function updateSomething(prevState: State, formData: FormData) {
  // ...

  const tokens = await getCurrentSessionTokens();

  const response = await fetch(`/api/endpoint`, {
    method: "PUT",
    headers: {
      Authorization: `Bearer ${tokens.idToken}`,
      "Content-Type": "application/json",
    },
    body: // ...
    cache: "no-store",
  });

  // ...
};

app/profile/edit/components/edit-form.tsx（Client Component）

"use client";

// === This might be problem ===
import { updateProfile } from "@/lib/actions";
import { useFormState } from "react-dom";

function Form({
  user,
}: {
  user: User;
}) {
  const [state, dispatch] = useFormState(updateProfile, {
    message: "",
    errors: {},
  });

  return (
    <form action={dispatch} className="space-y-5">
      {/* ... */}
    </form>
  );
}

export { Form };

app/profile/edit/page.tsx（Page）

import { getCurrentUserFromAPI } from "@/lib/data";
import { Form } from "@/profile/edit/components/edit-form";

export default async function Page() {
  const user = await getCurrentUserFromAPI();

  return (
    <main className="pt-10 text-center">
      <section className="space-y-10">
        <h1 className="text-3xl">Title</h1>
        <Form user={user} />
      </section>
    </main>
  );
}

How to solve (Build Success ✅)

app/lib/amplify-server.ts has no change.

I just pass Server Actions by props to Client Component.

app/profile/edit/page.tsx（Page）

+ import { updateProfile } from "@/lib/actions";
import { getCurrentUserFromAPI } from "@/lib/data";
import { Form } from "@/profile/edit/components/edit-form";

export default async function Page() {
  const user = await getCurrentUserFromAPI();

  return (
    <main className="pt-10 text-center">
      <section className="space-y-10">
        <h1 className="text-3xl">Title</h1>
-        <Form user={user} />
+        <Form user={user} updateProfile={updateProfile} />
      </section>
    </main>
  );
}

app/profile/edit/components/edit-form.tsx（Client Component）

"use client";

- import { updateProfile } from "@/lib/actions";
+ import { IUpdateProfile } from "@/lib/actions";
import { useFormState } from "react-dom";

function Form({
  user,
+ updateProfile,
}: {
  user: User;
+ updateProfile: IUpdateProfile;
}) {
  const [state, dispatch] = useFormState(updateProfile, {
    message: "",
    errors: {},
  });

  return (
    <form action={dispatch} className="space-y-5">
      {/* ... */}
    </form>
  );
}

export { Form };

harryhaibojiang commented 3 months ago

I've found a solution here worked for me: https://github.com/vercel/next.js/issues/59344#issuecomment-1846128759 adding the package into next.config.js : experimental: { serverComponentsExternalPackages: [ '@aws-amplify/adapter-nextjs', 'aws-amplify' ] }

sasumasa commented 3 months ago

@harryhaibojiang It worked for me as well! Thank you for sharing 🙏

HuiSF commented 3 months ago

Oh my, my apologies missing all the conversation here. Thanks @harryhaibojiang and @sasumasa for digging into this further.

Your workaround fully makes sense to me @sasumasa, that creates a clear boundary between the server and client bundles.

I will evaluate the workaround posted in the linked Next.js issue, and watch this experimental feature status, might be worth to add it into a troubleshooting section in the documentation.

sasumasa commented 3 months ago

@HuiSF Thanks for reply.

Your workaround fully makes sense to me @sasumasa, that creates a clear boundary between the server and client bundles.

Yes, it seem that creates clear boundary, but Server Actions are executed on the server regardless of whether they are passed from Server Component or imported in Client Component.

Wouldn't this mean that both are included in the Server Bundle? This point is what I don't understand yet.

HuiSF commented 2 weeks ago

Hi all, thanks for continually providing information about this issue.

I was able to reproduce this build error when I was attempting import a server action implementation into a client side component that uses useFormState hook following Next.js documentation: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-validation-and-error-handling

Looking at the dependencies tree, @aws-crypto/sha256-js is used by the underlying aws-sdk that's consumed by the analytics package. Even though it's not used, it presents on the module evaluation paths hence the error.

While @harryhaibojiang 's workaround is viable, I found that with listing entire aws-amplify as a serverComponentsExternalPackages, runWithAmplifyServerContext may fails at some occasions in the context of the Next.js page router, to avoid this, please list only the problematic dependencies.

E.g.

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverComponentsExternalPackages: ['@aws-crypto'],
    },
};

export default nextConfig;

I will add this information into Amplify public documentation.

aws-amplify / amplify-js