Estoy trabajando con la biblioteca de mercadopago. Es necesario cargar el script de mercadopago y hacer una instancia del objeto MercadoPago. El caso es que nextJS carga el paquete principal antes de incluir el archivo de mercadopago, entonces tengo un error de ejecución porque el objeto no está definido.
Probé diferentes formas, cargando el archivo de script en el componente Head con una etiqueta normal y con el objeto Next/Script como:
<script src="https://sdk.mercadopago.com/js/v2" strategy="beforeInteractive"/>No importa lo que haga, next siempre carga el script después del archivo del paquete principal. Si configuro un setTimeout para esperar a instanciar el objeto de Mercadopago, se ejecuta, pero obviamente esta no es una buena opción. ¿Cuál es la forma correcta de resolver esto?
Cargue la secuencia de comandos en _document.js antes de las secuencias de comandos next.js, cree _document.js en el directorio de páginas para ampliar el documento html de la forma que desee.
import Document, { Html, Head, Main, NextScript } from "next/document"; export default class MyDocument extends Document { render(){ return ( <Html> <Head> /*This is loads the script in head tag of your html document*/ <script src="https://sdk.mercadopago.com/js/v2" strategy="beforeInteractive"/> </Head> <body> /*your script can also go here before loading next scripts*/ <Main /> <NextScript /> </body> </Html> ) } }Bien, resolví esto usando el método onLoad disponible en el componente Next/Script . Lo que tenía que hacer era mover la inclusión del script a mi propio componente e incluir el componente allí agregando los accesorios onLoad y pasando una función que ejecutaba mi instancia de objeto después de cargarlo.
Aquí mi código:
const onload = () => { const controller = new Controller(props); setController(controller); }; const pay = () => controller.load(props.disabled); const attrs = {onClick: pay}; if (!controller || props.disabled) attrs.disabled = true; return( <> <section className="mercadopago-checkout-pro-component"> <div ref={refContainer} className="cho-container"> <button className="btn btn-secondary" {...attrs}> Pay </button> </div> </section> <Script src="https://sdk.mercadopago.com/js/v2" onLoad={onload}/> </> );