React Component - Cannot read properties of null (reading 'useState')

Question

I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages.

Everything was working perfectly until I tried to use useState() in one of the components. Add this created the following errors:

Invalid hook call. Hooks can only be called inside of the body of a function component.

TypeError: Cannot read properties of null (reading 'useState')

I feel this is strange and I can't figure out what is causing it. I also tested with other hooks to see if it was just useState that was the problem but others such as useEffect and useRef also have the same problem.

Project structure is:

/components (the components to develop/test/document
    /component-group
        /Component
            index.js
            Component.js
            component.scss
            package.json
/library  (where all the components are developed/tested/documented)
    /component1
    /component2
    /etc (all the components that make up the library)
webpack.config.js
package.json
etc...

Components are imported into the library using a relative path because I don't won't to have to publish them to npm and update the version locally every time a change is made and needs to be tested.

As for the code for the component where useState is causing problems, this is a basic version which still causes problems:

import React, { useState } from 'react';

const TestComponent = () => {

    const [testState, setTestState] = useState("testing");

    return (
        <p>Hello World</p>
    )

}

export default TestComponent

If I comment out the useState line then Hello World is displayed, if I uncomment the line then the errors appear.

Any ideas as to what might be wrong would be really appreciated.

Thank you in advance!

Lithea

Show pls how you use component and where – Lodgment

I think there might be some problems with node modules of your project. Please make sure to reinstall node modules by npm install (yarn install). – Alpenglow

@iceFox I have just tried this and it doesn't solve the problem. – Lithea

Managed to fix this using the Webpack alias property as explained in this tutorial: blog.maximeheckel.com/posts/duplicate-dependencies-npm-link – Lithea

Answer 1

I think you're using an old version of React, there is no problem on my System. Check you react version.

I faced the same problem in a code SandBox because of wrong import like this

import { useState } from "react/cjs/react.production.min";

---

import React, { useState } from 'react';
const TestComponent = () => {

    const [testState, setTestState] = useState("testing");

    return (
        <>
            <h2>{testState}</h2>
            <p>Hello World</p>
        </>
    )

}

export default TestComponent

enter image description here

Nemesis

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Kohler