#Correct usage of <Script> inside root layout

10 messages · Page 1 of 1 (latest)

little fable
#

Hello,

I added a script to my root layout according to the documentation, but I'm getting an error. Do i need to create a separate <Head> tag and put the script there?

hook.js:608 Warning: Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag. Error Component Stack

on-recoverable-error.js:20 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html
      className={robotoFlex.className}
      suppressHydrationWarning={true}>
      
      <body
        className='bg-sc-light-bg text-foreground'
        suppressHydrationWarning={true}>
        <Providers>
          <Navbar />
          <GlobalLoader />
          {children}
        </Providers>
      </body>
<Script
        src={`https://cdn-cookieyes.com/client_data/${COOKIEYES_ID ?? ''}/script.js`}
        strategy='beforeInteractive'
      />
    </html>
  )
}
fervent walrusBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

white cargo
#

is that your entire root layout file? be sure you've imported Script import Script from 'next/script'

little fable
white cargo
#

hmm... yeah, I can't find anything in the docs about it.

long lance
white cargo
#

Also, are you using <head> or anything like Helmet anywhere?

#

From this github issue, it seems like <head> should not be used in nextjs at all, and you should use APIs like next/script or the built in SEO features instead.