문제
npm start
> react-scripts start
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string.
원인
webpack-dev-server의 호스트 검증 로직 때문
해결
.env.development.local 생성 후 아래 작성
DANGEROUSLY_DISABLE_HOST_CHECK=true
후 npm start 하면 정상작동
원리
- react-scripts start → 내부에서 webpack-dev-server 실행
- webpack-dev-server는 기본적으로 외부에서 접속 가능한 호스트를 제한합니다.
- 이때 allowedHosts 배열을 만드는데, process.env.HOST 값이 비어있거나 이상하면 [""]로 들어가서
Invalid options object... allowedHosts[0] should be a non-empty string 에러가 뜹니다. - Node/npm 버전이 바뀌면서 환경변수 처리나 유효성 검사 방식이 엄격해진 게, 안 되던 자리에서만 터진 이유입니다.
.env.development.local로 해결된 이유
- DANGEROUSLY_DISABLE_HOST_CHECK=true는 CRA에서 호스트 검증 자체를 끄는 환경변수입니다.
- devServer 설정 중 disableHostCheck를 강제로 true로 만들어서,
allowedHosts 검증을 건너뛰고 바로 서버를 띄웁니다. - 그래서 HOST 값이 비어 있어도 더 이상 에러가 발생하지 않습니다.
정리
- 왜 로컬은 되고, 다른 PC는 안 됐나?
→ 로컬 PC에는 HOST 환경변수 문제가 없었고, 다른 PC에는 비어 있거나 잘못된 값이 있었음.
(또는 Node 20 환경의 더 엄격한 검증이 영향) - 왜 .env.development.local로 해결됐나?
→ 호스트 검증 기능을 아예 꺼버렸기 때문.
(즉, 원인을 제거한 게 아니라 문제 검증 단계를 무력화한 셈)
반응형
