코딩/트러블 슈팅

Manifest: Line: 1, column: 1, Syntax error

얌2 2023. 9. 11. 12:07
728x90

React를 이용해 프로젝트를 하면서 제목과 같은 오류를 맞닥뜨렸다면 index.html 파일로 들어가 manifest 부분을 확인하면 된다.

만약 manifest.json 파일을 사용하지 않는다면 아래와 같은 <link rel="manifest" ...> 코드를 지우면 된다.

// index.html
<link 
   rel="manifest" 
   type="application/manifest+json" 
   href="manifest.json" 
   crossorigin="use-credentials" 
 />


하지만 PWA를 위해 manifest.json을 사용해야 한다면 3가지를 확인해야 한다.

1. 경로/오타 문제

rel="manifest"
href="manifest.json"

✅️ [rel] "manifest"라고 잘 적혀있다.
✅️ [href] 올바른 경로로 설정되어있다. (index.html과 manifest.json이 같은 폴더 안에 있다면, manifest.json 파일 안 start_url이 "/"이라면 위의 경로가 맞다.) 
⚠️ index.html, manifest.json은 public 폴더 안에 존재해야 한다.

2. 타입 문제

개발자 도구(F12)를 열고 Network 탭으로 들어가 manifest.json 파일이 오류없이 잘 들고 와져있다면 content-type을 확인해본다. json이나 application/manifest+json이 아닌 text/html이라면 타입 문제이다.
❗️ json 보다는 application/manifest+json이 더 올바른 타입이다.

타입이 text/html이라면 서버측에서 변경이 필요하다. nginx를 사용하고 있다면 location에서  manifest.json 파일에 content-type을 지정해줘야 한다.

location / { 
    if ($uri = /manifest.json) { 
         add_header Content-Type application/manifest+json; 
    }

또는

location ~ \.json {
    add_header Content-Type application/manifest+json;
    ...
}

 

 

3. cross-origin 문제

    <link rel="manifest" ... crossorigin="use-credentials"  />

crossorigin에 "use-credentials"를 넣어야 한다.

 

 

위 과정을 거쳤는데도 안된다면 경로를 href="%PUBLIC_URL%/manifest.json" 이렇게 설정해보길 바란다.
dist나 build 파일에 manifest.json이 안 생긴다면 다른 문제(webpack 등)일 수 있으니 다른 파일을 살펴보자.

728x90