React 18.2.0部署AWS Amplify时模块解析失败问题排查

针对你遇到的Module not found: Error: Can't resolve 'src/layout/MainLayout'错误，结合代码与配置，可能的原因及解决方法如下：

1. TypeScript路径别名未被构建工具识别 #

你的tsconfig.json中配置了paths别名"src/*": ["./src/*"]，但该配置仅对TypeScript编译器生效，AWS Amplify使用的Webpack不会自动读取此规则，导致无法将src/layout/MainLayout解析为实际文件路径。

解决方法：

• 在项目根目录添加/修改webpack.config.js，手动配置Webpack别名：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      'src': path.resolve(__dirname, 'src')
    }
  }
};

• 或使用tsconfig-paths-webpack-plugin让Webpack读取tsconfig的paths配置：
  1. 安装依赖：npm install tsconfig-paths-webpack-plugin --save-dev
  2. 在webpack配置中引入插件：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

2. 组件默认导出语法错误 #

你的MainLayout/index.tsx导出写法存在语法问题：

export default MainLayout = () => { 
//code goes here
}

缺少变量声明关键字（const/let），属于无效TypeScript语法，会导致编译失败，模块无法被正确导出。

解决方法：
修改为正确的默认导出写法，例如：

const MainLayout = () => { 
//code goes here
};
export default MainLayout;

或更简洁的函数式写法：

export default function MainLayout() { 
//code goes here
}

3. 文件大小写不匹配 #

AWS Amplify构建环境基于Linux，系统对文件名大小写敏感。如果实际文件/目录名与导入路径大小写不一致（比如mainLayout而非MainLayout），会导致路径解析失败。

解决方法：
检查本地文件系统的目录和文件名，确保与import MainLayout from 'src/layout/MainLayout';中的路径大小写完全一致。

4. TypeScript未包含TSX文件 #

你的tsconfig.json的include配置仅覆盖.ts文件：

"include": [
  "src",
  "src/**/*.ts"
]

但布局组件是.tsx后缀，TypeScript编译器会忽略这些文件，导致编译后不存在对应模块。

解决方法：
修改include配置，添加.tsx文件匹配：

"include": [
  "src",
  "src/**/*.ts",
  "src/**/*.tsx"
]

5. 模块解析策略冲突 #

你的tsconfig.json设置了module: "ESNext"和moduleResolution: "NodeNext"，该模式对导入路径要求更严格，可能与Webpack的默认解析逻辑冲突，导致目录下的index.tsx无法被自动识别。

解决方法：
临时将moduleResolution改为Node，重新构建验证：

"moduleResolution": "Node"

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