webpack · npm
오류 문구
Module not found: Error: Can't resolve './components/Button' in '/app/src'
무슨 뜻인가
번들러가 그 경로에서 그 파일을 찾지 못했다는 뜻입니다 — 이것은 패키지가 아니라 내가 쓴 import입니다. 상대 경로가 한 칸 어긋났거나, 확장자가 빠졌거나 잘못되었거나, 파일 이름의 대소문자가 import와 다를 때 나옵니다. 마지막 것이 가장 고약합니다 — macOS와 윈도우의 파일시스템은 대소문자를 구분하지 않아 내 컴퓨터에서는 돌아가고 리눅스 CI에서만 깨집니다. 그 디렉터리를 ls로 찍어 import와 한 글자씩, 대소문자까지 맞춰 봅니다. 이름이 경로가 아니라 패키지라면 그것을 설치하면 되고, 어느 쪽이든 지워지는 것은 없습니다.
고치는 명령
한 줄 명령으로 끝나지 않습니다. 설명에 무엇을 봐야 하는지 적어 두었습니다.
- 내는 도구
- webpack
- npm
- 20
npm ERR!로 시작하는 줄은 대개 마지막 여섯 줄이 아니라 첫 code XXXX 한 줄에 원인이 적혀 있고, 오류가 내 코드가 아니라 의존성 나무나 네이티브 빌드에서 온 것이면 node_modules를 지우고 다시 설치하는 것으로 절반이 풀립니다.
오류 문구를 읽는 법
- 첫 줄부터 읽습니다. 아래로 갈수록 도구 내부 이야기이고, 정작 원인은 맨 위에 적혀 있습니다.
- 파일 이름과 줄 번호가 있으면 거기가 시작점입니다 — 스택의 가장 위가 아니라, 내가 쓴 파일이 나오는 가장 위 줄입니다.
- 문구를 그대로 검색합니다. 다만 내 경로와 변수 이름은 지웁니다 — 그 부분이 검색을 방해합니다.
- 같은 문구가 도구 판마다 다르게 나옵니다. 검색 결과가 안 맞으면 판 번호를 함께 넣어 봅니다.
- 고치는 명령을 붙여 넣기 전에 그 명령이 무엇을 버리는지 확인합니다. 되돌릴 수 없는 것이 섞여 있습니다.
자주 묻는 질문
Q. Module not found: Error: Can't resolve './components/Button' in '/app/src' 는 무슨 뜻인가요?
번들러가 그 경로에서 그 파일을 찾지 못했다는 뜻입니다 — 이것은 패키지가 아니라 내가 쓴 import입니다. 상대 경로가 한 칸 어긋났거나, 확장자가 빠졌거나 잘못되었거나, 파일 이름의 대소문자가 import와 다를 때 나옵니다. 마지막 것이 가장 고약합니다 — macOS와 윈도우의 파일시스템은 대소문자를 구분하지 않아 내 컴퓨터에서는 돌아가고 리눅스 CI에서만 깨집니다. 그 디렉터리를 ls로 찍어 import와 한 글자씩, 대소문자까지 맞춰 봅니다. 이름이 경로가 아니라 패키지라면 그것을 설치하면 되고, 어느 쪽이든 지워지는 것은 없습니다.
Q. 어떻게 고치나요?
한 줄 명령으로 끝나지 않습니다. 위 설명에서 무엇을 봐야 하는지 적어 두었습니다.
Q. 어느 도구가 내는 오류인가요?
webpack입니다. npm 갈래에 있고, 문구는 9낱말입니다.