Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React 18 compatibility

See original GitHub issue

Add react 18 dependencies:

"react": "^18.0.0",
"react-dom": "^18.0.0",

Issue Analytics

State:
Created a year ago
Comments:8 (1 by maintainers)

Top GitHub Comments

11reactions

ChrisSamo632commented, Apr 13, 2022

For me, the problem was that this library pulls in an older version of react and react-dom (17.0.2) compared with that use by my project (18.0.0)

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react suggests that maybe react/react-dom should be specified as peerDependencies rather than dependencies within this library (I don’t know whether that’s correct/something to change here)?

As my project is being built with yarn, I was able to set resolutions in my package.json to include

    "resolutions": {
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
    }

This appears to have allowed the <Carousel /> to work again for me without any further changes.

1reaction

Bodriecommented, Apr 20, 2022

should be this if you use npm instead of yarn. but didn’t test it
  "overrides": {
    "react-material-ui-carousel": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    }
  }
works only with npm@^8.3 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

Yes, this works!
Just don’t forget to delete the package-lock.json and then run npm install

Cheers to @ximex 😃