search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

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

Closed ramon-san closed 1 month ago

ramon-san commented 1 month ago

Before opening, please confirm:

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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