typescript UTF-8인코딩 에러

Olivia·2024년 7월 15일
0

[Trouble Shooting👾]

목록 보기
2/2

프론트엔드 소스코드(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
profile
👩🏻‍💻

0개의 댓글