NextJS Standalone Export Buildspec Error "Module not found: Can't resolve component" in CodeBuild

Question

I have the following buildspec running via CodePipeline/CodeBuild

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/**/*

I am running the same steps locally and it is working fine with the same version of node. I'm wondering if anyone has seen the same thing in the CodeBuild stage of a pipeline. The install works fine, but I am getting the following errors in the build stage

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

https://nextjs.org/docs/messages/module-not-found

I have checked my imports are using the correct casing, and the CustomCheckbox is just a styled MUI Checkbox.,

The nextjs build is a standalone build with the following config

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

module.exports = nextConfig;

Answer 1

solution

1. clone the repository again,
2. compare the cases of folder/filenames in both the repositories

for files:

• use git mv filename to Filename

for folders:

• rename folder entirely to another name
• git commit the changes
• rename the folder to the name u want
• git commit the changes

description

i had the same. i could run the build locally without trouble, but in github action i had the "module not found error" for my own components of the project. i compared with 2 other projects on same tech-stack and they were building fine.

i found out it has nothing to do with the actual file import in your project, neither with the nextjs.config

It turns out git does not track the change of a folder/file if just it's case changed (depends on case-sensitivity of your/remote file system) after it was already checked in. In my case i renamed Components folder to components folder and it was not tracked.

other answers

Github Actions for NodeJS - 'Error: Cannot find module' for local file

GitHub CI/Actions - Cannot find module. Make sure this package is installed

Case sensitivity in Git