manifest.jsonとは何者だ...?

はじめに

Reactを使ってTODOアプリの開発を行っていたところ、コンソールにとあるエラーがずっと出ていました。

それがこちら

コンソール

Manifest: Line: 8, column: 7, Syntax error.

問題

エラーコードを基に調べていくと、manifest.jsonが悪さをしていることがわかりました。
実はというと悪さをしていたのは僕なのですが…

manifest.jsonって何??

Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。このファイルは、アプリケーションまたは拡張機能の基本情報や設定、アイコンなどのリソースの場所を定義します。
引用元
https://zenn.dev/hirouen/articles/3730805e2da990

ふむふむ

僕のやらかし

僕は npx create-react-app というコマンドを用いてローカル環境にreactアプリを作ったのですが、邪魔なファイルを消そうとしてmanifest.jsonのファイルを消してしまっていました。

解決方法

manifest.jsonを復元する。
リポジトリをしっかり作っていてよかった(汗

ついでに、manifest.jsonがデフォルトのままだとiconの設定にデフォルトで入っている画像が使われているので違うエラーが吐かれると思います。
iconsの配列のところ丸々消しときましょう。

{
  "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"
}

おわりに

アプリ自体は正常に動いていたので問題なかったのですが、ちゃんと解決することが出来てよかったです。

エラーは学びを与えてくれるもの!!

みなさんも一緒に頑張りましょう~~

参考