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

Website broken #210

Open
aniketbiprojit opened this issue Apr 18, 2024 · 21 comments
Open

Website broken #210

aniketbiprojit opened this issue Apr 18, 2024 · 21 comments

Comments

@aniketbiprojit
Copy link

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
Copy link
Author

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

@ArianHamdi
Copy link

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

@flashblaze
Copy link

In my case it was Urban VPN Proxy

@elapshynov
Copy link

elapshynov commented Apr 19, 2024 •
edited

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

P.S. Incognito mode is a workaround

@Xenfo
Copy link

Xenfo commented Apr 19, 2024

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.

@wheeler
Copy link

wheeler commented Apr 19, 2024

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

@happycollision
Copy link

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)

CleanShot.2024-04-20.at.00.05.44.mp4

@GrahamJenkins
Copy link

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.

@tannerlinsley
Copy link
Collaborator

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

@ChristopherHaws
Copy link

ChristopherHaws commented Apr 21, 2024 •
edited

@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:

tanstack.com/app/server.tsx

Line 57 in 16b239f

childNodes.forEach(node => {

image

image

@tannerlinsley
Copy link
Collaborator

@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.

@ChristopherHaws
Copy link

@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
Copy link

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

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

@happycollision
Copy link

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
Copy link

happycollision commented Apr 21, 2024 •
edited

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.

@ShootingStar91
Copy link

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.

@Jontii
Copy link

Jontii commented Apr 23, 2024

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

@jcready
Copy link

jcready commented Apr 23, 2024

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

@Jontii
Copy link

Jontii commented Apr 23, 2024

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');

@anis-dr
Copy link

anis-dr commented Apr 25, 2024

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

@jenewland1999 jenewland1999 mentioned this issue Apr 25, 2024
Open
@chimericdream
Copy link

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.

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