Replies: 18 comments 24 replies
-
Please read the docs: https://nextjs.org/docs/api-reference/next/script#onload |
Beta Was this translation helpful? Give feedback.
-
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/[email protected]/dist/ionicons/ionicons.esm.js"
/>
</body>
</Html>
)
} |
Beta Was this translation helpful? Give feedback.
-
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+ '>m_auth=${process.env.NEXT_PUBLIC_GTM_ENV_AUTH_KEY}>m_preview=${process.env.NEXT_PUBLIC_GTM_PREVIEW}>m_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}>m_auth=${process.env.NEXT_PUBLIC_GTM_ENV_AUTH_KEY}>m_preview=${process.env.NEXT_PUBLIC_GTM_PREVIEW}>m_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
}}
/>
</body>
</Html>
);
}
}
export default Document;
Any tips? |
Beta Was this translation helpful? Give feedback.
-
I faced the same problem with version // _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> |
Beta Was this translation helpful? Give feedback.
-
Yes, very annoying issue was, need to fix it, unclear |
Beta Was this translation helpful? Give feedback.
-
Also experiencing this. Even following the most basic example here: https://nextjs.org/docs/basic-features/script with a custom _document.jsx |
Beta Was this translation helpful? Give feedback.
-
I do have the same issue on next.js 13 |
Beta Was this translation helpful? Give feedback.
-
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
}}
/> |
Beta Was this translation helpful? Give feedback.
-
Does nothing, amazing this tag so well documented and works 0% of the time? :D |
Beta Was this translation helpful? Give feedback.
-
Similar issue in the tutorial, on this page: 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:
Code:
Dependencies include: Node v: 20.4.0 "dependencies": { |
Beta Was this translation helpful? Give feedback.
-
Also not working for me. Strategy change to |
Beta Was this translation helpful? Give feedback.
-
After running into this issue I noticed that the docs say that the
|
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Not sure if this is related but I have a |
Beta Was this translation helpful? Give feedback.
-
i am having same issue in nextjs version NOTE: Nexjts recommend not to use <Script /> in _document.js file as _document.js file runs on server and <Script /> tag contains Frontend functionality |
Beta Was this translation helpful? Give feedback.
-
adding |
Beta Was this translation helpful? Give feedback.
-
Started to work for me when I moved |
Beta Was this translation helpful? Give feedback.
-
@theisof Same here :( |
Beta Was this translation helpful? Give feedback.
-
Verify 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.
Expected Behavior
Script should be loaded
To Reproduce
Beta Was this translation helpful? Give feedback.
All reactions