AWS Amplify部署Next.js+TS项目时提示找不到模块

本地执行npm run build完全正常，但部署到AWS Amplify时编译失败，提示找不到components/Tag模块。

Amplify编译错误日志 #

[WARNING]: Failed to compile.
./pages/index.tsx:3:17
                                    Type error: Cannot find module 'components/Tag' or its corresponding type declarations.
                                    [0m [90m 1 | [39m[36mimport[39m { [33mEntry[39m[33m,[39m getEntries } [36mfrom[39m [32m"lib/data"[39m[33m;[39m[0m
                                    [0m [90m 2 | [39m[36mimport[39m styles [36mfrom[39m [32m"./_index.module.css"[39m[33m;[39m[0m
                                    [0m[31m[1m>[22m[39m[90m 3 | [39m[36mimport[39m [33mTag[39m [36mfrom[39m [32m"components/Tag"[39m[33m;[39m[0m
                                    [0m [90m   | [39m                [31m[1m^[22m[39m[0m
                                    [0m [90m 4 | [39m[36mimport[39m [33mRef[39m [36mfrom[39m [32m"components/Ref"[39m[33m;[39m[0m
                                    [0m [90m 5 | [39m[0m
                                    [0m [90m 6 | [39m[36minterface[39m [33mHomeProps[39m {[0m

相关代码细节 #

• 页面组件导入方式：

import Tag from "components/Tag";

• Tag组件代码（位于components/Tag/index.tsx）：

const Tag = ({ text, link }: TagProps) => <a className={styles.tag} href={ link }>{ text }</a>

export default Tag;

该文件夹还包含Tag.module.css文件，尝试导入完整路径components/Tag/index.tsx同样失败。

项目配置文件 #

tsconfig.json #

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

package.json #

{
  "name": "",
  "description": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "watch": "next-remote-watch ./posts",
    "clean": "rm -rf .next out"
  },
  "dependencies": {
    "gray-matter": "^4.0.3",
    "markdown-it": "^12.3.2",
    "next": "^13.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remark": "^14.0.2",
    "remark-html": "^15.0.2",
    "remark-prism": "^1.3.6"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.31",
    "next-remote-watch": "^2.0.0",
    "typescript": "^5.0.3"
  }
}

可能的原因及解决方案 #

1. 大小写敏感问题 #

本地开发环境（如MacOS、Windows）默认文件系统大小写不敏感，但Amplify使用的Linux环境是大小写敏感的。检查你的文件/文件夹命名是否和导入路径完全一致：

• 确认components文件夹是否为小写，Tag文件夹是否首字母大写，和导入的components/Tag完全匹配
• 避免出现Components/Tag或components/tag这类大小写不一致的情况

2. TypeScript路径解析配置缺失 #

虽然已经设置了baseUrl: "./"，但可以显式添加paths配置来强化模块解析：
在tsconfig.json的compilerOptions中添加：

"paths": {
  "components/*": ["components/*"]
}

这样TypeScript能明确将components/xxx映射到项目根目录下的components/xxx路径。

3. Amplify构建缓存干扰 #

Amplify可能缓存了旧的构建结果或依赖，导致新代码未被正确识别。解决方法：

• 进入AWS Amplify控制台，找到对应项目的构建设置
• 点击"Redeploy this version"，并勾选"Clear build cache"选项，重新构建

4. 文件未提交到Git仓库 #

Amplify是从Git仓库拉取代码进行构建的，确保components/Tag下的所有文件（index.tsx、Tag.module.css等）都已经提交并推送到远程仓库，未被.gitignore规则排除。

5. Next.js模块解析差异 #

Next.js 13的Pages Router和App Router在模块解析上有细微差异，虽然你使用的是pages目录，但可以尝试：

• 将导入路径改为相对路径，比如import Tag from "../components/Tag"，测试是否能正常构建
• 确认next.config.js中没有配置特殊的模块解析规则干扰路径解析

内容的提问来源于stack exchange，提问作者user12822512