How to solve 'Build error occurred ReferenceError: self is not defined' error while building NextJs app?

Question

pages/components/moru-sdk.js

// https://libraries.io/npm/moru-web-sdk

import { MoruCheckout } from "moru-web-sdk";
function MoruService() {
  const options = {
    access_key:
      "test_9425294388834bdface7d1b58fd538bf67627d9408fe4f2589820cf550a5003d",
    transaction_id: "1",
    additional_fields: {
      name: "Shubham Dhakal",
      email: "[email protected]",
    },
    callback_handler: {
      onSuccess: (response) => {
        console.log(response);
        // call your api
        alert("success");
      },
      onError: (error) => {
        console.log(error);
        alert("failure");
      },
      onClose: (error) => {
        console.log(error);
      },
    },
  };

  const checkout = new MoruCheckout(options);
  const handleMoruPayment = () => {
    checkout.open({ amount: 100 });
  };

  return (
    <>
      <button onClick={handleMoruPayment}>Pay with Moru</button>;
    </>
  );
}

export default MoruService;

pages/index.js

import dynamic from "next/dynamic";

const MoruService = dynamic(() => import("./components/moru-sdk"), {
  ssr: false,
});

export default function Home() {
  return <MoruService />;
}

I'm trying to build Next.js application but got error "Self is not defined". I've used moru-web-sdk inside moru-sdk component and imported inside index.js. It works fine while npm run dev but got an error while building.

Answer 1

You have to move the MoruService component outside of the pages folder.

Only page components should live under the pages folder. Next.js will try to build pages/components/moru-sdk.js as a page during next build. This will cause the issue due to moru-web-sdk using Web APIs that aren't available on the server when the page gets pre-rendered.