Manifest: Line: 1, column: 1, Syntax error. manifest.json:1のエラー解決方法
はじめに
Reactでアプリを作成していたら、コンソールエラーがでました。
解決法
結論
index.htmlにもとからあった記述を
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
このように変更する。
<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
これで、コンソールエラーが消えました。
エラー解決までの流れ
1.ブラウザでアプリを確認しようとした際に、terminalにsyntax errorが出現。
記述した該当のコードを確認しても問題はなさそう…。
2.コンソールを確認
このようなエラーが出ていました。
3.解決法を試してみる
試したこと①
まず、一番簡単にできる解決法からやってみることに。
キャッシュを削除したらなおった！との記述を発見。
キャッシュを削除した。変わらずコンソールエラー。
試したこと②
では、一番有力候補っぽいこの解決法。今回実際に解決できた方法です。
これをどこに追加すればいいんだい？
<link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
通常はheaderにあるらしい。
Reactアプリのヘッダーの記述ってどこ????????
ここにありました。publicフォルダ内のindex.htmlに記述発見。
manifest.jsonとは????
Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。 このファイルは、アプリケーションまたは拡張機能の基本情報や設定、アイコンなどのリソースの場所を定義します。
Reactアプリケーションでいうと…
Reactアプリケーションをcreate-react-appで作成するとpublicフォルダにmanifest.jsonというファイルが存在します。
ホーム画面に追加」した際のアイコンやUI等に関する設定をすることができ、ファイルの中身はjson形式で、アプリケーションに関する主なプロパティについて記述してあるようです。
初期状態は以下のようになっています。
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
エラー発生の原因
Basic認証がかかっているとそれを突破できない
Basic認証とは？
Webサイトにアクセス制限をかける認証方法の1つです。 httpの機能が持つ認証システムで、手軽に制限をかける認証方法として知られています。
「Basic認証」はWebサイトへのアクセス制限をかける設定方法で、ほぼすべてのWebサーバーやブラウザに対応しています。
これで、引っかかったんですね。
参考にさせていただいたサイトさま
Discussion