CodeBuild中NextJS独立导出Buildspec报错：无法解析组件

本地使用Node.js 18版本构建Next.js项目（独立导出配置）完全正常，但通过CodePipeline的CodeBuild执行相同构建步骤时，出现模块找不到错误：

./src/components/Login.jsx
Module not found: Can't resolve './misc/CustomCheckbox'

已确认导入路径大小写无误，CustomCheckbox是基于MUI Checkbox封装的样式组件。

相关配置 #

Buildspec 文件

version: 0.2

phases:
    install:
        runtime-versions:
            nodejs: 18
    pre_build:
        commands:
            - echo Installing source NPM dependencies...
            - cd webConsole
            - npm install -g yarn
            - yarn install
    build:
        commands:
            - echo Build started on $(date)
            - yarn build
    post_build:
        commands:
            - aws s3 cp --recursive --acl public-read ./out s3://<S3_BUCKET>
            - aws s3 cp --acl public-read --cache-control="max-age=0, no-cache, no-store, must-revalidate" ./out/index.html s3://<S3_BUCKET
            - aws cloudfront create-invalidation --distribution-id <CLOUDFRONT DISTRO> --paths /*
artifacts:
    baseDirectory: build
    files:
        - "**/*"
cache:
    paths:
        - node_modules/**/*

Next.js 配置文件

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    output: "export",
    trailingSlash: true,
    optimizeFonts: false,
};

module.exports = nextConfig;

• 检查文件系统大小写敏感性差异
  本地环境（Windows/macOS）默认是大小写不敏感的，但CodeBuild使用Linux环境（大小写严格敏感）。即便你确认了代码里的路径大小写，仍需检查Git仓库中实际的文件名是否与导入路径完全一致——Git默认可能不区分大小写，导致本地与远程仓库的文件名大小写不一致，进而在Linux环境下触发路径解析错误。
  验证方式：本地执行git ls-files src/components/misc查看仓库中实际的文件名，若存在大小写差异，修正文件名后重新提交到仓库。

• 清理CodeBuild缓存
  Buildspec中配置了node_modules缓存，旧缓存可能残留路径相关的异常数据。临时注释缓存配置后重新构建，验证是否解决问题：

  # cache:
  #     paths:
  #         - node_modules/**/*
  

• 确认CodeBuild工作目录与文件存在性
  在Build阶段添加目录检查命令，确认当前工作目录正确且目标文件存在：

  build:
      commands:
          - echo Build started on $(date)
          - pwd # 输出当前工作目录，确认在webConsole下
          - ls -la src/components/misc # 查看该目录下的文件，确认CustomCheckbox存在
          - yarn build
  

• 调整Webpack路径解析配置
  在Next.js配置中添加Webpack别名，强制指定模块的解析路径：

  const path = require('path');
  
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
      output: "export",
      trailingSlash: true,
      optimizeFonts: false,
      webpack: (config) => {
          config.resolve.alias = {
              ...config.resolve.alias,
              './misc/CustomCheckbox': path.resolve(__dirname, 'src/components/misc/CustomCheckbox'),
          };
          return config;
      },
  };
  
  module.exports = nextConfig;
  

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