admin管理员组

文章数量:1417460

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?

  • javascript
  • html
  • reactjs
  • next.js
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 badges
Add a ment  | 

2 Answers 2

Reset to default 4

The 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 to document.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>
  );
}

本文标签： javascriptEmbedding external script into Nextjs applicationStack Overflow

版权声明：本文标题：javascript - Embedding external script into Next.js application - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745263887a2650481.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。