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

Incorporating graphics into a React component

Can the image upload file size be customized or adjusted?

Save JSON data in an HTML document or vice versa

Combining multiple AngularJS expressions to form a URL within an interpolation statement

Executing an Amplifyjs GET request containing a request body

Adjusting hyperlinks placement based on window size changes using jQuery

The server remains unreachable despite multiple attempts to send data using Angular's $http

Error: Unable to locate module '@/prismicio'

Encountered an issue with JSON serialization while using getServerSideProps in Next.js and TypeScript to retrieve products from the Stripe Payments API

Encountering Webpack errors causes nextJS build to fail on Vercel site deployment

Attempting to resolve an error message with the help of JQuery

Issue with accessing Scope value in AngularJS directive Scope

Ways to showcase a JSON menu with a single level

Creating a form with multiple checkboxes using Material-UI components where only a single checkbox can be selected

Error in Material UI when using the select component

Sending parameters with $location.path() in AngularJS

Send multiple values as arguments to a jQuery function

What is the procedure for enabling S3 images or objects to be downloaded exclusively through website requests using pre-signed URLs?

Why is the Slick Slider displaying previous and next buttons instead of icons?

Use Javascript to display or conceal events on a fullcalendar interface