Script tag not working #35064

bamjad · 2022-03-04T10:26:22Z

bamjad
Mar 4, 2022

Verify canary release

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

Provide environment information

Script tag is not loading external javascripts. No matter where i place the tag. _app.js or anywhere else.

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Dev

Describe the Bug

Script tag is not loading external javascripts. No matter where i place the tag. _app.js or anywhere else.

Create a simple page
Import script/next
Use any third party js like feather icons.
Use google developer tools to check if script is loaded.

Expected Behavior

Script should be loaded

To Reproduce

Create a simple page
Import script/next
Use any third party js like feather icons.
Use google developer tools to check if script is loaded.

balazsorban44 · 2022-03-05T04:27:12Z

balazsorban44
Mar 5, 2022
Maintainer

Please read the docs: https://nextjs.org/docs/api-reference/next/script#onload

2 replies

ardok Jul 5, 2022

I'm facing the same issue. This is not about onload callback.

// _document.js

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
import React from "react";

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" onLoad={() => console.log('hey')} />
        <Script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" />
      </body>
    </Html>
  )
}

hey doesn't get printed. And the script itself is nowhere to be found on the rendered element.

Though it works inside _app.js for me. I just started with Next.js, maybe my understanding of _document.js is completely wrong.

icyJoseph Jul 5, 2022

Hi,

In _document you cannot have event listeners, because it is evaluated on the server.

valcosmos · 2022-07-05T02:32:16Z

valcosmos
Jul 5, 2022

Recently, I encountered a similar problem, but I solved it with a native script.

It seems to work.

import { Html, Head, Main, NextScript } from 'next/document'
import React from 'react'

export default function Document() {
  return (
    <Html>
      <Head></Head>
      <body>
        <Main />
        <NextScript />
        <script
          async
          type="module"
          src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
        />
      </body>
    </Html>
  )
}

13 replies

icyJoseph Jul 5, 2022

@valcosmos btw in your use case, with the icons, one could also load that as 'beforeInteractive' in _document to make sure they are available from the get go. It depends on the use case.

h0lme3 Jul 5, 2022

Notice the quotes around '${GOOGLE_ANALYTICS_KEY}'.

Do I need to add single quote?

I threw in a console.log to convince you 😄

I could get the result of console on my end as well.. but weird... google analytics doesnt work... :(

icyJoseph Jul 5, 2022

Single or double should be ok, it's just that you are templating the script with `` so everything has to be correct. Without quotes it'll try to look for a window variable named after your GOOGLE_ANALYTICS_KEY

mmm that's really weird.

h0lme3 Jul 5, 2022

Yes, btw thank you very much for your quick reply, @icyJoseph

theWiseAman Dec 26, 2022

Notice the quotes around '${GOOGLE_ANALYTICS_KEY}'.

Thanks mate this was really helpful.

boylec · 2022-07-15T16:03:09Z

boylec
Jul 15, 2022

None of the above has worked for my case which is very similar albeit I'm using slightly different inline javascript.

@latest version of next.

import NextDocument, { Head, Html, Main, NextScript } from "next/document";
import Script from "next/script";

type Props = {};

class Document extends NextDocument<Props> {
  render() {
    return (
      <Html lang="en-US">
        <Head />
        <body>
          <Main />
          <NextScript />
          <Script id="test" strategy="afterInteractive">
            {`
              debugger;
              `}
          </Script>
          {/* Google Tag Manager */}
          <Script id="google-tag-manager" strategy="afterInteractive">
            {`
              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=${process.env.NEXT_PUBLIC_GTM_ENV_AUTH_KEY}&gtm_preview=${process.env.NEXT_PUBLIC_GTM_PREVIEW}&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GTM_ID}');
            `}
          </Script>
          {/* Google Tag Manager (noscript) */}
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}&gtm_auth=${process.env.NEXT_PUBLIC_GTM_ENV_AUTH_KEY}&gtm_preview=${process.env.NEXT_PUBLIC_GTM_PREVIEW}&gtm_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
          />
        </body>
      </Html>
    );
  }
}

export default Document;

debugger; line does not fire in first <Script> section
google-tag-manager JS in second <Script> section is not rendered
<noscript ... /> section is rendered

Any tips?

4 replies

boylec Jul 15, 2022

Couple notes after some testing

TL; DR:

When I use "afterInteractive" strategy and place my component in some other component besides _document it gets evaluated. Otherwise it doesn't. "beforeInteractive" strategy seems to cause my Script element not to render at all because there is no HeadManagerContext defined at build time.

Any ideas why placing my component in _document would cause the "afterInteractive" effect not to fire in script.js at runtime (breakpoint at line 185 in image below)? In fact the Script component never runs a render cycle at all (let alone the useEffect for the "afterInteractive" strategy). This is not the case when placing the component somewhere besides _document.

Furthermore, should I not be able to use "beforeInteractive" strategy?

Details

I used the following trivial Script definition to test with:

<Script id="test" strategy="afterInteractive">
  {`
    debugger;
  `}
</Script>

I ran my app with the element above using different strategies and placing it at different locations in the app (in/outside of _document) and got different results.

Reference image for breakpoints (script.js in next library):

Note

I use "_document.page.tsx" instead of "_document.tsx" naming scheme (*.page.tsx for all my pages)

Tests

Conditions:

Place element in _document
- Use beforeInteractive strategy using next export or next dev
  - Build time (unexpected result occurs):
    - Expected result: _headManagerContext.HeadManagerContext is defined and one of lines 196, 206, or 208 would be hit.
    - Actual result: _headManagerContext.HeadManagerContext is undefined and none of the lines are hit, resulting in a null script (breakpoint at line 211 hit)
  - Run time result (unexpected result occurs):
    - Expected result: Script is rendered as part of the raw page and debugger; statement inside Script element breaks.
    - Actual result: Script is not rendered at all.
- Use afterInteractive strategy (next dev or next export)
  - Build time (expected result occurs): Breakpoint at 184 is hit at build time. This seems expected since its "afterInteractive" strategy nothing would get evaluated at build time.
  - Run time (unexpected result occurs):
    - Expected result: Breakpoint at line 185 hits because the effect fires.
    - Actual result: Breakpoint at line 185 never hits, and in fact no render cycle happens for the Script component at all (breakpoint at line 181 is never hit either)
Place element in some other top level component (not _app or _document). Forced to use "afterInteractive" because "beforeInteractive" is intended for SSR/build time. Using next dev or next export.
- Build time (expected result occurs): Same result as having the element in _document. (described above)
- Run time (expected result occurs): Breakpoint at line 185 hits because the effect fires. (The same expected result of placing the element in _document at runtime described above).

Summary

Unexpecteds:

Placing the element in _document w/ beforeInteractive strategy has unexpected results for both run time and build time.
Placing the element in _document w/ afterInteractive strategy has unexpected results for run time.

Can anyone speak to these unexpected results?

I.e. for bullet point 1: Is it expected that HeadManagerContext always be undefined when running next dev or next export?

For bullet point 2: Is it expected that the <Script> component itself never has a render cycle at runtime and so the effect never fires to load the script contents (whenver the <Script> is in _document)

jasiene Jul 17, 2022

Hey @boylec, I run into the same issue as you and am using version 12.2.0

For now I've stuck all of my Script components at the top of my _app.tsx and they seem to be loading appropriately. All the scripts use the afterInteractive strategy.

Unfortunately no scripts seem to load when I stick them inside my custom _document.tsx, whether that is inside of the Head or outside, just after NextScript.

GabrielLourenco Jul 18, 2022

Hello guys. I experienced this bug today, unfortunately. I my case, my script tags were inside a condition, as the image below:

As you can see, it have some scripts with a mix of strategies.

After search for a intire morning, I decide remove the condition and the react fragments. And, for my surprise, it works as expected.

I updated my application to next v12.2.2

Emiliano-Bucci Sep 21, 2022

@GabrielLourenco It seems that <Script /> doesn't work inside a fragment

cesar-ibr · 2022-08-06T18:06:07Z

cesar-ibr
Aug 6, 2022

I faced the same problem with version 12.2.1, my second script was not even rendered on the page.
What solved my issue was to set strategy="lazyOnload".

// _document.tsx
<Html>
  <Head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
  </Head>
  <body>
    <Main />
    <NextScript />

    <Script id="onload-script" strategy="afterInteractive">
      {`console.log('Hello');`}
    </Script>

    <Script
      id="analytics-script"
      src="https://static.analytics.com/101375946.js"
      strategy="lazyOnload"
    />
  </body>
 </Html>

2 replies

mikechabotcandy Sep 8, 2022

Using 12.1.6:

After encountering and attempting to debug similar issues noted by others above, I replaced my entire existing _document.tsx with the suggested approach from the docs (https://nextjs.org/docs/basic-features/script#beforeinteractive).

lodash.min.js script is never injected into the document

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

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>
  )
}

GitToby Oct 22, 2022

I wasn't able to get any beforeInteractive scripts to load, in the end I moved all my script tags to _app.jsx - pre-interactivity isn't a hard requirement for my loads so it works fine.

If beforeInteractive is a hard dep i cant help but if not, try moving the <Script/> to _app.jsx?

happylolonly · 2022-09-22T12:38:20Z

happylolonly
Sep 22, 2022

Yes, very annoying issue was, need to fix it, unclear

0 replies

spreadpando · 2022-10-22T19:19:42Z

spreadpando
Oct 22, 2022

Also experiencing this. Even following the most basic example here: https://nextjs.org/docs/basic-features/script with a custom _document.jsx beforeInteractive scripts never are appended to the head and never execute.

0 replies

negprof · 2022-11-22T11:19:21Z

negprof
Nov 22, 2022

I do have the same issue on next.js 13

0 replies

sanghunka · 2022-12-07T04:09:42Z

sanghunka
Dec 7, 2022

Same issue.

I solved this issue by using onLoad rather than dangerouslySetInnerHTML

<Script
  id="gtm"
  strategy="afterInteractive"
  // dangerouslySetInnerHTML={{ __html: `console.log('hi')`}}  //doesn't work
  onLoad={() => {
    console.log('hi') //It works
  }}
/>

1 reply

tappress Jun 10, 2023

You can't do this with server components though, since events (onLoad) are not available there.

OZZlE · 2023-07-12T07:37:22Z

OZZlE
Jul 12, 2023

        <Script
          src="/globalassets/adobe/30e54a9d6c99/28871c755140/launch-32a177491a9c.js"
          async
          strategy="afterInteractive"
          onLoad={() => {
            debugger;
          }}
        />

Does nothing, amazing this tag so well documented and works 0% of the time? :D

2 replies

icyJoseph Jul 12, 2023

In what context are you using it? Funny how it works 100% of the time for some, and it totally doesn't for others... Is this in a Server Component?

OZZlE Jul 12, 2023

  <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={props.locale}>
    <Head>
      <title>{title}</title>
      <meta name="robots" content="noindex, nofollow" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <Script src="/globalassets/adobe/30e54a9d6c99/28871c755140/launch-32a177491a9c.js" />
    </Head>

It's Adobes launch script for tracking, perhaps it collides with something this Script component tries to do? It doesn't log to console at least like it should

jesslark · 2023-08-22T20:25:02Z

jesslark
Aug 22, 2023

Similar issue in the tutorial, on this page:
https://nextjs.org/learn/basics/assets-metadata-css/third-party-javascript

I can't get the Script component to work. There is no error; nothing happens at all. I am following the tutorial on a mac, using Chrome to view the output.

To troubleshoot I:

checked the network tab and don't see the SDK
waited a "while" in case it is VERY lazy, still nothing in the network tab, and no console
reverted to the previous code to check to see if it loaded with that, and it did (the previous code was a regular lower case script tag with the same SDK link)
added a console separate from the Script tag, it did console correctly
moved the Script component to the index file, still nothing. No error, just, nothing.

Code:

import Head from "next/head"
import Link from "next/link"
import Script from "next/script"

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First POAST</title>
        <Script
          src="https://connect.facebook.net/en_US/sdk.js"
          strategy="lazyOnload"
          onLoad={() =>
            console.log(`script loaded correctly, window.FB has been populated`)
          }
        />
        {console.log("WHOA IS THIS EVEN WORKING")}
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  )
}

Dependencies include:

Node v: 20.4.0

"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
}

0 replies

maxtheaxe · 2023-08-27T22:03:56Z

maxtheaxe
Aug 27, 2023

Also not working for me. Strategy change to lazyOnload does not fix it, though usage of a native <script> tag does. It does seem to work on _document.tsx (at least with dangerouslySetInnerHTML, but in this case, I only want to load specific scripts on specific pages, which I do using <Head> in page definitions. Happy to do more testing if that would help resolve this issue.

0 replies

bezreyhan · 2023-09-21T21:02:21Z

bezreyhan
Sep 21, 2023

After running into this issue I noticed that the docs say that the Script component has to be used inside of _app:

To load a third-party script for all routes, import next/script and include the script directly in your custom _app

0 replies

maxtheaxe · 2023-09-22T03:28:39Z

maxtheaxe
Sep 22, 2023

After running into this issue I noticed that the docs say that the Script component has to be used inside of _app:

To load a third-party script for all routes, import next/script and include the script directly in your custom _app

Yes, but that's only if you want to load the script for all routes. I'm not seeing any indication that that's its exclusive functionality.

0 replies

jdgarcia · 2023-09-25T19:08:04Z

jdgarcia
Sep 25, 2023

Not sure if this is related but I have a <Script strategy='beforeInteractive' src='/js/context.js' /> in app/layout.ts and the request for it gets cancelled on some (but not all) pages.

0 replies

bilalbutt044 · 2023-11-14T09:53:49Z

bilalbutt044
Nov 14, 2023

i am having same issue in nextjs version 12.1.6 . Nextjs's <Script /> tag is not loading in _document.js file. i have to use native <script/> tag or put <Script /> component in _app.js file.

NOTE: Nexjts recommend not to use <Script /> in _document.js file as _document.js file runs on server and <Script /> tag contains Frontend functionality
https://nextjs.org/docs/messages/no-script-in-document

0 replies

Armadillidiid · 2023-12-11T17:13:08Z

Armadillidiid
Dec 11, 2023

adding beforeInteractive as the strategy worked for me.

0 replies

theisof · 2024-08-21T20:11:51Z

theisof
Aug 21, 2024

Started to work for me when I moved <Script> out of <Head> 🤷‍♂️ (in _app.tsx)

0 replies

Script tag not working #35064

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

Replies: 17 comments · 24 replies

balazsorban44 Mar 5, 2022 Maintainer

Couple notes after some testing

TL; DR:

Details

Reference image for breakpoints (script.js in next library):

Note

Tests

Summary

Replies: 17 comments 24 replies

balazsorban44
Mar 5, 2022
Maintainer