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 using beforeInteractive strategy don't work with alert

See original GitHub issue

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

14.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

When I try to add next/script into “_document” or “_app” files calling a inline alert function, don’t work using beforeInteractive strategy, but when I don’t explicitly inform a strategy value, it works.

Expected Behavior

Should work with beforeInteractive strategy inside _document.js or _app.js.

To Reproduce

Just add <Script strategy="beforeInteractive">{`alert('Not work')`}</Script> to _document.js or _app.js, and try to run with next build && next start.

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:29 (15 by maintainers)

Top GitHub Comments

15reactions

xd-hearstcommented, May 21, 2022

seems the narrative has changed regarding this in the doc: https://nextjs.org/docs/basic-features/script#beforeinteractive

It is stated that:

This strategy only works inside _document.js

However, if you try with their example, it does not work at all:

// In _document.js
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>
  )
}

Put it in the app does work.

I am curious why

8reactions

prichodkocommented, Aug 19, 2021

Another use-case is a code that detects user selected light / dark theme, to avoid flickering on the first load.