He estado tratando de incrustar una fuente de JavaScript externa en mi aplicación Next.js y sigo recibiendo el siguiente error:
Error al ejecutar 'escribir' en 'Documento': no es posible escribir en un documento desde un script externo cargado de forma asíncrona a menos que se abra explícitamente.
El código que estoy tratando de usar se puede encontrar aquí : el mapa con el barco tiene una opción para incrustarlo. Hasta ahora, el componente que genera este error se ve así:
<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.com/aismap.js"> </Script> </div>Si copio el código incrustado en CodePen, funciona muy bien: enlace a mi codepen con el mapa incrustado aquí .
¿Alguien sabe cuál podría ser el problema aquí?
El problema se produce porque next/script carga el script externo de forma asincrónica, por lo que se ignora la llamada document.write() presente en el script.
De la documentación de Document.write() MDN:
Nota: Se ignorará el uso de
document.write()en secuencias de comandos diferidas o asíncronas y recibirá un mensaje como "Se ignoró una llamada adocument.write()desde una secuencia de comandos externa cargada de forma asíncrona" en la consola de errores.
Deberá establecer la estrategia de Script en beforeInteractive para que el script se agregue a <head> y establecer explícitamente la propiedad defer en false para evitar que el script se cargue de forma asíncrona.
<Script type="text/javascript" src="https://www.vesselfinder.com/aismap.js" strategy="beforeInteractive" defer={false} ></Script>