How to load an external script and access it from the main bundle in nextJS-CodePudding

I am working with mercadopago library. It's necessary to load the mercadopago script file and make an instance of the MercadoPago object. The thing is, nextJS loads the main bundle before including the mercadopago file, so I got an execution error because the object is not defined.

I tried different ways, loading the script file into the Head component with a normal tag and with the Next/Script object like:

<script src="https://sdk.mercadopago.com/js/v2" strategy="beforeInteractive"/>

Does not matter what I do, next always loads the script after the main bundle file. If I set a setTimeout to wait to instance the Mercadopago object it runs, but obviously this is not a good option. Which is the correct way to solve this?

CodePudding user response：

OK, I solved this using the onl oad method available on Next/Script component. What I needed to do was to move the script inclusion to my own component and include the component there adding the onl oad props and passing a function that executed my object instance after loading it.

Here my code:

const onl oad = () => {
     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" onl oad={onload}/>
   </>
);

CodePudding user response：

Load the script in _document.js before next.js scripts, create _document.js in pages directory to extend the html document the way you like.

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>
    )
  }
}