sdk de mercado pago para react en Next.js no me funciona :(

[ClaudioGuevaraDev]

Instale el sdk de mercado de pago y lo inicialicé en mi proyecto de next.js (Pages Router, next 13.4.17) según dice la documentación

import React from 'react'
import { initMercadoPago } from '@mercadopago/sdk-react'

function Home() {
initMercadoPago("")
return (

Home

)
}

export default Home

pero tengo el siguiente error por consola

Uncaught SyntaxError: Cannot use import statement outside a module

Me pase a vite y funciono altiro. Que puede estar roto en next.js?

[namesbrandon]

lo tienes que importar con Dynamic

[ClaudioGuevaraDev]

Gracias 😄

[maikeg-alves]

Olá, tive o mesmo problema e acabei encontrando uma solução.

O erro "Cannot use import statement outside a module" ocorre em JavaScript quando você tenta usar uma declaração import em um contexto onde módulos não são suportados. Isso acontece porque o código JavaScript é executado em dois ambientes principais: no navegador e no Node.js (no servidor), com Nextjs isso ocorre o tempo todo no lado do servidor.

Em ambientes de navegador, a maioria dos navegadores modernos suporta a sintaxe import para carregar módulos JavaScript, permitindo que você organize e importe código de maneira modular. No entanto, no Node.js, o suporte a módulos é um pouco diferente, especialmente quando se trata de código que é executado no lado do servidor.

A mensagem de erro específica "Cannot use import statement outside a module" indica que o código está sendo interpretado como CommonJS (Node.js) em vez de módulos ES6 (que usam import e export).

A solução que encontrei fpo envolve o uso do dynamic do Next.js para carregar o componente Wallet dinamicamente, evitando assim o erro "Cannot use import statement outside a module" que ocorre quando se tenta usar import em um contexto que não suporta módulos ES6.

Passo 1

Importando o Componente Wallet Dinamicamente: Em vez de importar o componente Wallet diretamente no topo do arquivo, usamos o dynamic do Next.js para importá-lo dinamicamente. Fazemos isso com a função dynamic que recebe uma função que faz o import dinâmico do componente quando necessário.

Passo 2

Uso do Componente Wallet: Em vez de renderizar o componente Wallet diretamente, verificamos se isComponentVisible é true e se preferenceId está definido antes de renderizar o componente. Isso garante que o componente Wallet só seja renderizado quando for necessário e evita que o erro ocorra.

Passo 3

Carregamento do Mercado Pago: Usamos uma função loadMercadoPago que importa o initMercadoPago dinamicamente e inicializa o Mercado Pago. Isso garante que o Mercado Pago seja carregado apenas quando necessário.

Passo 4

Uso do useEffect: Chamamos a função loadMercadoPago dentro de um useEffect para garantir que o Mercado Pago seja carregado apenas após a renderização inicial do componente.

Resumindo, a solução usa o carregamento dinâmico do componente Wallet e do Mercado Pago para evitar que o código de importação seja executado fora de um contexto de módulo. Isso garante que o componente seja renderizado apenas quando necessário, evitando o erro e melhorando o desempenho da aplicação.

Espero que isso te ajude e aos outros que esteja com o mesmo problema :)

[ClaudioGuevaraDev]

Gracias amigo 😄

[russkibrazil]

@maikeg-alves seu código foi espetacular enquanto eu utilizava no ambiente dev, mas encontrei um problema assim que fui dar o npm build.
No snippet que você sugeriu no passo 3, eu estou com o erro "Type 'Promise<(publicKey: string, options?: TOptions) => void>' is not assignable to type 'LoaderComponent'.", exatamente no argumento import ('@mercadopago...). Você por acaso teve esse problema também?

[maikeg-alves]

Se possível, consegue apresentar seu código aqui para eu tentar replicar o erro?

[russkibrazil]

Claro.

import { useRouter } from "next/router";
import { fetch } from "utils/dataAccess";
import dynamic from 'next/dynamic'

interface Props{
    chargedValue: number;
    preferenceId: string;
}

export const PaymentSelectorMerPago: FunctionComponent<Props> = ({
    chargedValue,
    preferenceId
}) => {
    const [isComponentVisible, setIsComponentVisible] = useState(false);
    const loadMercadoPago = async () => {
        try {
            const initMercadoPago = dynamic(
// FIXME        v Type 'Promise<(publicKey: string, options?: TOptions) => void>' is not assignable to type 'LoaderComponent<string>'
                () => import ('@mercadopago/sdk-react')
                    .then(module => module.initMercadoPago),
                {ssr: false,}
            ); 
            await initMercadoPago('TEST-00000000-0000-0000-0000-00000000000000');
            setIsComponentVisible(true);
        } catch (error) {
            console.error(error);
        }
    }
    useEffect(() => {
       loadMercadoPago();
    }, []);

    const Payment = dynamic( () => import('@mercadopago/sdk-react')
        .then((module) => module.Payment),
        {
            ssr: false,
        });
    return (<>
        {isComponentVisible && preferenceId && <Payment
            initialization={{
                amount: chargedValue,
                preferenceId: preferenceId,
            }}
            customization={{
                paymentMethods: {
                  ticket: "all",
                  bankTransfer: "all",
                  creditCard: "all",
                  debitCard: "all",
                  mercadoPago: "all",
            }}}
            onSubmit={async (param) => {
                console.log(param);
            }}
            onError={async (err) => console.error(err)}
            onReady={async () => console.log('ready')}
        />}
    </>);
}```

[francineemilia]

Hola @ClaudioGuevaraDev

La explicación de @maikeg-alves és completissima, pero se tiene alguna dificuldad con portugués y compreendes mejor inglés, tenemos un artigo em nuestra wiki com una explicación semelhante.

Se necesitas de más alguno apoyo, avisenos

[ClaudioGuevaraDev]

Gracias 😄 están muy claras las explicaciones