Next.js Discord

Discord Forum

Text content does not match server-rendered HTML.

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
i'm trying to use a script tag to load content from a crm but it's throwing this error, Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

i tried using " use client ", making the script on a useEffect and nothing works, with one of the differents options i tried i managed to get the error gone but the script doesn't work, anyone please can help me out or guide me on what i could be doing wrong, thanks in advance ❤️

105 Replies

export default function Contact() {
  return (
    <main>
      <Hero />
      <Section1 />

      <Script id="test" type="text/javascript">
        {`daysmart_acc = "43b2d06a-8d25-4544-ae3c-4ff904107c95";
        daysmart_iframe_width = 1000; daysmart_iframe_height = 600;
        daysmart_website_root = "https://plugin.mysalononline.com";
        load_in_iframe = "false";`}
      </Script>
      <Script
        type="text/javascript"
        src="https://plugin.mysalononline.com/Scripts/external/bookingplugin.js"
      ></Script>
    </main>
  );
}
this is the code
i just changeed a few values
so based on the documentation this should work without problems but is not, but this same snippet if i pasted on a regular html file works like charm
B33fb0n3
@American black bear can you share a screenshot of the full hydration error?
American black bearOP
@American black bear Click to see attachment
B33fb0n3
is you component Contact handled clientside?
American black bearOP
yes
i created a component to make that component exactly use client
@American black bear Click to see attachment
B33fb0n3
move the scripts to the serverside. There is no need that they are clientside and you can get hydration errors (as you just saw), when you using client components
i just deleted the use client
what does feel weird to me is that nextjs changes " to &quot
@American black bear but i still get the hydration error
B33fb0n3
the Test component my be inside another client component or maybe that one have a parent that have is a client component or something. When it was fully rendered on the server there shouldnt be a hydration error
American black bearOP
no theres no client component
where i'm using that component it's at the page.tsx and it's server side
or at least doens't have the use client
@B33fb0n3 the `Test` component my be inside another client component or maybe that one have a parent that have is a client component or something. When it was fully rendered on the server there shouldnt be a hydration error
American black bearOP
and it's a weird way of working, nextjs advices to use the Script tag and using that one doesn't do anything
@American black bear and it's a weird way of working, nextjs advices to use the Script tag and using that one doesn't do anything
B33fb0n3
when using the Script tag it's optimized under the hood. The script tags then will be automatically moved inside the head for example.

Can you provide a repro of the issue via github or https://codesandbox.io/ ?
@American black bear Mmm codesandbox works better for you?
B33fb0n3
yea, when you provide your github repo, I would just open it via codesandbox, as I don't need to install anything on my machine and can directly see and resolve the issue
i'm not sure if i did it correctly
my first time using codesandbox xd
i just used a template they provided and pasted the snippet there
B33fb0n3
@American black bear thanks for sharing. You set up the code correctly 👏
However, I don't see any hydration errors... how to reproduce the issue?
@B33fb0n3 <@107534683872436224> thanks for sharing. You set up the code correctly 👏 However, I don't see any hydration errors... how to reproduce the issue?
American black bearOP
if you want try it locally, just spin up a nextjs project and paster the two script tags
it doesn't need any dependecies at all because it's a iframe that it's getting rendered there
B33fb0n3
No, I checked the full page: https://hwq7sq-3000.csb.app/
American black bearOP
Mmmm give me a second
well the error it's not getting triggered there
ah check the console
but for some reason it's not doing the hydration error
@American black bear Click to see attachment
B33fb0n3
that looks more like an error from the third party and not from you 🤔
@B33fb0n3 that looks more like an error from the third party and not from you 🤔
American black bearOP
nono but on a regular html file works perfectly
let me show you
actually let see if i can show you on the sandbox
i see, it's codesandbox the one blocking the loading
oh no wait i think i know whats the error XD
see how it works on a regular html?
@American black bear https://l96p6s.csb.app/
B33fb0n3
I am not allowed to view this file:
try now
forgot to make it public
so it's the same two scripts, just that on nextjs i need to format it different
B33fb0n3
It looks like your issue is not reproduceable for me, as you saw here: https://nextjs-forum.com/post/1329917172612337735#message-1330916508779413514 <--- click
Without a reproduceable issue, I can't help you
American black bearOP
have you try it locally or outside of codesandbox?
inside of codesandbox it doesn't do the hydration error
@American black bear inside of codesandbox it doesn't do the hydration error
B33fb0n3
when it doesnt throw the hydration error inside the codesandbox, it won't on my machine as well
American black bearOP
yeah it does i just tried it
i got a laptop where i tried it
let me make a new repo so you can see it
Dwarf Hotot
When you use this script in normal html where it worked, is it coming in iframe element or a div element.cab you share me the render html of working of this script
@B33fb0n3 when it doesnt throw the hydration error inside the codesandbox, it won't on my machine as well
American black bearOP
hey sorry you were right, it's reproducible on next v14, i'm chaning the version
https://4hlzxs-3000.csb.app
@B33fb0n3 when it doesnt throw the hydration error inside the codesandbox, it won't on my machine as well
American black bearOP
heres the reproduced error
the div with the id externalBookingPlugincontainer it's not mine, that's from the embed
so it is like a mix of both?
@American black bear heres the reproduced error
B33fb0n3
thanks for sharing. Can you upgrade to next15?
As you can see, this looks like a nextjs issue, because upgrading to next15 solved the issue. See here: https://codesandbox.io/p/github/JerryMalloney/test-error/csb-9vdslx/draft/boring-nightingale?import=true
Dwarf Hotot
So here is the solution you can directly use the iframe from here and paste it in nextjs
Just change the height and width value to the value you given in the script you are using in Nextjs
@Dwarf Hotot So here is the solution you can directly use the iframe from here and paste it in nextjs
American black bearOP
so do i copy the iframe element?
Dwarf Hotot
Yes
Just the iframe just change the value of. The width and height
American black bearOP
well it gives me this error
@B33fb0n3 https://codesandbox.io/p/github/JerryMalloney/test-error/main?import=true heres the link btw
Dwarf Hotot
Shareme the iframe code
@Dwarf Hotot Shareme the iframe code
American black bearOP
      <iframe
        id="externalBookingPlugin"
        className="w-full min-h-[600px] overflow-auto max-h-[900px]"
        src="https://plugin.mysalononline.com/External/BookingPlugin/?guid=44b2d06a-8d25-4544-ae3c-4ff904107c95"
        scrolling="yes"
      ></iframe>
Dwarf Hotot
Change the src value with the script src value
Your second script src value
it renders this
Dwarf Hotot
Show the code
American black bearOP
<iframe
        id="externalBookingPlugin"
        className="w-full min-h-[600px] overflow-auto max-h-[900px]"
        src="https://plugin.mysalononline.com/Scripts/external/bookingplugin.js"
        scrolling="yes"
      ></iframe>
Dwarf Hotot
Wait just going home
@Dwarf Hotot Wait just going home
American black bearOP
oh i noticed something
Dwarf Hotot
Is this zoho crm
American black bearOP
it blocked me out for trying to many times
@Dwarf Hotot Is this zoho crm
American black bearOP
no, days smart salon
but i tried a vpn and now its showing this
Dwarf Hotot
Don't worry just wait till I reach home
American black bearOP
why is next so complicated with these things XD
Dwarf Hotot
hey lets solve this
days smart salon what is this
@Dwarf Hotot hey lets solve this
American black bearOP
hey i managed to solve it with your idea
so i pretty much got the working link from their webiste and embed it in ours with the iframe
Dwarf Hotot
its great
American black bearOP
used a different link but yeah the idea it's the same as you guided me
thanks so much
Dwarf Hotot
welcome
American black bearOP
@B33fb0n3 ty so much for you help aswell
@American black bear <@301376057326567425> ty so much for you help aswell
Dwarf Hotot
hey @American black bear what is your profile