프론트엔드 소스코드(Next.js + Typescript)를 빌드할때마다 한번씩 마주하던 UTF-8 인코딩 에러..
🚀 에러 메세지
Failed to compile.
./src/pages/._Footer.tsx
Error: Failed to read source code from /home/src/pages/._Footer.tsx
Caused by:
stream did not contain valid UTF-8
./src/pages/._Navigation.tsx
Error: Failed to read source code from /home/src/pages/._Navigation.tsx
Caused by:
stream did not contain valid UTF-8
./src/pages/.app.tsx
Error: Failed to read source code from /home/src/pages/.app.tsx
Caused by:
stream did not contain valid UTF-8
./src/pages/.document.tsx
Error: Failed to read source code from /home/src/pages/.document.tsx
Caused by:
stream did not contain valid UTF-8
./src/pages/._401.tsx
Error: Failed to read source code from /home/src/pages/._401.tsx
Caused by:
stream did not contain valid UTF-8
> Build failed because of webpack errors
npm notice
npm notice New major version of npm available! 8.19.4 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice Run npm install -g npm@10.8.2 to update!
npm notice🛠️ 오류 원인
TypeScript 파일에서 잘못된
UTF-8인코딩이 발견되었기 때문.
주로 파일 전송 과정에서 생성된 숨겨진 파일이나 메타 데이터 파일로 인해 발생.
- 서버에
module자체까지 다 옮겨야했다. 따라서 서버로 파일을 옮길 때 주로,.tar파일로 압축해서 파일을 올린 후 서버에서 파일을 압축해제하는 과정에서 해당 문제가 발생한듯하다.
이렇게 생각하는 이유는 아래와 같다.
"._" 또는 ".__"로 시작하는 파일들은 주로 macOS가 다른 파일 시스템으로
파일을 전송할 때 생성하는 숨겨진 파일이나 메타데이터 파일이다.
이것들은 실제 소스 코드 파일이 아니라 시스템이 생성한 파일로, 빌드 과정에서 문제를 일으킨다.👾 오류 해결
위의 숨겨진 파일들을 제거하고 다시 빌드.
find ./src/pages -name "._*" -delete
find ./src/pages -name ".__*" -delete
👩🏻💻