[Docs]: Did not expect server HTML to contain a <script> in <html> #1077

chanan · 2021-12-16T16:35:50Z

What version of Remix are you using?

1.0.6

What version of Node are you using? Minimum supported version is 14.

16

Steps to Reproduce

Run npx create-remix@latest
Run yarn to install packages
run yarn dev to start the server
Observe the browser dev tools console

Expected Behavior

No errors should be shown in the console

Actual Behavior

The following error is shown in the browser dev console:

react-dom.development.js:67 
        
       Warning: Did not expect server HTML to contain a <script> in <html>.
    at head
    at html
    at Document (http://localhost:3000/build/root-KCVDQOQR.js:65:21)
    at App
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:1518:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:1457:5)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:2947:3)
    at Routes (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:2930:7)
    at Router2 (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:457:21)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:1518:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:1457:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:2827:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-RDYF4RHT.js:3509:42)

The text was updated successfully, but these errors were encountered:

girishk21 · 2021-12-16T16:38:31Z

hey @chanan, this is a hydration warning from React. This is most probably because of your browser extensions injecting scripts into the HTML Document before React could hydrate the server rendered document. Check out in incognito, the warning should disappear

iwfan · 2022-01-07T14:02:12Z

Hi @chanan, You can also add suppressHydrationWarning in the root.tsx to suppress this warning.

export default function App() {
  return (
-    <html lang='en'>
+    <html lang='en' suppressHydrationWarning={true}>
      <head>
  ...

kentcdodds · 2022-01-12T15:18:57Z

I'd strongly recommend against suppressing all warnings like this. It could silence actual problems. If it were me, I would disable this extension until this issue has been resolved on the extension author's side.

joanofdart · 2022-01-19T21:02:44Z

Hey all, removed react-dev-tools but I still get the warning 😢 and I don't want to supress them all as suggested by @kentcdodds

kentcdodds · 2022-01-19T21:38:43Z

@joanofdart, I don't think react devtools causes this warning. Are you sure it's not another extension that's causing it? It could also be a third party library that's modifying the DOM before React hydrates the app.

joanofdart · 2022-01-19T22:54:29Z

@kentcdodds ill disable them all and check which one is causing this 😄 thanks for the quick response tho!

slowselfip · 2022-01-22T06:49:17Z

In my case it was Apollo Client Devtools v4.0.0. Disabling it made the error message disappear, enabling it made it re-appear.

edzis · 2022-01-26T21:26:22Z

For me it was "Google Analytics Opt-out Add-on (by Google)" - https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=en

vojty · 2022-02-02T12:41:38Z

For me, it's ThreeJS Developer Tools extension for Chrome https://chrome.google.com/webstore/detail/threejs-developer-tools/ebpnegggocnnhleeicgljbedjkganaek

Elijah-trillionz · 2022-03-16T12:40:02Z

In my case, it's the video.js library and I need it

kush-daga · 2022-03-22T13:52:48Z

I also receive this warning if I try to add a third-party script in the Remix app using <script> tag in the body. Is there a better way to go about this, loading third-party scripts? Maybe I missed it in the docs.

github-actions · 2022-04-07T16:00:12Z

🤖 Hello there,

We just published version v1.3.5 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

corgipower · 2022-04-24T20:00:52Z

I'm getting this as well, on remix 1.4.1.
For me, it's coming from a disable autoplay extension, but I don't get this warning in apps built with other frameworks.

eric-burel · 2022-05-04T14:58:32Z

Hi, why is this issue closed? I understand that the issue is probably not on Remix yet it's expected to have extensions injecting scripts in apps, I am not sure why we get this warning. Could it be at least more explicit (for instance having a bit more info about the script to quickly tell which one is responsibile)?

kentcdodds · 2022-05-04T15:11:03Z

The warning you see is coming from React, not Remix. So there's literally nothing Remix can do for you here. You'll want to open an issue on React if you want to improve the error message.

arnaudambro · 2022-05-15T18:46:59Z

Hello !
In my case, I'm not seeing it with Chrome and Firefox, but with Safari I do, where I installed the extension Google Analytics Opt-out Browser add-on. If I disable that extension, no more warning.

found here remix-run/remix#1077 (comment)

alexmacarthur · 2022-08-09T02:52:55Z

Disabling the Apollo Client Devtools extension fixed the issue for me. 👍

jjhiggz · 2022-09-04T21:20:13Z

Disabling the Apollo Client Devtools extension fixed the issue for me. 👍

SAME

MrSiby · 2022-09-30T11:30:49Z

Hello ! In my case, I'm not seeing it with Chrome and Firefox, but with Safari I do, where I installed the extension Google Analytics Opt-out Browser add-on. If I disable that extension, no more warning.

This plugin was also the cause of the issue for me.

VeelongGit · 2023-01-07T15:22:03Z

Just reporting seeing this issue with Adobe Acrobat: PDF edit, convert, sign tools Chrome extension

heydavee · 2023-04-15T16:27:02Z

For me it was a coupon extension. Never would have thought about it.
To my german friends: Try to disable the Shoop extension.

m-alva · 2023-04-26T04:20:56Z

I have the same problem with newrelic.getBrowserTimingHeader, Newrelic browser agent

amodanov · 2023-06-14T13:18:17Z

I am experiencing an issue where the __staticRouterHydrationData is not present in the final server-rendered version of my application, despite being generated during the server-side rendering process.

<div id="react-app">
    <div class="page">.......</div>
    <script nonce="........">
        window.__staticRouterHydrationData = JSON.parse("{\"loaderData\":{\"0\":null,\"0-0\":null},\"actionData\":null,\"errors\":null}");
    </script>
</div>

This script tag, specifically for __staticRouterHydrationData, is available when generated on the server. However, it mysteriously disappears in the final version.

Has anyone else encountered a similar problem, or perhaps could provide insight on why this might be happening?

gavriguy · 2023-06-19T13:49:02Z

In my case, it's the video.js library and I need it

Hi @Elijah-trillionz did you manage to run videojs on remix without getting those errors?

kiliman · 2023-06-19T14:25:24Z

@gavriguy when trying to import a package that doesn't support SSR, the typical solution is to re-export the component from a *.client.tsx file. Then wrap in <ClientOnly> from remix-utils.

// components/video.js.client.tsx
import videojs 'video.js'

export const VideoJS = (props) => {
  // from https://videojs.com/guides/react/
  // ...
}
export default VideoJS

// routes/video.tsx
import VideoJS from '~/components/video.js.client'
import { ClientOnly } from 'remix-utils'

export default Component() {
  return (
    <ClientOnly>
      {() => <VideoJS />
    </ClientOnly>
  )
}

gavriguy · 2023-06-19T14:50:28Z

Hi @kiliman thanks for your answer. That's exactly what I did but I still get errors:

kiliman · 2023-06-19T15:04:02Z

@gavriguy Hmm.. Here's a working ⚡️stackblitz

https://stackblitz.com/edit/remix-run-remix-c7dobq?file=app%2Froutes%2F_index.tsx

gavriguy · 2023-06-19T15:25:14Z

Thanks it is working :) but there are still errors in the console log:

kiliman · 2023-06-19T15:47:43Z

Hydration issues occur when code outside of your app modifies the DOM. This is typically caused by browser extensions. There are workarounds like https://github.com/kiliman/remix-hydration-fix. The next version of React will minimize these hydration errors. You can verify by installing react@canary.

gavriguy · 2023-06-19T16:03:36Z

Thanks for you help much appreciated.

I gave your solution a try and it works without any errors. Cheers :)

amodanov · 2023-06-19T16:07:15Z

I am experiencing an issue where the __staticRouterHydrationData is not present in the final server-rendered version of my application, despite being generated during the server-side rendering process.
<div id="react-app">
    <div class="page">.......</div>
    <script nonce="........">
        window.__staticRouterHydrationData = JSON.parse("{\"loaderData\":{\"0\":null,\"0-0\":null},\"actionData\":null,\"errors\":null}");
    </script>
</div>
This script tag, specifically for __staticRouterHydrationData, is available when generated on the server. However, it mysteriously disappears in the final version.

Has anyone else encountered a similar problem, or perhaps could provide insight on why this might be happening?

It seems that I have resolved my issue by using suppressHydrationWarning, but I'm unsure whether this is a good solution or simply a workaround.

Is this behavior expected and should it work correctly in React version 17?

<React.Fragment>
    <Provider store={store}>
        <RouterProvider router={router} fallbackElement={null} />
    </Provider>

    <SuppressScriptHydrationWarning />
</React.Fragment>

export const SuppressScriptHydrationWarning = () => {
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
    }, []);

    return isClient ? null : <script suppressHydrationWarning={ true } />;
};

Mihai-github · 2023-09-07T07:08:52Z

Hey, I have a html template that I have to move to Remix.js witch includes many js files, from libraries like bootstrap to custom js, but when I put them into the public folder and try to include them into the root.tsx file I see in the server console errors regarding route not found plus on the client hydration issues and also the ui for a second has a flicker but the js is not working...

Is this something that is not supported or I don't know?

chanan added the bug Something isn't working label Dec 16, 2021

Glup3 mentioned this issue Dec 20, 2021

[Bug]: Warning: Did not expect server HTML to contain a <div> in <html>. #1158

Closed

12 tasks

wesleybb mentioned this issue Dec 21, 2021

Did not expect server HTML to contain a <script> in <html>. #1176

Closed

12 tasks

yesmeck mentioned this issue Jan 12, 2022

[Bug]: "Warning: Did not expect server HTML to contain a <script> in <html>." #1463

Closed

12 tasks

machour added docs and removed bug Something isn't working labels Mar 17, 2022

machour changed the title ~~[Bug]: Did not expect server HTML to contain a <script> in <html>~~ [Docs]: Did not expect server HTML to contain a <script> in <html> Mar 17, 2022

machour mentioned this issue Mar 18, 2022

[Bug]: Live Reload not working. #1601

Closed

machour mentioned this issue Apr 7, 2022

docs(gotcha): Add an entry about hydration warnings #2682

Merged

2 tasks

kentcdodds closed this as completed in #2682 Apr 7, 2022

guidefari added a commit to guidefari/remixgoose that referenced this issue Jul 17, 2022

fix: browser was throwing error

4e049f3

found here remix-run/remix#1077 (comment)

dr3 mentioned this issue Aug 18, 2022

[React 18] hydrateRoot(document, <RemixBrowser />) causes app crash with any scripts that modified DOM before hydration #2947

Closed

clgeoio mentioned this issue Jan 24, 2023

styled-components fails in Facebook and TikTok browser #5144

Closed

CodFrm mentioned this issue Mar 29, 2023

划词翻译会导致用了 react SSR(Server-side rendering) 的网站无法正常运行 hcfyapp/crx-selection-translate#1689

Open

Pickra mentioned this issue Aug 5, 2023

Hydration Error... React 18 issue? forge42dev/react-router-devtools#40

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Docs]: Did not expect server HTML to contain a <script> in <html> #1077

[Docs]: Did not expect server HTML to contain a <script> in <html> #1077

chanan commented Dec 16, 2021 •

edited by machour

Loading

girishk21 commented Dec 16, 2021 •

edited

Loading

iwfan commented Jan 7, 2022

kentcdodds commented Jan 12, 2022

joanofdart commented Jan 19, 2022

kentcdodds commented Jan 19, 2022

joanofdart commented Jan 19, 2022

slowselfip commented Jan 22, 2022

edzis commented Jan 26, 2022

vojty commented Feb 2, 2022

Elijah-trillionz commented Mar 16, 2022

kush-daga commented Mar 22, 2022

github-actions bot commented Apr 7, 2022

corgipower commented Apr 24, 2022

eric-burel commented May 4, 2022

kentcdodds commented May 4, 2022

arnaudambro commented May 15, 2022

alexmacarthur commented Aug 9, 2022

jjhiggz commented Sep 4, 2022

MrSiby commented Sep 30, 2022

VeelongGit commented Jan 7, 2023

heydavee commented Apr 15, 2023

m-alva commented Apr 26, 2023

amodanov commented Jun 14, 2023

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023 •

edited

Loading

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023

gavriguy commented Jun 19, 2023

amodanov commented Jun 19, 2023 •

edited

Loading

Mihai-github commented Sep 7, 2023

[Docs]: Did not expect server HTML to contain a <script> in <html> #1077

[Docs]: Did not expect server HTML to contain a <script> in <html> #1077

Comments

chanan commented Dec 16, 2021 • edited by machour Loading

What version of Remix are you using?

What version of Node are you using? Minimum supported version is 14.

Steps to Reproduce

Expected Behavior

Actual Behavior

girishk21 commented Dec 16, 2021 • edited Loading

iwfan commented Jan 7, 2022

kentcdodds commented Jan 12, 2022

joanofdart commented Jan 19, 2022

kentcdodds commented Jan 19, 2022

joanofdart commented Jan 19, 2022

slowselfip commented Jan 22, 2022

edzis commented Jan 26, 2022

vojty commented Feb 2, 2022

Elijah-trillionz commented Mar 16, 2022

kush-daga commented Mar 22, 2022

github-actions bot commented Apr 7, 2022

corgipower commented Apr 24, 2022

eric-burel commented May 4, 2022

kentcdodds commented May 4, 2022

arnaudambro commented May 15, 2022

alexmacarthur commented Aug 9, 2022

jjhiggz commented Sep 4, 2022

MrSiby commented Sep 30, 2022

VeelongGit commented Jan 7, 2023

heydavee commented Apr 15, 2023

m-alva commented Apr 26, 2023

amodanov commented Jun 14, 2023

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023 • edited Loading

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023

gavriguy commented Jun 19, 2023

kiliman commented Jun 19, 2023

gavriguy commented Jun 19, 2023

amodanov commented Jun 19, 2023 • edited Loading

Mihai-github commented Sep 7, 2023

chanan commented Dec 16, 2021 •

edited by machour

Loading

girishk21 commented Dec 16, 2021 •

edited

Loading

kiliman commented Jun 19, 2023 •

edited

Loading

amodanov commented Jun 19, 2023 •

edited

Loading