Skip to content

adds Cannot find module $amplify/env/<function-name> troubleshooting doc #7681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/directory/directory.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/troubleshooting/stack-cdktoolkit-already-exists/index.mdx'
},
{
path: 'src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx'
}
]
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';

export const meta = {
title: 'Troubleshoot "Cannot find module $amplify/env/<function-name>"',
description: 'Addressing "Cannot find module $amplify/env/<function-name>" error message',
platforms: [
'angular',
'javascript',
'nextjs',
'react',
'react-native',
'vue'
]
};

export function getStaticPaths() {
return getCustomStaticPath(meta.platforms);
}

export function getStaticProps(context) {
return {
props: {
meta
}
};
}

When deploying a Amplify Gen 2 app, you may encounter the error message `Cannot find module $amplify/env/<function-name>` in your frontend build on Amplify Console. This error occurs when your framework `tsconfig.json` configuration picks up the `amplify` directory and tries to resolve it as a module. This module is a placeholder for environment variables that are injected at build time by Amplify. To resolve this error, you need to exclude the `amplify` directory.

To exclude the `amplify` directory in your `tsconfig.json`, add the following lines to the `exclude` section:

```ts title='tsconfig.json'
{
"exclude": ["amplify/**/*"]
}
```

Amplify will perform type-checking on sandbox and pipeline-deploy using the tsconfig local to the Amplify backend `amplify/tsconfig.json`. If you'd like to extend your base configuration you can add it to the localized tsconfig.

Alternatively, if you work within a monorepo you can move your backend to its own package and export the Schema and outputs for ease of sharing with your other apps. For example, in your backend package's `package.json`

```json title='package.json'
{
"name": "my-backend",
"private": true,
"exports": {
"./schema": "./amplify/data/resource.ts",
"./outputs": "./amplify_outputs.json"
}
}
```
Loading