Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`next/script` not working in custom `Document` when outside of `next/document`'s `<Head>`

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
  Node: 16.15.0
  npm: 8.12.2
  Yarn: 1.22.18
  pnpm: 7.2.1
Relevant packages:
  next: 12.1.7-canary.40
  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)

next start

Describe the Bug

I am trying to get <Script strategy="beforeInteractive" /> to work, I did exactly what the docs say, but the script is not present in the built index.html nor working in next dev.

Expected Behavior

<Script strategy="beforeInteractive" /> to work.

To Reproduce

Initialize a next project
Add the example code from the docs in _document.js
Run and check DevTools > Network
No request will be found to https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js

Or from a shell terminal:

cd /tmp && npx create-next-app tmp && cd tmp
tee pages/_document.js <<'EOF' >/dev/null
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script
          src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}
EOF
yarn add next@canary && yarn dev

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5

Top GitHub Comments

6reactions

housseindjirdehcommented, Jun 16, 2022

There’s an issue currently that requires beforeInteractive scripts to live inside <Head> in _document.js:

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
       <Script
         src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
         strategy="beforeInteractive"
       ></Script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

I’ll submit a PR next week that removes this restriction and allow you to place <Script> anywhere in _document.js, but you can move it to <Head> for the meantime to make it work 😃

2reactions

housseindjirdehcommented, Jun 16, 2022

@aboqasem Go for it! I was meaning to work on it next week but will be glad to help you and review your PR instead 😃