I recently changed the version of react and react-dom in package.json (I upgraded), and now I'm getting the following error.

×
←→1 of 18 errors on the page
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Can someone please help?

Error happens here

  axios.get('/api/books/my-books-courses').then(response => {
        var result = response.data;

        if (result.error) {
            this.setState({
                error: result.error,
                loading: false
            });
        } else if (result.status === "ok") {
            this.setState({
                loading: false,
                courses: result.courses,
                learningPaths: result.collections,
                mycourses: result.mycourses,
                books: result.mybooks[0].books,
                recommends: result.recommends,
                categories: result.categories,
                isPaid: result.isPaid,
                mybooks: result.mybooks.slice(1, result.mybooks.length)
            });
        }
    }).catch(error => {
        this.setState({
            error: error.message,
            loading: false
        });
    })

Edit

• I ran the ls command to check if there are duplicate react versions, i see the following. How do I handle this?

  ─┬ [email protected] │ └── [email protected] ├─┬ [email protected] │ └── [email protected] deduped invalid: "~0.14 || ^15.0.0 || ^16.0.0" from node_modules/jodit-react ├─┬ [email protected] │ ├── [email protected] deduped invalid: "~0.14 || ^15.0.0 || ^16.0.0" from node_modules/jodit-react, "^16.9.0" from node_modules/react-datepicker

CodePudding user response：

You'd have to post some code to get a real answer but what you should look for is if you are calling a hook (useState, useEffect, etc.) inside a class component, or inside a function inside of a functional component.

Hooks can only be called inside functional components and must be at the top level, never inside another function.

The other problem vould be related to the mismatching versions on React and React DOM. When you updated your package.json did you delete the package-lock.json file and node modules folder and reinstall all packages with npm install?

If you post the full code of the file where you have the error I could point out exactly where it is happening.

Edit: I see your code now, no Hooks being used so definitely just delete and reinstall node modules

CodePudding user response：

I solved this problem by running npm dedupe. Thank you Google!