Just installed aws-amplify to a Next.js project and the project stops working when I install the configs

[ramon-san]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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

None

Environment information

# Put output below this line

  System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 169.53 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.4.1 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 10.8.1 - /opt/homebrew/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.120
    Safari: 17.6
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/adapter-nextjs: ^1.2.17 => 1.2.17 
    @aws-amplify/adapter-nextjs/api:  undefined ()
    @aws-amplify/adapter-nextjs/data:  undefined ()
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5 
    @edge-runtime/cookies:  5.0.0 
    @edge-runtime/ponyfill:  3.0.0 
    @edge-runtime/primitives:  5.0.0 
    @hapi/accept:  undefined ()
    @heroicons/react: ^2.0.18 => 2.1.5 
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/eslint-plugin-next: ^13.5.4 => 13.5.6 
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @types/node: ^22.5.1 => 22.5.4 
    @types/react: ^18.3.4 => 18.3.5 
    @typescript-eslint/eslint-plugin: ^8.3.0 => 8.4.0 
    @typescript-eslint/parser: ^8.3.0 => 8.4.0 (6.21.0)
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.2 
    acorn:  undefined ()
    amazon-cognito-identity-js: ^6.3.12 => 6.3.12 
    amazon-cognito-identity-js/internals:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.14 => 10.4.20 
    aws-amplify: ^6.6.0 => 6.6.0 
    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/data:  undefined ()
    aws-amplify/data/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 ()
    babel-packages:  undefined ()
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8.50.0 => 8.57.0 
    eslint-config-next: ^13.5.4 => 13.5.6 
    eslint-config-prettier: ^9.0.0 => 9.1.0 
    eslint-config-standard: ^17.1.0 => 17.1.0 
    eslint-plugin-import: ^2.28.1 => 2.30.0 
    eslint-plugin-n: ^16.1.0 => 16.6.2 
    eslint-plugin-prettier: ^5.2.1 => 5.2.1 
    eslint-plugin-react: ^7.33.2 => 7.35.2 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.2 
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    husky: ^8.0.3 => 8.0.3 
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    lint-staged: ^15.2.9 => 15.2.10 
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: ^14.2.8 => 14.2.8 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8.4.22 => 8.4.45 (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.0.3 => 3.3.3 
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 18.2.0 => 18.2.0 
    react-builtin:  undefined ()
    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-icons: ^4.11.0 => 4.12.0 
    react-is:  18.2.0 
    react-refresh:  0.12.0 
    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 ()
    regenerator-runtime:  0.13.4 
    sass-loader:  undefined ()
    scheduler-builtin:  undefined ()
    scheduler-experimental-builtin:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    server-only:  0.0.1 
    setimmediate:  undefined ()
    shell-quote:  undefined ()
    source-map:  undefined ()
    source-map08:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwindcss: ^3.3.1 => 3.4.10 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5.5.4 => 5.5.4 
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    aws-cdk: 2.154.0
    create-next-app: 13.3.0
    dbdocs: 0.7.3
    jest: 28.1.2
    nodemon: 2.0.19
    npm: 10.8.1
    pnpm: 8.3.1

Describe the bug

I have a Next.js project using the amazon-cognito-identity-js library. This has become a nightmare because there is essentially no documentation for the library (I can't find this anywhere and don't know how it maps to Amplify). Aside from this, the library now has this message:

We recommend using the Amplify JavaScript library's Auth features in place of the Amazon Cognito Identity SDK. The Amplify JavaScript library offers a modern, fully-typed, and performant experience for Auth use cases with tree-shaking built-in for bundle size reduction.

Given this I decided to install Amplify to my project with this command:

npm install aws-amplify @aws-amplify/adapter-nextjs

After installing the project I created the following config file:

import { Amplify } from 'aws-amplify';

export function configureAmplify() {
  Amplify.configure({
    Auth: {
      Cognito: {
        userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
        userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID
      }
    },
  });
}

This function is imported into my _app.tsx file:

import '@/styles/globals.css';
import '@/styles/fonts.css';
import { configureAmplify } from '@/utils/amplify-config';

configureAmplify();

// Rest of my code...
}

After adding the config setting I get this error:

 ⨯ file:///Users/myuser/project/node_modules/@aws-amplify/auth/dist/esm/providers/cognito/utils/srp/getHashFromData.mjs:1
import { Sha256 } from '@aws-crypto/sha256-js';
         ^^^^^^
SyntaxError: Named export 'Sha256' not found. The requested module '@aws-crypto/sha256-js' 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-crypto/sha256-js';
const { Sha256 } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26) {
  page: '/'
}
 ✓ Compiled /_error in 57ms (945 modules)
 ⨯ file:///Users/myuser/project/node_modules/@aws-amplify/auth/dist/esm/providers/cognito/utils/srp/getHashFromData.mjs:1
import { Sha256 } from '@aws-crypto/sha256-js';
         ^^^^^^
SyntaxError: Named export 'Sha256' not found. The requested module '@aws-crypto/sha256-js' 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-crypto/sha256-js';
const { Sha256 } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26) {
  page: '/'
}
 GET / 500 in 1328ms

When the app runs without this it works just fine.

Expected behavior

I was expecting the library to not cause problems.

Reproduction steps

Reproduction could probably be done with this template: https://github.com/ramon-san/next-template. The website I am currently building originally comes from this template.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

import { Amplify } from 'aws-amplify';

export function configureAmplify() {
  Amplify.configure({
    Auth: {
      Cognito: {
        userPoolId: process.env.NEXT_PUBLIC_COGNITO_USER_POOL_ID,
        userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID
      }
    },
  });
}

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

I am simply looking for a library that makes handling Cognito requests simple, if there is a more vanilla way of doing this without installing Amplify please let me know.

[ramon-san]

The above problem was solved by removing the amazon-cognito-identity-js library from the project.

Quick question: Is Amplify the best/easiest way to connect to Cognito? It feels like a lot of overhead for a project that doesn't use all the other Amplify features. Any recommendations on the best way to access Cognito without having to recreate all API requests?

[jimblanc]

@ramon-san Thank you for your report! Removing amazon-cognito-identity-js is indeed the solution for the original problem you reported. We do recommend that customers use the Amplify JS v6 Auth category for interacting with Cognito. Any unused functionality should be tree-shaken out of your application bundles when using the default Next.js configuration.

[cwomack]

@ramon-san just to add to what @jimblanc stated above, we've updated the README for the amazon-cognito-identity-js package as well to state that we recommend using Amplify v6 going forward. Feel free to follow our docs on how to implement the Auth category easily into your app here and let us know if there are any further questions!

[ramon-san]

Awesome, thanks guys (@jimblanc, @cwomack)! Already implemented Auth with Amplify and it works great, super good developer experience, congrats!