안녕하세요

GCP 배포 Uncaught SyntaxError: Unexpected token '<' 에러 해결 방법들 본문

유튜브컨텐츠탐색-StelLife/Google App Engine

GCP 배포 Uncaught SyntaxError: Unexpected token '<' 에러 해결 방법들

sakuraop 2023. 8. 5. 10:18

앞서, 모든 원인은

이전 버전에서 배포된 파일이 캐시가 된 상태에서

새로 불러오는 파일을 읽어들일 때 새롭게 빌드된 파일을 JS 파일로 인식하지 않고
<DOCUMENT 와 같이 HTML의 여는 태그로 인식하였기 때문이다.

가장 효과적인 해결 방법은

본문의 4)번 해결 방법이다.
캐시된 번들과 다른 경로를 입력하여, 다른 파일이라는 것을 확실하게 인식시킬 수 있다. (라고 추측한다.)

1) <base href="/" /> 를 public/index.js 헤드에 추가하고 build 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

=> 이러고 될 때가 있다. 근데 몇 번 하다보면 또 안된다.

2) react app의 package.json에 "homepage": ".", 를 추가한다

 
  "private": true,
  "homepage": ".",
  "proxy": "http://localhost:8080/",
 

 

=> 이러고 될 때가 있는데, 역시 몇 번 배포하다 보면 또 안된다.


3) meta 태그를 추가하여 cache를 하지 않도록 한다.

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

 

=> 또 역시 되다가, 몇 번 배포 한 뒤엔 갑자기 안된다. 앞서 잘 됐으면 3, 4 번까지 해볼 일도 없었겠지...

 

4) build 된 index.html 파일의 src="" 부분의 "./static" 온점 제거 => "/static"

build 직후: "./static" 을 "/static" 으로 수정한다.
그럼에도 에러가 발생하는 경우가 있는데,

 

./static
/static 

./static
/static 


이렇게 계속 반복시키면 더 이상 에러를 마주하지 않아도 된다.

원인 및 해결 방법 1, 2, 3

https://lab.naminsik.com/4011

 

lab.naminsik

lab.naminsik - 개발자 남인식 Lab.

lab.naminsik.com


해결 방법 3 (해결 방법에 대한 분석은 없지만 해결에 가장 큰 도움이 되었음)
https://nnuoyos.tistory.com/311

 

리액트 에러 :: Uncaught SyntaxError: Unexpected token '<'

로컬에서는 화면이 제대로 보였는데 배포한 사이트에 접속하니 빈 화면만 보였다 에러 메세지 구글링 해서 해결 1. head 태그 안에 아래의 코드 추가 하기 2. index.html 파일 내에 script 태그 수정하

nnuoyos.tistory.com

저작자표시 비영리

'유튜브컨텐츠탐색-StelLife > Google App Engine' 카테고리의 다른 글

GCP cron: 특정 api로 요청 보내 작업 예약실행하기  (0) 2023.03.27
[GCP] babel-node doesn't work with type: module.  (0) 2023.02.21
프로젝트(6) - 구글 클라우드 플랫폼 서버 배포, gcp error  (3) 2023.02.10
'유튜브컨텐츠탐색-StelLife/Google App Engine' Related Articles more