tanstack.com icon indicating copy to clipboard operation
tanstack.com copied to clipboard

Website broken

Open aniketbiprojit opened this issue 1 year ago • 21 comments

image

 client-DsFMF6EI.js:38 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ml (client-DsFMF6EI.js:38:4807)
    at kh (client-DsFMF6EI.js:40:45522)
    at yh (client-DsFMF6EI.js:40:39714)
    at Vm (client-DsFMF6EI.js:40:39686)
    at mh (client-DsFMF6EI.js:40:34675)
    at T (client-DsFMF6EI.js:25:1561)
    at MessagePort.j (client-DsFMF6EI.js:25:1922)
ml @ client-DsFMF6EI.js:38
kh @ client-DsFMF6EI.js:40
yh @ client-DsFMF6EI.js:40
Vm @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 Uncaught Error: Minified React error #422; visit https://reactjs.org/docs/error-decoder.html?invariant=422 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Pm (client-DsFMF6EI.js:40:8432)
    at oh (client-DsFMF6EI.js:40:7373)
    at kh (client-DsFMF6EI.js:40:45725)
    at yh (client-DsFMF6EI.js:40:39714)
    at Vm (client-DsFMF6EI.js:40:39686)
    at mh (client-DsFMF6EI.js:40:34675)
    at T (client-DsFMF6EI.js:25:1561)
    at MessagePort.j (client-DsFMF6EI.js:25:1922)
Pm @ client-DsFMF6EI.js:40
oh @ client-DsFMF6EI.js:40
kh @ client-DsFMF6EI.js:40
yh @ client-DsFMF6EI.js:40
Vm @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:624 [ReactHydrationOverlay]: No `window.BUILDER_HYDRATION_OVERLAY` found. Make sure the initializer script is properly injected into your app's entry point.
(anonymous) @ client-DsFMF6EI.js:624
Co @ client-DsFMF6EI.js:40
Ir @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25322)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
wl @ client-DsFMF6EI.js:40
n.callback @ client-DsFMF6EI.js:40
Vc @ client-DsFMF6EI.js:38
af @ client-DsFMF6EI.js:40
_h @ client-DsFMF6EI.js:40
Fm @ client-DsFMF6EI.js:40
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:38 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25322)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
    at Tl (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25445)
Kn @ client-DsFMF6EI.js:38
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
mh @ client-DsFMF6EI.js:40
T @ client-DsFMF6EI.js:25
j @ client-DsFMF6EI.js:25
client-DsFMF6EI.js:40 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26048)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26696)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
wl @ client-DsFMF6EI.js:40
n.callback @ client-DsFMF6EI.js:40
Vc @ client-DsFMF6EI.js:38
af @ client-DsFMF6EI.js:40
_h @ client-DsFMF6EI.js:40
Fm @ client-DsFMF6EI.js:40
Wm @ client-DsFMF6EI.js:40
Zn @ client-DsFMF6EI.js:40
cf @ client-DsFMF6EI.js:40
Kn @ client-DsFMF6EI.js:38
(anonymous) @ client-DsFMF6EI.js:40
client-DsFMF6EI.js:38 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26048)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26503)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
    at ph (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:26696)
    at kn (https://tanstack.com/_build/assets/client-DsFMF6EI.js:40:25754)
Kn @ client-DsFMF6EI.js:38
(anonymous) @ client-DsFMF6EI.js:40
js?id=G-JMT1Z50SPS:633 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at b (js?id=G-JMT1Z50SPS:633:47)
    at js?id=G-JMT1Z50SPS:635:94
    at js?id=G-JMT1Z50SPS:635:269
    at js?id=G-JMT1Z50SPS:642:3
b @ js?id=G-JMT1Z50SPS:633
(anonymous) @ js?id=G-JMT1Z50SPS:635
(anonymous) @ js?id=G-JMT1Z50SPS:635
(anonymous) @ js?id=G-JMT1Z50SPS:642
content.js:284 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'children')
    at content.js:284:55
    at content.js:284:150
    at content.js:284:2674
    at content.js:284:2837
(anonymous) @ content.js:284
(anonymous) @ content.js:284
(anonymous) @ content.js:284
(anonymous) @ content.js:284
Show 4 more frames
Show less

aniketbiprojit avatar Apr 18 '24 09:04 aniketbiprojit

Not an issue with Website. My extension broke it. I was using a dark mode extension which seems to conflict with how this website runs.

For reference: https://chrome.google.com/webstore/detail/dmghijelimhndkbmpgbldicpogfkceaj

aniketbiprojit avatar Apr 18 '24 09:04 aniketbiprojit

Oops, I had the Braavos - Starknet Wallet extension installed and it broke the website.

ArianHamdi avatar Apr 19 '24 00:04 ArianHamdi

In my case it was Urban VPN Proxy

flashblaze avatar Apr 19 '24 05:04 flashblaze

Same issue for me. But how to determine the extension that can cause this issue?

P.S. Incognito mode is a workaround

elapshynov avatar Apr 19 '24 08:04 elapshynov

On Firefox, Dashlane and Dark Reader break the page. That being said, it still probably has something to do with this website since it was working fine about a week ago and other websites work fine.

samchouse avatar Apr 19 '24 16:04 samchouse

I would say this is an issue. The page should be less fragile to common Chrome extensions.

wheeler avatar Apr 19 '24 22:04 wheeler

Same here with a different extension on Safari called Noir. Pretty popular faux dark mode extension. I've had it installed for a long time, but the TanStack site only broke somewhat recently.

CleanShot 2024-04-20 at 00 04 42@2x

Here's a video of what happens. (Starts with a refresh)

https://github.com/TanStack/tanstack.com/assets/3663628/0b4f575c-06a7-46c5-a439-f7bc196edd09

happycollision avatar Apr 20 '24 04:04 happycollision

image I had to load the site in chrome just to find the github link. I'm using Firefox with very few, non invasive extensions. I thought maybe it was adblock (eww to sites that break when you break their tracking) but nope.

Good luck tracking down whatever is causing this.

GrahamJenkins avatar Apr 20 '24 05:04 GrahamJenkins

I just pushed an update to the site. Is anyone still getting a busted experience? Do you see any elements warned in the console?

tannerlinsley avatar Apr 21 '24 03:04 tannerlinsley

@tannerlinsley Yeah, the site is still not working for me with dark reader enabled in Brave Browser (with shields down). Disabling it for the site fixes the issue for me.

Dark reader modifies the head section of the DOM which I'm guessing is what is triggering the issue. I think the issue is happening here: https://github.com/TanStack/tanstack.com/blob/16b239fa47b2125a43531d22a3a37f915cb0ab7f/app/server.tsx#L57

image

image

ChristopherHaws avatar Apr 21 '24 07:04 ChristopherHaws

@ChristopherHaws Do you know when those nodes are being added? If I can get a script in before the extension executes, I can keep track of the delta and remove them temporarily while react hydrates, then put them back.

tannerlinsley avatar Apr 21 '24 07:04 tannerlinsley

@tannerlinsley from what I can see, it looks like they are adding a reactive observable which mutates different parts of the DOM at different points. The logic lives here: https://github.com/darkreader/darkreader/blob/main/src/inject/utils/dom.ts

ChristopherHaws avatar Apr 21 '24 08:04 ChristopherHaws

It looks like you can disable the extension for your site via a meta tag:

https://github.com/darkreader/darkreader/blob/main/CONTRIBUTING.md

ChristopherHaws avatar Apr 21 '24 08:04 ChristopherHaws

I swear Theo Brown mentioned in a recent video that he had to deal with hydration vs plugins a while back. Tanner, he might have some insight.

(Not at-mentioning since I don’t know them, personally)

happycollision avatar Apr 21 '24 12:04 happycollision

~Looks like the changes you made solved what was going on with Noir in Safari on macOS.~ ✅

~Though if I enable Noir (force it to render dark mode when the browser preference is light mode) instead of set it to auto (check browser preference and attempt to do nothing if the website appears to have an actual dark mode) the page still appears blank. But now, since the page doesn't automatically break (IE changing Noir settings actually brings things back), it is more discoverable and totally on the users of Noir. (But that's just my opinion).~

Update: nope. Still broken. I wonder if Noir behaves differently when the OS is set to auto vs when the OS is set to Dark Mode.

That is the only reason I can think of why the site would be down again because of Noir (in the evening, when auto dark mode kicks in on my machine). Not sure why Noir behaves differently from auto dark mode to plain old I-turned-it-on-manually dark mode, but it must.

happycollision avatar Apr 21 '24 13:04 happycollision

For me, an extension called "autoscroll" broke this site.

uBlock origin also broke it last week, but I disabled it and the site started working again. I didnt touch autoscroll then. Today the site didnt work and I disabled autoscroll too, and it started working. Strange.

ShootingStar91 avatar Apr 22 '24 08:04 ShootingStar91

For me, the extension Dashlane broke this site, disabling it made it work

Jontii avatar Apr 23 '24 08:04 Jontii

Please just revert whatever change caused this. I'm not going to disable my extensions just to see documentation.

jcready avatar Apr 23 '24 18:04 jcready

This line of code in the __root.tsx gives me an error when I forked. Removing it removed the error, but I'm not sure the errors are related to the above

document.documentElement.setAttribute('data-theme', 'dark');

Jontii avatar Apr 23 '24 20:04 Jontii

I'm having the same problem, I see the website for a split second then it blows up. CleanShot 2024-04-25 at 17 28 38

anis-dr avatar Apr 25 '24 16:04 anis-dr

I'm having the same issue in Firefox Developer Edition. I also tried an incognito window, which should eliminate any extensions as the culprit since none of them are enabled to run in private windows.

chimericdream avatar May 03 '24 04:05 chimericdream