Reactのエラーと解決方法まとめ

全ては書き切れないかもしれませんが、出会ったエラーとその解決法をできるだけ書き留めて行こうと思います。

① jsxのエラー（コード問題編）

＜console＞

Warning: React.jsx: type is invalid

-- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

＜雑な直訳＞
jsxファイルの中のコードに間違いがあるで。

＜解決方法＞
rfceで出した候補のコードにはセミコロンが付いていなかった。
そのため、jsxファイルの該当箇所にセミコロンを付けることでエラーが解消された。

＜Before＞

import React from 'react'
import "./Sidebar.css"

function Sidebar() {
  return (
    <div>Sidebar</div>
  )
}

export default Sidebar

＜After＞

import React from 'react';
import "./Sidebar.css";

function Sidebar() {
  return (
    <div>Sidebar</div>
  )
}

export default Sidebar;

＜感想＞
たったこれだけでconsoleがピカピカに( ^o^)ﾉ

② Manifestのエラー（画像編）

＜console＞

Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)

＜雑な直訳＞
要らん画像コードを消しなはれ。

＜解決方法＞
Reactを立ち上げる際にテンプレートとして入っているmanifest.json内の不要な画像コードを削除する。
※テンプレート画像（logo192.png等）は削除していたが、manifest.json内の不要な画像コードを削除していなかった。

＜Before＞

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

＜After＞

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

＜感想＞
初期設定時のconsole内のエラーが全部消えたで( ^o^)ﾉ
不要なものは消しておきましょう。