Error 정리: React-Uncaught SyntaxError: Unexpected token <

리액트로 프로젝트 후 빌드를 하고 나면 React-Uncaught SyntaxError: Unexpected token <

에러가 생기는 경우가 많습니다.

굉장히 흔한에러이니 왜 이런 에러가 생기는 지 그리고 해결방법은 무엇인지 알아보도록 하겠습니다.

 

 

저 에러는 빌드할때 웹팩이 chunkFile을 JS가 아닌 HTML 구문으로 인식해서 그렇습니다.

<DOCTYPE 으로 시작하는 html  의 <를 인식 하지못한다는 문법에러 입니다.

 

해결방법은 다양한데 CRA기준으로 설명드리겠습니다. 순서대로 하라는 말이 아니라 저중에 하나씩 해보시면 됩니다.

 

1) pakage.json에 "homepage": "." 경로 설정

{
"name": "front",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.0",

 

2) Html file head 에 no-cache 넣어주기

캐시 문제일 경우 public/index.html 에 아래 코드를 넣으시면 됩니다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

 

3) Html file head에 베이스 경로 넣어주기

현재 문서의 모든 상대 링크에 사용될 기본 URL을 지정합니다.

<base href="/" />

 

관련 웹팩이슈 사항은 아래 링크를 참조하시길 바랍니다.

 

github.com/webpack/webpack/issues/2882#issuecomment-280906981

"Uncaught SyntaxError: Unexpected token <" error happened sometimes · Issue #2882 · webpack/webpack

혹시 이렇게까지 했는데 에러 해결이 안된다고 하시면 댓글 부탁드립니다.