diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index bb42f929cb0..f57721534b5 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/cannot-find-module-amplify-env/index.mdx' } ] } 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 new file mode 100644 index 00000000000..3124afdacd0 --- /dev/null +++ b/src/pages/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/index.mdx @@ -0,0 +1,51 @@ +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 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/` 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" + } +} +```