Erro ao usar com Nextjs

[4lessandrodev]

Failed to compile
./node_modules/jsdom/lib/api.js:3:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/payment-token-efi/distNode/payment-token-efi.js

[thamelodev]

Mesmo problema aqui, resolvi com:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, {isServer}) => {
    if(!isServer){
      config.resolve.fallback = {
        fs: false,
        child_process: false,
        canvas: false,
      }
    }

    return config
  },
};

export default nextConfig;

Porém, ai quando vou solicitar o getPaymentToken(), ele fala que não tem o JSDOM instalado.

Sendo que ele está instalado.

[4lessandrodev]

@thamelodev Eu acabei usando outra abordagem, meio que na "gambiarra"* para entregar o projeto rsrs, se ajudar eu fiz conforme abaixo:

// efi.script.js

var = publicKey = 'be951e....be' //  Identificador de conta

var s = document.createElement('script');
s.type = 'text/javascript';
var v = parseInt(Math.random() * 1000000);
s.src = `https://sandbox.gerencianet.com.br/v1/cdn/${publicKey}/` + v;
s.async = false;
s.id = publicKey;
if (!document.getElementById(publicKey)) {
    document.getElementsByTagName('head')[0].appendChild(s);
};
$gn = {
    validForm: true,
    processed: false,
    done: {},
    checkout: {},
    ready: function (fn) {
        $gn.done = fn;
    },
    getToken: function (data) {
        return new Promise((resolve, reject) => {
            $gn.checkout.getPaymentToken(data, (error, response) => {
                if (error) {
                    // Trata o erro ocorrido
                    console.error(error);
                    resolve(null);
                } else {
                    // Trata a resposta
                    resolve(response);
                }
            })
        });
    }
};

$gn.ready(function (checkout) {
    $gn.checkout = checkout;
});

importei esse arquivo no index.html (_document.tsx)

        <script src="https://cdn.jsdelivr.net/gh/efipay/js-payment-token-efi/dist/payment-token-efi.min.js" async></script>
        <Script strategy="afterInteractive" src={"/efi.script.js"} type="text/javascript" async></Script>

Assim consegui usar em qualquer pagina renderizada no dom usando a variável $gn conforme abaixo:

$gn.getToken(data).then((payload: Payload | null) => { ... }))

Fonte: Documentação

[thamelodev]

@thamelodev Eu acabei usando outra abordagem, meio que na "gambiarra"* para entregar o projeto rsrs, se ajudar eu fiz conforme abaixo:

// efi.script.js



var = publicKey = 'be951e....be' //  Identificador de conta



var s = document.createElement('script');

s.type = 'text/javascript';

var v = parseInt(Math.random() * 1000000);

s.src = `https://sandbox.gerencianet.com.br/v1/cdn/${publicKey}/` + v;

s.async = false;

s.id = publicKey;

if (!document.getElementById(publicKey)) {

    document.getElementsByTagName('head')[0].appendChild(s);

};

$gn = {

    validForm: true,

    processed: false,

    done: {},

    checkout: {},

    ready: function (fn) {

        $gn.done = fn;

    },

    getToken: function (data) {

        return new Promise((resolve, reject) => {

            $gn.checkout.getPaymentToken(data, (error, response) => {

                if (error) {

                    // Trata o erro ocorrido

                    console.error(error);

                    resolve(null);

                } else {

                    // Trata a resposta

                    resolve(response);

                }

            })

        });

    }

};



$gn.ready(function (checkout) {

    $gn.checkout = checkout;

});

importei esse arquivo no index.html (_document.tsx)

        <script src="https://cdn.jsdelivr.net/gh/efipay/js-payment-token-efi/dist/payment-token-efi.min.js" async></script>

        <Script strategy="afterInteractive" src={"/efi.script.js"} type="text/javascript" async></Script>

Assim consegui usar em qualquer pagina renderizada no dom usando a variável $gn conforme abaixo:

$gn.getToken(data).then((payload: Payload | null) => { ... }))

Fonte: Documentação

Já resolvi o problema, aparentemente eles tem uma versão que está funcional no React, porém me questiono com o porquê de não termos essa versão aqui no SDK.

O suporte que proveu um zip com o SDK atualizado.

E muito obrigado 😉