Next.js – React is not defined

obergeron août 6, 2022 No Comments

A solution to the following error in Next.Js : ReferenceError: React is not defined

Test platform : Windows 10, Chrome, React 17

Exemple of Source code : 

import { useState } from "react";


function Header({ title }) {
  return <h1>{title ? title : "Default title"}</h1>
}

export default function HomePage() {
  const names = ['John Doe', 'Henri Dust', 'Elton Muk']

  const [likes, setLikes] = React.useState(0)

  function handleClick() {
    setLikes(likes + 1)
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}

Solution : The line which give the error this one : 

          const [likes, setLikes] = React.useState(0)

In this example , for solving the problem you need to remove the Word React , you can use useState directly in Next.js with the import at the first line

 const [likes, setLikes] = useState(0)

Annexe

Full error message

ReferenceError: React is not defined
at HomePage (webpack-internal:///./pages/index.js:26:31)
at renderWithHooks (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
at renderIndeterminateComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
at renderElement (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at finishClassComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5688:3)
at renderClassComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5696:3)
at renderElement (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5943:7)
at renderNodeDestructiveImpl (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
error – pages\index.js (11:28) @ HomePage
error – ReferenceError: React is not defined
at HomePage (webpack-internal:///./pages/index.js:26:31)
at renderWithHooks (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
at renderIndeterminateComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
at renderElement (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at finishClassComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5688:3)
at renderClassComponent (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5696:3)
at renderElement (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5943:7)
at renderNodeDestructiveImpl (D:\workspace-react-nextjs-training\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11) {
page: ‘/’

Laisser un commentaire