getting error "TypeError: Cannot read properties of null (reading 'useState')" on useState usage react

Question

So I'm trying to use useState in my nextjs app, but as soon as I add in the line of code to initialize useState it throws a popup error with the error message: TypeError: Cannot read properties of null (reading 'useState')

Here is a simplified version of my code:

import { useState } from 'react'

export default function Home() {
    return (
        <div>
            <Transactions />
        </div>
    )
}



const Transactions = () => {

    const [state, setState] = useState('test')
...
}

React/Next versions I'm running:

"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"

Screenshot of error from chrome dev tools:

Any thoughts on what's causing this? Thanks

EDIT Very dumb bug on my end, issue was resolved by importing react...

Answer 1

So I forked and cloned your github repo and was not able to reproduce the error on my system. One thing I found was in your navBar component you import

import Link from 'next/Link'

which threw me an error until I could change it next/link to lowercase

import Link from 'next/link'

What I would recommend doing is to reinstall react, just with a simple npm command to see if that fixes your problem. If not let me know!

npm uninstall react
npm install react@latest