Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GoogleOneTap causing infinite loop with TanStack Start. #4642

Closed
4 tasks done
FacundoLucci opened this issue Nov 24, 2024 · 3 comments
Closed
4 tasks done

GoogleOneTap causing infinite loop with TanStack Start. #4642

FacundoLucci opened this issue Nov 24, 2024 · 3 comments

Comments

@FacundoLucci
Copy link

Preliminary Checks

Reproduction

https://github.com/FacundoLucci/tanstack-clerk

Publishable key

pk_test_cmVndWxhci1ncnViLTI3LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Using the GoogleOneTap component after updating to the beta version of tanstack start causes inifinite loop loading app in dev. I had no issue with alpha version

Steps to reproduce:

  1. uncomment out GoogleOneTap in __root.tsx
  2. pnpm dev

Expected behavior:

One tap ui to appear when user is not logged in.

Actual behavior:

App goes into infinite loop in browser console. Need to close tab to get out of it.

Environment

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M3
    Memory: 42.91 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.1.0 - ~/.nvm/versions/node/v23.1.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v23.1.0/bin/npm
    pnpm: 9.14.2 - ~/.nvm/versions/node/v23.1.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6
  npmPackages:
    @clerk/tanstack-start: ^0.5.3 => 0.5.3 
    @tanstack/react-router: ^1.82.2 => 1.82.2 
    @tanstack/start: ^1.82.6 => 1.82.6 
    @types/react: ^18.3.12 => 18.3.12 
    @types/react-dom: ^18.3.1 => 18.3.1 
    @vitejs/plugin-react: ^4.3.3 => 4.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.7.2 => 5.7.2 
    vinxi: ^0.4.3 => 0.4.3
@FacundoLucci FacundoLucci added the needs-triage A ticket that needs to be triaged by a team member label Nov 24, 2024
@wobsoriano
Copy link
Member

wobsoriano commented Nov 25, 2024 •
edited
Loading

Hello! I cloned your project and can confirm uncommenting <GoogleOneTap /> causes an infinite loop. We're still investigating, but moving the <GoogleOneTap /> component inside the <body> tag, or putting in in a different route (index for example) fixes the issue

@linear linear bot removed confirmed needs-triage A ticket that needs to be triaged by a team member labels Jan 22, 2025
@wobsoriano
Copy link
Member

Hi there! Regarding the <GoogleOneTap /> component, since it renders a div element, placing it as a direct child of <html> or between <html> and <head> creates invalid HTML. This causes hydration errors and, in TanStack Start's case, triggers an infinite reload. The component should instead be placed inside the <body> tag or within one of the pages.

I believe our Next.js example here needs to be updated, as the current implementation will cause hydration errors. 👍🏼

@wobsoriano
Copy link
Member

PR correcting the placement of <GoogleOneTap /> in our docs - clerk/clerk-docs#1950

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@wobsoriano @panteliselef @FacundoLucci