ReferenceError: React is not definedエラーについて

NEXT.jsにてブラウザを立ち上げるとエラーが起きて困っています

ReferenceError: React is not defined
今まではこのようなエラーが起きていなかったのですが、何が原因なのでしょうか

index.js

import Head from 'next/head'
import Link from 'next/link'
import { useEffect } from 'react'
import { useUser } from '../context/userContext'
import { firebase, auth } from '../firebase'
import Header from '../components/UIkit/Header'

export default function Home() {
  // Our custom hook to get context values
  const { loadingUser, user } = useUser()
  useEffect(() => {
    // if (!loadingUser) {
    //   // You know that the user is loaded: either logged in or out!
    //   console.log('user:', user)
    // }
    // // You also have your firebase app initialized
    // console.log('firebase:', firebase)
  }, [loadingUser, user])

  return (
    <div className="container">
      <Head>
        <title>Hands on Mania</title>
      </Head>
      <Header />
      <main className="u-text-center">
        <h1 className="font-family-homemade">Hands on Mania</h1>
        <p className="description">studying</p>
        <Link href="/signin">signin</Link>
      </main>
    </div>
  )
}

_app.js

import UserProvider from '../context/userContext'
import '../styles/global.css'

// Custom App to wrap it with context provider
export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  )
}

行動規範の内容に同意します

回答3件

index.js => import React, { useEffect } from 'react'で解決するのではないでしょうか。
app.js => import React from 'react' が抜けていますね。

Nextは全く触ったことが無く興味も無いので全然わかりませんが、Reactはほぼ毎日触って開発しているのでお答えできると思います。create-react-appを使ってReactで開発する際はapi以外はほぼimport React from 'react'が必要ですね。
index.jsに関してはcomponents内のindexなのか、src内の総まとめのindexなのかはわかりませんが、もし総まとめのindexならReactDOMとapp.jsもインポートしないといけないですよ。
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import app from './app'
div内のスタイルもclassNameを使用する際はダブルクォーテでもいいですが{}を使用する癖もつけて下さい。JS式も内部にかけるのでいざという時に何かと便利ですよ。
部分的に抜粋で全体的な形式がわからないのである程度の想定で書きましたので、参考の程度にして頂ければ幸いです。

投稿2021/07/27 15:25

nobu_oha

総合スコア20

_app.js内でreactのインポートが必要です。index.jsには必要ないと思いますが、もし動かない場合はindex.jsにもインポートしてください。

import React from 'react'

こちらが参考になるかもしれません。

Next.jsの開発者の方もこちらで言われているのですが、

Next.js automatically adds the React import when JSX is used indeed. However keep in mind that we do still need to import React from 'react' when the React variable is used.

Next.jsではReact変数が使用されている場合は'react'からReactをインポートをする必要があります。
今回、_app.jsのComponentはReact.Componentのことをあらわしていますので、先にReact自体のインポートが必須となります。

投稿2021/03/28 09:01