next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Published 20 hours ago • verified publisher icon vercel

Wrapping codes into <React.Fragment> didn't work

Open vespaiach opened this issue 2 years ago • 2 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #43-Ubuntu SMP Wed Jun 15 12:54:21 UTC 2022
Binaries:
  Node: 18.2.0
  npm: 8.9.0
  Yarn: N/A
  pnpm: 7.4.1
Relevant packages:
  next: 12.2.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I had my code to check whether a certain env variables set or not before including <Script> tags in <Head> section in _document file, and because there were more than one Script tag, so I wrapped them with one React.Fragment tag. After that, my code didn't work, those Script tags weren't loaded.

class MyDocument extends Document {
    render() {
        return (
            <Html lang="en" className="scroll-smooth">
                <Head>
                    <link rel="stylesheet" href="/main.css" />
                    {process.env.NEXT_PUBLIC_GTAG_ID && (
                        <>
                            <Script
                                strategy="beforeInteractive"
                                src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GTAG_ID}`}
                            />
                            <Script
                                strategy="beforeInteractive"
                                dangerouslySetInnerHTML={{
                                    __html: `
                                        window.dataLayer = window.dataLayer || [];
                                        function gtag(){dataLayer.push(arguments);}
                                        gtag('js', new Date());
                                        gtag('config', '${process.env.NEXT_PUBLIC_GTAG_ID}');
                                    `,
                                }}
                            />
                        </>
                    )}
                </Head>
                <body className="bg-white text-gray-500 antialiased dark:bg-gray-900 dark:text-white">
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

Expected Behavior

According to the document. Wrapping Script tags into one level of <React.Fragment> should work.

Link to reproduction

https://github.com/vespaiach/personal_website/blob/2a76d9f9196901bf844623192cd238da373a489c/pages/_document.tsx

To Reproduce

You can check out my repository with commit id: 2a76d9f9196901bf844623192cd238da373a489c for the bug reproducing

vespaiach avatar Jul 01 '22 17:07 vespaiach

Hi @vespaiach, I've added the scripts for gtm as following:

Screenshot 2022-07-01 at 22 28 51

For your code:

      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GTAG_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${process.env.NEXT_PUBLIC_GTAG_ID}');
        `}
      </Script>

EliseiNicolae avatar Jul 01 '22 19:07 EliseiNicolae

I think this is related to https://github.com/vercel/next.js/issues/3399.

If I have meta tags in a fragment like <> then they are not rendering correctly. If I inspect the page, I can see the tags... but if I open dev tools and write this I can't find them:

document.querySelectorAll("head meta").forEach( m => console.log(m.outerHTML))

Removing the fragment fixes it though 🙃

seanlail avatar Sep 16 '22 10:09 seanlail

Nested fragments are indeed not supported in next/head. The new App Router has built-in support for metadata which replaces next/head which doesn't have this limitation: https://beta.nextjs.org/docs/api-reference/metadata

timneutkens avatar Feb 28 '23 12:02 timneutkens

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

github-actions[bot] avatar Mar 31 '23 00:03 github-actions[bot]