amplify-js: Getting weird error when using `runWithAmplifyServerContext`

Before opening, please confirm:

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

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Reactions: 2
  • Comments: 20 (8 by maintainers)

Most upvoted comments

@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

  1. bunx create-next-app
  2. Create files according to your comment
  3. 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'
}
  1. 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"
  }
}

Directory

➜  amplify-test tree my-app/app
my-app/app
├── components
│   └── ClientForm.tsx
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── test-page
    ├── actions
    │   └── serverAction.tsx
    └── page.tsx

and there is my-app/amplifyUtils.ts.

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,
});
+2
sasumasa on Mar 5, 2024

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' ] }

+1
harryhaibojiang on Mar 23, 2024

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
+1
grasdal on Jan 24, 2024
Read more comments on GitHub
← amplify-js: Getting "Uncaught TypeError: Cannot read property 'crypto' of undefined" after setting up webpack configuration in react app
amplify-js: Graphql create API not working for FB login users →