문제 상황

파일명을 컨벤션에 맞춰 리팩토링 하고나서 개발 모드, 배포 모드로 각각 무사히 실행되는 것을 확인하고 배포를 진행했다. 하지만 결과는 Deploy Failed.

d4:36:13 PM: failed Building production JavaScript and CSS bundles - 27.823s
4:36:13 PM: error Generating JavaScript bundles failed
4:36:13 PM: Can't resolve '../Layout' in '/opt/build/repo/src/components/templates'
4:36:13 PM: If you're trying to use a package make sure that '../Layout' is installed. If you're trying to use a local file make sure that the path is correct.
4:36:13 PM: error Generating JavaScript bundles failed
4:36:13 PM: Can't resolve '../components/Layout' in '/opt/build/repo/src/pages'
4:36:13 PM: If you're trying to use a package make sure that '../components/Layout' is installed. If you're trying to use a local file make sure that the path is correct.
4:36:13 PM: error Generating JavaScript bundles failed
4:36:13 PM: Can't resolve '../components/Layout' in '/opt/build/repo/src/pages'
4:36:13 PM: If you're trying to use a package make sure that '../components/Layout' is installed. If you're trying to use a local file make sure that the path is correct.
4:36:13 PM: error Generating JavaScript bundles failed
4:36:13 PM: Can't resolve '../components/Layout' in '/opt/build/repo/src/pages'
4:36:13 PM: If you're trying to use a package make sure that '../components/Layout' is installed. If you're trying to use a local file make sure that the path is correct.
4:36:13 PM: error Generating JavaScript bundles failed
4:36:13 PM: Can't resolve '../components/Layout' in '/opt/build/repo/src/pages'
4:36:13 PM: If you're trying to use a package make sure that '../components/Layout' is installed. If you're trying to use a local file make sure that the path is correct.
4:36:13 PM: ​
4:36:13 PM: ────────────────────────────────────────────────────────────────
4:36:13 PM:   "build.command" failed                                        
4:36:13 PM: ────────────────────────────────────────────────────────────────
4:36:13 PM: ​
4:36:13 PM:   Error message
4:36:13 PM:   Command failed with exit code 1: gatsby build
4:36:13 PM: ​
4:36:13 PM:   Error location
4:36:13 PM:   In Build command from Netlify app:
4:36:13 PM:   gatsby build
4:36:13 PM: ​
4:36:13 PM:   Resolved config
4:36:13 PM:   build:
4:36:13 PM:     command: gatsby build
4:36:13 PM:     commandOrigin: ui
4:36:13 PM:     environment:
4:36:13 PM:       - INCOMING_HOOK_BODY
4:36:13 PM:       - INCOMING_HOOK_TITLE
4:36:13 PM:       - INCOMING_HOOK_URL
4:36:13 PM:     publish: /opt/build/repo/public
4:36:13 PM:     publishOrigin: ui
4:36:13 PM:   plugins:
4:36:13 PM:     - inputs: {}
4:36:13 PM:       origin: ui
4:36:13 PM:       package: '@netlify/plugin-gatsby'
4:36:13 PM:   redirects:
4:36:14 PM:     - from: /api/*
      status: 200
      to: /.netlify/functions/gatsby
Caching artifacts

위와 같이 can't resolve 오류가 발생하면 이름이나 경로를 잘못 적은 것이 대부분이다. 그래서 Layout 컴포넌트를 사용하는 곳을 모두 살펴보았지만 틀린 곳은 없었다.

깃헙에 업로드 된 이전 빌드 파일 캐시 때문에 오류가 나는걸까? 하는 생각에 .gitignore를 확인하니 ./cache(개츠비 내부 캐시), /public(개츠비 빌드 결과물) 모두 안전히 포함되어있다.

그리고 Layout 컴포넌트가 있는 폴더로 이동하니 layout.js...? 내가 리팩토링 하면서 컴포넌트 파일 이름은 대문자로 시작하도록 분명히 바꿨는데...? 왜 파일 이름이 안바뀌었지...?

구글링 해보니 git은 파일명의 대소문자를 인식하지 않는다고 한다. layout.js -> Layout.js 변경을 했지만 git은 변화를 감지하지 못했고, 이번에 푸시된 코드에서 모든 경로는 '../Layout.js'을 가리키고 있었기 때문에 오류가 난 것이었다.

해결 방법

mv layout.js Layout1.js
git stage .
mv Layout1.js Layout.js
git stage .
git add .
git commit -a -m "파일 대소문자 변경"

위의 과정을 거쳐 layout.js -> Layout.js 대소문자 변경을 완료했다.

도움이 된 자료

[Gatsby site builds locally but fails on Netlify], Error Message: Command failed with exit code 1: gatsby build, (2022.02.25), https://answers.netlify.com/t/gatsby-site-builds-locally-but-fails-on-netlify-error-message-command-failed-with-exit-code-1-gatsby-build/25953/3,

sync problem with file with lower case and upper case, (2022.02.25), https://github.com/isaacs/github/issues/1520