question-mark
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.

Add support for react 18

See original GitHub issue

When trying to upgrade to react 18, we are running into this Error:

error TS2786: 'GoogleLogin' cannot be used as a JSX component.

  Its instance type 'GoogleLogin' is not a valid JSX element.

    The types returned by 'render()' are incompatible between these types.

      Type 'import("/drone/src/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

error Command failed with exit code 2.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:10
  • Comments:10

github_iconTop GitHub Comments

9reactions
Infinitaycommented, Apr 19, 2022

I can’t properly install react-google-login alongside React v18. I have tried using the legacy-peer-deps flag but it resulted in more issues down the line with my other modules. Adding support for React’s new version would be appreciated.

>npm i react-google-login
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16 || ^17" from react-google-login@5.2.2
npm ERR! node_modules/react-google-login
npm ERR!   react-google-login@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See ...\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     ...\AppData\Local\npm-cache\_logs\2022-04-19T07_08_54_572Z-debug-0.log
6reactions
leecheukcommented, Jul 17, 2022

While we wait for this, hopefully this helps.

npm uninstall react-google-login
npm install @leecheuk/react-google-login

@leecheuk/react-google-login is a fork of anthonyjgrove/react-google-login and has plugin_name support & updated peerDependency for React 18.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Upgrade to React 18
When you first install React 18, you will see a warning in the console: ReactDOM.render is no longer supported in React 18.
Read more >
Add support for React 18 #17831 - storybookjs/storybook
Storybook will render your components with the new root API as soon as React 18 is installed. You can opt-out from this if...
Read more >
React 18 Upgrade Guide and New Features - Refine Dev
React 18 was released! Are you looking to upgrade to React 18? Learn about the new features and changes in this comprehensive guide....
Read more >
Upgrading to React 18 with TypeScript - LogRocket Blog
After a significant period of time in alpha and beta, React 18 shipped on March 29th 2022. Since the first alpha was released,...
Read more >
How to Upgrade to React 18 - How-To Geek
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found