SyntaxError: Cannot use import statement outside a module

[felipemendez98]

i am getting this error when trying to implement checkout pro in react specifically in nextjs.
i have tried to fix it but i have not succeeded. could someone help me?

error : \node_modules@mercadopago\sdk-react\index.js:1
import initMercadoPago from './mercadoPago/initMercadoPago';

[francineemilia]

Hi @mrNotSenior

Could you send us a sample from your code to help us understand what could be causing the error?

[joaogabriels]

Thank you for the quick response!

Currently, my project utilizes only a few core methods from the SDK:

From @mercadopago/sdk-react:

• initMercadoPago

From @mercadopago/sdk-react/coreMethods:

• getPaymentMethods
• createCardToken

I attempted to import these methods into my ES6 TypeScript class and React components, but unfortunately, they did not work. I followed the documentation and double-checked my installation, and the only difference from the documentation is that I am not using any of the CheckoutBricks in my application.

I have created a sandbox with some code that reproduces the same error. The only difference from my actual application code is that I imported initMercadoPago inside one of my ES6 TypeScript files, but the error persists.

Here is the link to the sandbox: Sandbox link

[francineemilia]

@joaogabriels I'm still analyzing your case, but I have I doubt: this is a server or a client component? Because if its a server component you cannot use useEffect, but if its a client component you need to use the Client Component Directive.

When I tried use getPaymentMethod in a client component I did like this:

"use client";
import {
  initMercadoPago,
  getPaymentMethods,
} from "@mercadopago/sdk-react";

async function test() {
  const paymentMethods = await getPaymentMethods({ bin: "503175" });
}
initMercadoPago("<YOUR_PUBLIC_KEY>");

export default function Home() {
  test();
  return <h1>teste</h1>;
}

[joaogabriels]

@francineemilia, it's a client component. I am using useEffect throughout my application without any issues. The only significant server feature that my application utilizes is Static Site Generation with getStaticProps. However, I ensure that the components are only rendered when the user is accessing a non-fallback page.

This issue seems to be related to an internal problem or an incompatibility with Next.js. Interestingly, when I attempted to use the js SDK, it worked perfectly fine.

[AdaltonLeite]

Hi @joaogabriels,

I thing that to render the Mercado Pago - React SDK we need to import it with Dynamic Import from NextJs, this enable the code to be ignored by the Server Side and only run on the Client Side.

Here is an example Wiki of a where it is possible to render the React SDK in NextJS, using the method getPaymentMethods

[bubamacko]

Hi @joaogabriels,

I thing that to render the Mercado Pago - React SDK we need to import it with Dynamic Import from NextJs, this enable the code to be ignored by the Server Side and only run on the Client Side.

Here is an example of a codeSandbox where it is possible to render the React SDK in NextJS, using the method getPaymentMethods

Can you reupload the sandbox¿?

[AdaltonLeite]

Hi @bubamacko,

Unfortunately codesanbox removed this link and we lost the code. We have documentation on the wiki that shows you step by step how to adjust this way of importing the react module into nextjs. I think it might help you.

[bubamacko]

Ohh, well, thanks! i'll check it out! Can i ask you something else? Is there anywhere where i can check where i can get the card token using bricks?

[longlho]

I'm getting this issue as well primarily because Jest can't handle ESM import, forcing us to transpile this SDK specifically. Is there a way u guys can distribute a cjs bundle as wel?

[ignaciolarranaga]

+1