Type error: Cannot find module '$amplify/env/say-hello' or its corresponding type declarations.

[nxia416]

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v20.12.2

Amplify CLI Version

amplify gen2, 12.11.1

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No

Describe the bug

I am following the template tutorial of Gen2 for nextjs page router . When trying to add the environment variables for a new function, the CDK deployment failed when running "npm run build":

the error message is Type error: Cannot find module '$amplify/env/say-hello' or its corresponding type declarations.

I do have my amplify/tsconfig.json file configured (which is generated by the npx amplify create command):

@/amplify/tsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "paths": {
      "$amplify/*": [
        "../.amplify/generated/*"
      ]
    }
  }
}

@/tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

here is the file structure:

Expected behavior

expect the deploy to success.

Are there any special configuration for typescript? It looks like a compiling problem.

Reproduction steps

1. use amplify next-pages template
2. add a new function called say-hello
3. add a environment called NAME:

import { defineFunction } from "@aws-amplify/backend";

export const sayHello = defineFunction({
  // optionally specify a name for the Function (defaults to directory name)
  name: "say-hello",
  // optionally specify a path to your handler (defaults to "./handler.ts")
  entry: "./handler.ts",
  environment: {
    NAME: "World",
  },
});

4. git push to trigger the deployment

Project Identifier

No response

Log output

# Put your logs below this line

Additional information

No response

Before submitting, please confirm:

• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our backend repository. The issue appears to be similar to https://github.com/aws-amplify/amplify-backend/issues/1374, refer to the comment https://github.com/aws-amplify/amplify-backend/issues/1374#issuecomment-2110764324 providing information mitigating this issue.

[ykethan]

Closing the issue as this is currently being tracked on https://github.com/aws-amplify/amplify-backend/issues/1374