From 06583d8d0c651f763244444f4c90bca1b7820361 Mon Sep 17 00:00:00 2001 From: ykethan Date: Wed, 29 May 2024 16:22:28 -0400 Subject: [PATCH 1/5] adds cannot find module troubleshooting doc --- src/directory/directory.mjs | 3 ++ .../build-env-module/index.mdx | 53 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index bb42f929cb0..be6c9e3dc9c 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -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/build-env-module/index.mdx' } ] } diff --git a/src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx b/src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx new file mode 100644 index 00000000000..59f8c687a9b --- /dev/null +++ b/src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx @@ -0,0 +1,53 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Troubleshoot "Cannot find module $amplify/env/"', + description: 'Addressing "Cannot find module $amplify/env/" error message', + platforms: [ + 'angular', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'vue' + ] +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + +When deploying a Amplify Gen 2 app, you may encounter the error message `Cannot find module $amplify/env/` 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" + } +} +``` From 1d7e7b1602ddc72a243ec3f7fa141db5f809c640 Mon Sep 17 00:00:00 2001 From: ykethan Date: Wed, 29 May 2024 16:34:11 -0400 Subject: [PATCH 2/5] update name --- src/directory/directory.mjs | 2 +- .../index.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/pages/[platform]/build-a-backend/troubleshooting/{build-env-module => cannot-find-module-amplify-env}/index.mdx (96%) diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index be6c9e3dc9c..f57721534b5 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -668,7 +668,7 @@ 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/build-env-module/index.mdx' + path: 'src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx' } ] } diff --git a/src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx similarity index 96% rename from src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx rename to src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx index 59f8c687a9b..fd9d6687d67 100644 --- a/src/pages/[platform]/build-a-backend/troubleshooting/build-env-module/index.mdx +++ b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx @@ -37,7 +37,7 @@ To exclude the `amplify` directory in your `tsconfig.json`, add the following li } ``` -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. +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` From 3bcedc8db581fe84f6e613c38d3fb6bce56da535 Mon Sep 17 00:00:00 2001 From: ykethan Date: Wed, 29 May 2024 17:58:12 -0400 Subject: [PATCH 3/5] nit update function --- .../cannot-find-module-amplify-env/index.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx index fd9d6687d67..df33f532265 100644 --- a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx +++ b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx @@ -13,14 +13,12 @@ export const meta = { ] }; -export const getStaticPaths = async () => { +export function getStaticPaths() { return getCustomStaticPath(meta.platforms); -}; - +} export function getStaticProps(context) { return { props: { - platform: context.params.platform, meta } }; From 601dd514eb13b5e81228291b210bf6da33953269 Mon Sep 17 00:00:00 2001 From: ykethan Date: Wed, 29 May 2024 17:58:52 -0400 Subject: [PATCH 4/5] nit update function --- .../troubleshooting/cannot-find-module-amplify-env/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx index df33f532265..3563b4bff69 100644 --- a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx +++ b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx @@ -16,6 +16,7 @@ export const meta = { export function getStaticPaths() { return getCustomStaticPath(meta.platforms); } + export function getStaticProps(context) { return { props: { From 1c4b08359874e356b68d341faaa532a758b8504d Mon Sep 17 00:00:00 2001 From: josef Date: Wed, 29 May 2024 15:17:13 -0700 Subject: [PATCH 5/5] Update src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx --- .../troubleshooting/cannot-find-module-amplify-env/index.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx index 3563b4bff69..3124afdacd0 100644 --- a/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx +++ b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx @@ -30,7 +30,6 @@ When deploying a Amplify Gen 2 app, you may encounter the error message `Cannot To exclude the `amplify` directory in your `tsconfig.json`, add the following lines to the `exclude` section: ```ts title='tsconfig.json' - { "exclude": ["amplify/**/*"] }