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: "shubham@gmail.com", }, 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 />; } Estoy tratando de construir la aplicación Next.js pero obtuve el error "El yo no está definido". He usado moru-web-sdk dentro del componente moru-sdk e importado dentro de index.js . Funciona bien mientras npm run dev pero se produjo un error durante la compilación.
Debe mover el componente MoruService fuera de la carpeta de pages .
Solo los componentes de la página deben vivir en la carpeta de pages . Next.js intentará compilar pages/components/moru-sdk.js como una página durante next build . Esto causará el problema debido a que moru-web-sdk usa API web que no están disponibles en el servidor cuando la página se renderiza previamente.