Steps to import an external script into a NextJS application and access it from the main bundle

Question

Steps to import an external script into a NextJS application and access it from the main bundle

I have encountered an issue while working with the mercadopago library. I need to load the mercadopago script file and create an instance of the MercadoPago object. However, nextJS loads the main bundle before including the mercadopago file, resulting in an execution error due to the undefined object.

I experimented with different methods such as loading the script file into the Head component using a normal tag and also utilizing the Next/Script object like so:

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

Despite trying various approaches, Next always ends up loading the script after the main bundle file. Implementing a setTimeout function to wait for the Mercadopago object to be instantiated does work, but it is not an ideal solution. How can I correctly resolve this issue?

javascript next.js mercadopago mercadopagosdk

Answer 1

Answer №1

Make sure to load the script in _document.js before any next.js scripts. To do this, create a new file named _document.js in the pages directory and customize it according to your needs.

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class CustomDocument extends Document {
  render(){
    return (
      <Html>
        <Head>      
           /*Include the necessary script within the head tag of the html document*/      
           <script src="https://sdk.mercadopago.com/js/v2" strategy="beforeInteractive"/>
        </Head>

        <body>
          /*You can also add additional scripts here before loading other next.js scripts*/
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Answer 2

Make sure to load the script in _document.js before any next.js scripts. To do this, create a new file named _document.js in the pages directory and customize it according to your needs.

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class CustomDocument extends Document {
  render(){
    return (
      <Html>
        <Head>      
           /*Include the necessary script within the head tag of the html document*/      
           <script src="https://sdk.mercadopago.com/js/v2" strategy="beforeInteractive"/>
        </Head>

        <body>
          /*You can also add additional scripts here before loading other next.js scripts*/
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Answer 3

Answer №2

I was able to solve this issue by utilizing the onLoad method within the Next/Script component. To resolve the problem, I moved the script inclusion to my own component and added the onLoad props while passing a function that executed my object instance after it had finished loading.

Below is the code I used:

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

Answer 4

I was able to solve this issue by utilizing the onLoad method within the Next/Script component. To resolve the problem, I moved the script inclusion to my own component and added the onLoad props while passing a function that executed my object instance after it had finished loading.

Below is the code I used:

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

Answer 5

Answer №3

Head over to the component where you require this particular script.

import Script from 'next/script'

const myComponent = () => {

const [razorpayInstance, setRazorpayInstance] = useState();

const handleLoadScript= () => {
var options: any = {
  "key": "myUniqueKey"
};
res = new Razorpay(options);
setRazorpayInstance(razorpay)

}

return( <> <Script id="onload-id" src="https://uniquecdn.com/slugs" onLoad={handleLoadScript} /> </> )}; 
export default myComponent;

Answer 6

Head over to the component where you require this particular script.

import Script from 'next/script'

const myComponent = () => {

const [razorpayInstance, setRazorpayInstance] = useState();

const handleLoadScript= () => {
var options: any = {
  "key": "myUniqueKey"
};
res = new Razorpay(options);
setRazorpayInstance(razorpay)

}

return( <> <Script id="onload-id" src="https://uniquecdn.com/slugs" onLoad={handleLoadScript} /> </> )}; 
export default myComponent;

Steps to import an external script into a NextJS application and access it from the main bundle

Answer №1

Answer №2

Answer №3

Similar questions

Creating my website with a unique inverse color scheme

Click to expand for answers to commonly asked questions

What is the best method to update the input(type="date") field placeholder to read as "YYYY/MM/DD"?

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

AJAX loading footer content before images are fully loaded

Error encountered when attempting to resolve Angular UI Router provider

What location is optimal for storing ng-templates within an Angular/Django single-page application?

"Ensuring Data Accuracy: Validating WordPress Fields with JavaScript

Unlocking protection: Confirming password strength and security with password indicator and regular expressions for special characters in angular through directive

What is the reason behind JavaScript's `fn.length` returning the count of named parameters that `fn` function has?

What is the solution to the error message stating that <tr> cannot be a child of <div>?

Ajax requests can form a pyramid of doom when multiple asynchronous calls are structured

Having trouble binding form data to a React component with the onChange() method?

Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

Invoke a Node.js script from a Spring Boot application to pass a Java object to the script. The script will modify the object and then return it back to the originating class

The disappearing act of Redux state after being added to a nested array

defiant underscore refusing to function

Open a submenu when clicking on an input field and automatically close it when the focus is lost

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

What is the method for obtaining the current date when altering the system date to a previous time?