I've been trying to embed an external JavaScript source into my Next.js application and keep receiving following error:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
The code I am trying to use can be found here - The map with the vessel has an option to embed it. So far the ponent that generates this error looks like this:
<div className={styles['container']}>
<Script type="text/javascript">
var width="100%";var height="400"; var mmsi=228402900;
</Script>
<Script
type="text/javascript"
src=".js">
</Script>
</div>
If I copy the embed code into CodePen it works just fine - link to my codepen with the embedded map here.
Does somebody know what could be the problem here?
I've been trying to embed an external JavaScript source into my Next.js application and keep receiving following error:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
The code I am trying to use can be found here - The map with the vessel has an option to embed it. So far the ponent that generates this error looks like this:
<div className={styles['container']}>
<Script type="text/javascript">
var width="100%";var height="400"; var mmsi=228402900;
</Script>
<Script
type="text/javascript"
src="https://www.vesselfinder./aismap.js">
</Script>
</div>
If I copy the embed code into CodePen it works just fine - link to my codepen with the embedded map here.
Does somebody know what could be the problem here?
Share Improve this question edited May 21, 2022 at 15:21 juliomalves 50.6k23 gold badges178 silver badges169 bronze badges asked May 15, 2022 at 23:16 Martin PřívozníkMartin Přívozník 1502 silver badges13 bronze badges2 Answers
Reset to default 4The issue occurs because the external script is being loaded asynchronously by next/script, thus ignoring the document.write() call present in the script.
From Document.write() MDN documentation:
Note: Using
document.write()in deferred or asynchronous scripts will be ignored and you'll get a message like "A call todocument.write()from an asynchronously-loaded external script was ignored" in the error console.
You'll need to set the Script strategy to beforeInteractive so the script is added to <head>, and explicitly set the defer property to false to prevent the script from being loaded asynchronously.
<Script
type="text/javascript"
src="https://www.vesselfinder./aismap.js"
strategy="beforeInteractive"
defer={false}
></Script>
Julio's answer above does not work in my testing for Next with the /app router. I tried every permutation of the next/script tag per their docs to no avail.
It looks like they've deprecated the defer attribute on their implementation of <script> or maybe it's a bug and doesn't pass through to the page properly. So it's back to good old dangerouslySetInnerHTML - this did work. Below is my /src/app/layout.js file:
import Script from 'next/script';
import { Providers } from '~/ponents/providers';
import { Wrapper } from '~/ponents/wrapper';
import { cx } from '~/utils';
import '~/styles/index.css';
export default async function Application({ children }) {
return (
<html lang="en-US">
<body>
<Providers>
<Wrapper>{children}</Wrapper>
</Providers>
</body>
<script
type="text/javascript"
dangerouslySetInnerHTML={{
__html: `https://your-script-here.`,
}}
/>
</html>
);
}