amplify-js: Module not found: Can't resolve 'aws-crt' when using API in nextjs@13.2

For those who’s using Next.js, adding the following to your next.config.js will get rid of the warning:

/** @type {import('next').NextConfig} */
const config = {
  // …
  webpack: (config, { webpack, isServer, nextRuntime }) => {
    // Avoid AWS SDK Node.js require issue
    if (isServer && nextRuntime === "nodejs")
      config.plugins.push(
        new webpack.IgnorePlugin({ resourceRegExp: /^aws-crt$/ })
      );
    return config;
  },
  // …
};

module.exports = config;

The issue is caused by Next.js/Webpack warning on require being called with an expression, which is valid in Node.js environment.

Hello Josh, we apologize for the delay in resolving this issue. Based on our investigations, making the necessary enhancement requires breaking changes. We are currently working on introducing an improved experience for App Router as part of our next major version.

Hello everyone, we have validated this and this error is coming from the AWS SDK clients we are using. Although this does not affect the functionality of your app, the warning is confusing. We will address this warning in a future release.

I have same error with nextjs app dir (13.4.0-stable) + aws-amplify (5.2.0) I tried the webpack config solution but still the same…

@Tomekmularczyk @lukedanielson I must’ve missed that warning but I do see it. I only seem to get these warnings when I use Next 13’s experimental app directory for routing. However, these warnings don’t seem to keep my pages from rendering.

If I refactor to use the pages directory the warnings go away.

Since this is consistently reproducible, I’ve marked this as a bug for the team to investigate further in case something needs to be addressed on our end before the library can be fully compatible with Next 13’s experimental features once they are stable.

Hi @Tomekmularczyk I ran into this issue recently as well. I was able to work around it by installing aws-crt and encoding as dependencies. Does this work for you as a temporary workaround?

Hi, I just tried installing both and I have less warnings but there are some still:

warn  - ./node_modules/aws-crt/dist/native/binding.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/aws-crt/dist/native/binding.js
./node_modules/aws-crt/dist/native/auth.js
./node_modules/aws-crt/dist/index.js
./node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
./node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/runtimeConfig.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/LexRuntimeServiceClient.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/index.js
./node_modules/@aws-amplify/interactions/lib/Providers/AWSLexProvider.js
./node_modules/@aws-amplify/interactions/lib/index.js
./node_modules/aws-amplify/lib/index.js
./src/graphql/amplifyConfigure.ts
warn  - ./node_modules/aws-crt/dist/native/binding.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/aws-crt/dist/native/binding.js
./node_modules/aws-crt/dist/native/auth.js
./node_modules/aws-crt/dist/index.js
./node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
./node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/runtimeConfig.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/LexRuntimeServiceClient.js
./node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/index.js
./node_modules/@aws-amplify/interactions/lib/Providers/AWSLexProvider.js
./node_modules/@aws-amplify/interactions/lib/index.js
./node_modules/aws-amplify/lib/index.js
./src/graphql/amplifyConfigure.ts
wait  - compiling /src/middleware (client and server)...
warn  - ./node_modules/aws-crt/dist/native/binding.js

Any updates on this?

These steps resolved the warning for me:

Note. Stop the dev server it’s already running Note 2. The steps below assumes you are using yarn but they should also work for npm

Using: Next 13.4+ Apple M1 Pro Mac

1. Delete .next folder
2. Run yarn add aws-crt encoding -D
3. Run yarn dev

All warning dissapeared in my case.

Yeah, this one is hurting lots of folks that have adopted the new router. It’s been months and the various webpack/dependency solutions aren’t working. We’ve desperately had to move to faking our AppSync responses (which Amplify would otherwise handle for us). Our Next app (13.4.1) is taking 10+s to load and I couldn’t get any of the above solutions to silence the errors.

Any update on this? This issue has not been resolved for months.

This is causing Nextjs apps with the app directory to have a 5-7+ seconds initial delay when rendering the page… this causes some horrible user experience.

How can there be official docs on how to integrate Amplify with new Nextjs app directory while issues like this exists.

https://github.com/aws-amplify/amplify-js/issues/11030#issuecomment-1598207365 works for me. Thanks @phuctm97 ! Currently i have similar issue but using S3-client (the package shown on the error is “@aws-sdk/signature-v4-crt” on this case). So i added to the regexp:

/** @type {import('next').NextConfig} */
const config = {
  // …
  webpack: (config, { webpack, isServer, nextRuntime }) => {
    // Avoid AWS SDK Node.js require issue
    if (isServer && nextRuntime === "nodejs")
      config.plugins.push(
        new webpack.IgnorePlugin({ resourceRegExp: /^(aws-crt|@aws-sdk\/signature-v4-crt)$/ })
      );
    return config;
  },
  // …
};

module.exports = config;

The solution from https://github.com/aws-amplify/amplify-js/issues/11030#issuecomment-1598207365 works perfectly thanks @phuctm97 but just adding my new one below because it doesn’t really the webpack anymore since next 13.14.9 I’m on 13.14.12 currently.

webpack: (config, { isServer, nextRuntime, webpack }) => {
        // Avoid AWS SDK Node.js require issue
        if (isServer && nextRuntime === 'nodejs')
            config.plugins.push(
                new webpack.IgnorePlugin({ resourceRegExp: /^aws-crt$/ })
            );
        return config;
    },

It is functioning as expected, but the warning is impacting the fast refresh in Next.js 13 app router. Is there any way to resolve this issue?

Just a quick update here, looks like the issue has to be fixed on our end for Turbopack projects in general.

Here’s the issue to track that we’ve opened with the aws sdk team: aws/aws-sdk-js-v3#4126

Hi, I’m not using Turbopack, I’m running the project with next dev so it should be using webpack. The only tweak I did to standard nextjs configuration is that I use the new app directory. When do you think it might be fixed?

The solution from #11030 (comment) works perfectly thanks @phuctm97 but just adding my new one below because it doesn’t really the webpack anymore since next 13.14.9 I’m on 13.14.12 currently.

webpack: (config, { isServer, nextRuntime, webpack }) => {
        // Avoid AWS SDK Node.js require issue
        if (isServer && nextRuntime === 'nodejs')
            config.plugins.push(
                new webpack.IgnorePlugin({ resourceRegExp: /^aws-crt$/ })
            );
        return config;
    },

I used webpack: (config, { webpack, isServer, nextRuntime }) => { and cold start for page went to 7s. Above solution works better IMO

Hi @weisisheng - the warnings should not be affecting the functionality of your app, we had been able to validate that in our testing. We do not have a timeline yet for addressing the warnings, but we have a path forward now which includes cleaning up our underlying dependencies to remove this warning from showing up. Did you try following our guidance here on using the app directory? https://docs.amplify.aws/lib/ssr/q/platform/js/#use-amplify-with-nextjs-app-router-app-directory

Here is a very basic repo reproducing the problem: https://github.com/Tomekmularczyk/amplify-next and here is the recording:

https://github.com/aws-amplify/amplify-js/assets/12544704/6807fc40-4f9a-4515-83c0-3d8faf2a07c7

1. Deploy the above site to Vercel or AWS
2. Go to link {URL}/en
3. Notice it take initially ~6s to load the page

Note that:

• I’m using the app directory
• I’m configuring Amplify for server components and client components
• to reproduce the issue page has to be dynamic that’s why it is under [lang]
• if I remove import "./amplifyConfigureClient"; import "./amplifyConfigureServer"; problem does not happen
• the cold start happens on the first page load after site has been deployed on Vercel or after some idle time ~1h

It doesn’t matter if it is AWS or Vercel hosting - delay happens in both.

I was investigating why our app is taking 8 seconds to load a page on production environment deployed to Vercel. After lot of investigation it turned out that if remove amplify configs as explained here the page loads in 3 seconds. It happens right after deployment on initial load or after an hour of iddle time.

My hunch is that it is related to the issue described here. In such case this REALLY hurts not only local dev performance but production as well 😕

Just a quick update here, looks like the issue has to be fixed on our end for Turbopack projects in general.

Here’s the issue to track that we’ve opened with the aws sdk team: https://github.com/aws/aws-sdk-js-v3/issues/4126

Closing this issue as we have not had a response on previous comments tied to webpack. If anyone is still experiencing this, please feel free to reply back and provide any information previously requested and we’d be happy to re-open the issue.

Thank you!

this is only removing the warning, but the loading issue is still there

I’m having the same issue as @bear-bibeault.

"next": "^13.4.9", "typescript": "5.1.3",

Error: Cannot find module 'webpack'
Require stack:
- F:\projects\x\next.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at F:\projects\x\node_modules\next\dist\server\require-hook.js:185:36
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (F:\projects\x\next.config.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'F:\\projects\\x\\next.config.js' ]
}

next.config.js

const webpack = require("webpack");

/** @type {import('next').NextConfig} */
const config = {
  // …
  webpack: (config, { isServer, nextRuntime }) => {
    // Avoid AWS SDK Node.js require issue
    if (isServer && nextRuntime === "nodejs")
      config.plugins.push(
        new webpack.IgnorePlugin({ resourceRegExp: /^aws-crt$/ })
      );
    return config;
  },
  experimental: {
    serverActions: true,
  },
  // …
};

module.exports = config;

attempted to convert to .mjs and added “type”: “module” to package.json did not solve the issue.

Same issues with fresh aws-amplify install on next 13. no turbopack

Here’s a potential solution: Make sure that aws-amplify (or any other package that’s the source of the problem) is included in the package.json of your Next.js project (not in a dependent package). I had a similar problem with mongodb and I had mongodb added in separate package in my monorepo. I copied mongodb dependency to the Next.js project and the issue was gone.

I’m getting this same issue, using APP directory, no Turbopack, Next version: 13.2.4

Hello Josh, we apologize for the delay in resolving this issue. Based on our investigations, making the necessary enhancement requires breaking changes. We are currently working on introducing an improved experience for App Router as part of our next major version.

Excellent! Thank you for the quick response!

I was using SQS not amplify but still had the same error and I was able to solve it in nextjs 13.4 by adding “use server” on top of the file where the error came from. Maybe helps someone

Is there any estimated timeline on this issue? I am finding the warning makes next.js 13.4.x completely unusable on Amplify. The browser keeps trying to render, hangs and nothing results. I am hesitant to use the pages router choice as I found other issues with it. Thanks in advance.

^above is not true for me. I am also on NextJS 13.4.3/ Amplify 5.2.2 and I see the warning (using app directory FWIW) .

Hi guys ! I just deployed Nextj @13.4.3 version to aws amplify by connecting it with GitHub, it worked fine as expected. You can give a try to latest version

Here’s a potential solution: Make sure that aws-amplify (or any other package that’s the source of the problem) is included in the package.json of your Next.js project (not in a dependent package). I had a similar problem with mongodb and I had mongodb added in separate package in my monorepo. I copied mongodb dependency to the Next.js project and the issue was gone.

I had the Critical dependency: the request of a dependency is an expression warning and this answer helped me to find a fix.

I added aws-crt as a main dependency and in my next.js webpack config :

  resolve: {
    ...
    alias: {
      ...
      'aws-crt': path.resolve(__dirname, 'node_modules/aws-crt'),
    },
  }

This removes the warning, I couldn’t really explain why.

Hi @Tomekmularczyk I ran into this issue recently as well. I was able to work around it by installing aws-crt and encoding as dependencies. Does this work for you as a temporary workaround?

@chrisbonifacio Next 14 + Amplify v6 also works for me with turbopack 💯

@Tomekmularczyk I don’t think this is an issue anymore in Next 14 + Amplify v6, at least in my experience recently. Have you been able to upgrade and confirm that’s the case for you as well?

Hi, for the sake of solution sharing, I just threw away the aws-amplify library and did my own “implementation” of the network calls to the Cognito Service with vanilla Javascript. I made it work previously, but the cold loading issue wasn’t acceptable so I reverse engineered the network calls of the library 😃 Everything is done through the same cognito endpoint, but you need to configure the custom http header ‘X-Amz-Target’. I persist the session through the cookies and an AuthProvider component.

Below an example of my auth/index.ts file, hope this helps.

import { deleteAllNamedCookie, setCookie } from '../cookies';
import {
	ConfirmForgotPasswordPayload,
	ConfirmSignUpPayload,
	ForgotPasswordPayload,
	GetUserPayload,
	RefreshTokensPayload,
	SignInPayload,
	SignOutPayload,
	SignUpPayload,
	StoreTokensInCookiesPayload,
} from './auth.d';

const _COGNITO_BASE_URL = 'https://cognito-idp.eu-central-1.amazonaws.com';

export const awsSignIn = async (payload: SignInPayload) => {
	try {
		const body = {
			AuthFlow: 'USER_PASSWORD_AUTH',
			ClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
			ClientMetadata: {},
			AuthParameters: {
				...payload,
			},
		};
		const response = await fetch(_COGNITO_BASE_URL, {
			method: 'POST',
			body: JSON.stringify(body),
			headers: {
				'X-Amz-Target':
					'AWSCognitoIdentityProviderService.InitiateAuth',
				'Content-Type': 'application/x-amz-json-1.1',
				'Cache-Control': 'no-store',
			},
		});
		if (response === undefined || !response) {
			throw new Error();
		}
		return response;
	} catch (error: any) {
		throw error;
	}
};

And this is for example the submitLoginHandler in the login form page:

const submitLoginHandler = async (e: React.MouseEvent<HTMLFormElement>) => {
		e.preventDefault();
		const loginPayload = {
			USERNAME: email,
			PASSWORD: password,
		};

		try {
			const signInResponse = await awsSignIn(loginPayload);
			const signInData: SigninResponse = await signInResponse.json();
			if (signInResponse.status === 200) {
				try {
					const getUserResponse = await awsGetUser({
						AccessToken:
							signInData.AuthenticationResult.AccessToken,
					});
					const getUserData: GetUserResponse =
						await getUserResponse.json();
					//set auth cookies
					awsSaveAuthCookies({
						signInData,
						getUserData,
						isRefresh: false,
					});
					//set user context
					setUserData(signInData, getUserData);
					setLoggedIn(true);
				} catch (error) {
					console.log(error);
				}
			}
		} catch (error) {
			console.log(error);
		}
	};

Attached my files:

• auth/index.ts
• auth/auth.d.ts
• page.tsx -> login form page
• AuthProvide.tsx

github-aws-cognito.zip

Issue: Can confirm my solution will cause ‘webpack not found’ because of this related issue: https://github.com/vercel/next.js/issues/52366

Update: The above issue was fixed in latest Next.js version.

Same issue 😦

Im using Next.js and the "@aws-sdk/client-cloudfront": "^3.321.1", "@aws-sdk/client-s3": "^3.306.0", library’s and get a ton of warning messages. Everything does work so far so thats great at least. Is there anyway to try and suppress the messages until a fix is out?

I have same error with nextjs app dir (13.4.1) + @aws-sdk/client-dynamodb

@chrisbonifacio Yes, I am experiencing the same thing: only warnings when using the experimental app directory and it not preventing rendering. Sounds good, will check back in once the experimental features are stable.