next/script using beforeInteractive strategy don't work with alert #26343

dudusotero · 2021-06-18T21:59:00Z

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.

The text was updated successfully, but these errors were encountered:

balazsorban44 · 2021-06-19T07:22:06Z

The docs says it shouldn't be used inside _document

https://nextjs.org/docs/basic-features/script

haven't tried _app

prichodko · 2021-06-19T17:01:45Z

@balazsorban44 is correct regarding the _document usage.

There is an issue, however, with a next/script used as a children or through dangerouslySetInnerHTML and beforeInteractive strategy.

In this case the value of src is (unknown):

The issue seems to be that renderToStaticHTMLMarkup renders the scriptLoader object as it is, not handling it similarly to this block of code.

prichodko · 2021-06-19T17:07:10Z

Related: #26240

janicklas-ralph · 2021-08-17T16:50:05Z

Hi. Apologize for the delayed response. An update on this - It was intentional to not allow inline scripts with beforeInteractive since we noticed it hurt performance. I'm working on adding another strategy to load inline scripts with beforeInteractive.

zmarty · 2021-08-19T00:32:12Z

Thanks, we need this to load the Application Insights JS SDK

prichodko · 2021-08-19T08:14:18Z

@janicklas-ralph thanks for the heads-up.

My initial idea was to insert a simple code that checks for the presence of the authentication token. But then I had a moment of realization. Isn't inline script together with beforeInteractive strategy same as this code?

<Head>
  <script dangerouslySetInnerHTML={{
    __html: ` // code here`
  }}
  />
<Head />

prichodko · 2021-08-19T08:18:56Z

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

durdenx · 2021-09-07T09:25:35Z

Is next/script working in _app ?

balazsorban44 · 2021-09-07T09:31:29Z

Per the docs, _app is fine:

Note:
next/script must not be placed in either a next/head component or in pages/_document.js.

https://nextjs.org/docs/basic-features/script#usage

RyanClementsHax · 2021-10-30T00:40:34Z

Per the docs, _app is fine:

Note:
next/script must not be placed in either a next/head component or in pages/_document.js.

https://nextjs.org/docs/basic-features/script#usage

@durdenx _app is fine, although be aware of rehyrdation errors as the code that gets interpolated into the script may differ between client and server.

RyanClementsHax · 2021-10-30T00:49:04Z

@janicklas-ralph thanks for the heads-up.

My initial idea was to insert a simple code that checks for the presence of the authentication token. But then I had a moment of realization. Isn't inline script together with beforeInteractive strategy same as this code?
<Head>
  <script dangerouslySetInnerHTML={{
    __html: ` // code here`
  }}
  />
<Head />

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

Funny enough you should mention it, this is exactly the use case and strategy that Josh Comeau writes about in his article on how to achieve the perfect dark theme, and how Brian Lovin implemented this technique in his personal site which is written using nextjs

Side note: if anyone is happening to stumble on this looking to load scripts before interactive using this component, it seems to not work on version 12 of next either.

imsamad · 2021-11-16T14:44:03Z

It would not work , bcoz in inline Script only "lazyOnload" and afterInteractive" strategies are are allowed .

mishrsoumitra · 2022-01-06T00:50:46Z

Should this not be added to the docs that dangerouslySetInnerHTML does not work with beforeInteractive strategy?

MincePie · 2022-02-24T07:33:37Z

Where do I put scripts if I can't put them in _document?

prichodko · 2022-02-24T14:16:45Z

Wherever you want. If you need it on every page, then _app.

MincePie · 2022-02-24T20:43:05Z

Does it go inside the head tag of _app?

prichodko · 2022-02-24T23:14:04Z

Nope, this should work:

import Script from 'next/script'

export default function App() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
      <h1>Hello, world!</h1>
    </>
  )
}

…eforeInteractive` strategies (#36364) Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies. - fixes #36318 - fixes #26343 - fixes #26591 - fixes #26343 - fixes #26240 Co-authored-by: Janicklas Ralph <6142074+janicklas-ralph@users.noreply.github.com>

xd-hearst · 2022-05-21T02:11:57Z

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

martinnabhan · 2022-06-09T05:42:23Z

We have the same issue. As soon as we moved our next/script polyfills to _document we started catching errors from our users. Moving the script tags back to _app solved it.

firebirdsonic · 2022-06-11T16:56:02Z

Same

We have the same issue. As soon as we moved our next/script polyfills to _document we started catching errors from our users. Moving the script tags back to _app solved it.

Same here. The script doesn't load and doesn't appear in the dom when the script is used in _document. I tried it with the example nextjs app and add the code they used on their site.

balazsorban44 · 2022-06-14T11:59:11Z

Please try the next@canary release. If you still see this issue, please open an issue with a reproduction.

aboqasem · 2022-06-16T06:04:29Z

Hi @balazsorban44, here is an issue regarding the problem #37741

xd-hearst · 2022-06-16T06:09:04Z

Sorry for saying this, but I think it is bad that next js official doc continues to leave the non-working/erroneous example out there. Knowingly.

balazsorban44 · 2022-06-16T10:00:39Z

Sorry for the confusion here, let me try to explain.

Yes, the narrative has changed, when using Script together with the beforeInteractive strategy, it should now be placed in _document. (Reflected in the docs now, and explained why. Please see https://nextjs.org/docs/basic-features/script#beforeinteractive.)

The way it currently works is only if you put Script in Head. There is a known issue when Script is in Body as pointed out #26343 (comment)

We are aware of that, please see: #37741 (comment), and going to fix this soon!

Hope that helps! 💚

rmuratov · 2022-06-21T11:28:25Z

Yes, the narrative has changed, when using Script together with the beforeInteractive strategy, it should now be placed in _document. (Reflected in the docs now, and explained why. Please see https://nextjs.org/docs/basic-features/script#beforeinteractive.)

The way it currently works is only if you put Script in Head. There is a known issue when Script is in Body as pointed out #26343 (comment)

Is that correct only for canary? We are at 12.0.4 right now and it seems not to work as said.

upd: For us it doesn't work in canary either. Will try something else...

balazsorban44 · 2022-06-22T12:16:30Z

@rmuratov please create an issue with a reproduction and we can have a look! 🙏

andrewfritz86 · 2022-06-22T19:17:14Z

This is working perfectly now for me in at 12.1.7-canary.44. Would highly recommend throwing something in the official documentation to highlight that the Script component in the _document does not work as described in the current stable release.

timneutkens · 2022-06-29T11:22:58Z

12.2 is out since yesterday!

github-actions · 2022-07-29T12:07:30Z

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.

dudusotero added the bug Issue was opened via the bug report template. label Jun 18, 2021

prichodko mentioned this issue Jun 19, 2021

(next/script): Omit src for children and dangerouslySetInnerHTML props #26367

Closed

janicklas-ralph self-assigned this Aug 17, 2021

timneutkens added the Script (next/script) Related to Next.js Script Optimization. label Nov 19, 2021

balazsorban44 removed the bug Issue was opened via the bug report template. label Jan 11, 2022

This was referenced Jan 11, 2022

Add onLoad gottcha note to next/script docs #33097

Merged

next/script does not trigger onLoad callback when used with beforeInteractive strategy #33191

Closed

balazsorban44 mentioned this issue Feb 20, 2022

Allow inline-scripts with beforeInteractive strategy #34610

Closed

janicklas-ralph mentioned this issue Apr 25, 2022

Adds inline script functionality to next/script for worker and beforeInteractive strategies #36364

Merged

kodiakhq bot closed this as completed in #36364 Apr 29, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jul 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next/script using beforeInteractive strategy don't work with alert #26343

next/script using beforeInteractive strategy don't work with alert #26343

dudusotero commented Jun 18, 2021

balazsorban44 commented Jun 19, 2021

prichodko commented Jun 19, 2021 •

edited

Loading

prichodko commented Jun 19, 2021

janicklas-ralph commented Aug 17, 2021

zmarty commented Aug 19, 2021

prichodko commented Aug 19, 2021 •

edited

Loading

prichodko commented Aug 19, 2021

durdenx commented Sep 7, 2021

balazsorban44 commented Sep 7, 2021

RyanClementsHax commented Oct 30, 2021

RyanClementsHax commented Oct 30, 2021

imsamad commented Nov 16, 2021

mishrsoumitra commented Jan 6, 2022

MincePie commented Feb 24, 2022

prichodko commented Feb 24, 2022

MincePie commented Feb 24, 2022

prichodko commented Feb 24, 2022

xd-hearst commented May 21, 2022 •

edited

Loading

martinnabhan commented Jun 9, 2022

firebirdsonic commented Jun 11, 2022 •

edited

Loading

balazsorban44 commented Jun 14, 2022

aboqasem commented Jun 16, 2022

xd-hearst commented Jun 16, 2022

balazsorban44 commented Jun 16, 2022

rmuratov commented Jun 21, 2022 •

edited

Loading

balazsorban44 commented Jun 22, 2022

andrewfritz86 commented Jun 22, 2022

timneutkens commented Jun 29, 2022

github-actions bot commented Jul 29, 2022

next/script using beforeInteractive strategy don't work with alert #26343

next/script using beforeInteractive strategy don't work with alert #26343

Comments

dudusotero commented Jun 18, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

balazsorban44 commented Jun 19, 2021

prichodko commented Jun 19, 2021 • edited Loading

prichodko commented Jun 19, 2021

janicklas-ralph commented Aug 17, 2021

zmarty commented Aug 19, 2021

prichodko commented Aug 19, 2021 • edited Loading

prichodko commented Aug 19, 2021

durdenx commented Sep 7, 2021

balazsorban44 commented Sep 7, 2021

RyanClementsHax commented Oct 30, 2021

RyanClementsHax commented Oct 30, 2021

imsamad commented Nov 16, 2021

mishrsoumitra commented Jan 6, 2022

MincePie commented Feb 24, 2022

prichodko commented Feb 24, 2022

MincePie commented Feb 24, 2022

prichodko commented Feb 24, 2022

xd-hearst commented May 21, 2022 • edited Loading

martinnabhan commented Jun 9, 2022

firebirdsonic commented Jun 11, 2022 • edited Loading

balazsorban44 commented Jun 14, 2022

aboqasem commented Jun 16, 2022

xd-hearst commented Jun 16, 2022

balazsorban44 commented Jun 16, 2022

rmuratov commented Jun 21, 2022 • edited Loading

balazsorban44 commented Jun 22, 2022

andrewfritz86 commented Jun 22, 2022

timneutkens commented Jun 29, 2022

github-actions bot commented Jul 29, 2022

prichodko commented Jun 19, 2021 •

edited

Loading

prichodko commented Aug 19, 2021 •

edited

Loading

xd-hearst commented May 21, 2022 •

edited

Loading

firebirdsonic commented Jun 11, 2022 •

edited

Loading

rmuratov commented Jun 21, 2022 •

edited

Loading