cielo__WEBPACK_IMPORTED_MODULE_3___default() is not a constructor

[caniswim]

Estou criando uma aplicação em Vue CLI 3 para receber pagamentos por assinatura.

Quando tento acessar a rota do formulário de pagamento, recebo este erro no console.

cielo__WEBPACK_IMPORTED_MODULE_3___default() is not a constructor

Alguém tem ideia de como resolver?

Segue o código que utilizei no meu componente.

<script>
import firebase from 'firebase/app';
import 'firebase/database';
import Cielo from 'cielo';


const cieloParams = {
 merchantId: 'XXXXXXXXXXXX',
 merchantKey: 'XXXXXXXXXXXX',
 sandbox: true,
};

const cielo = new Cielo(cieloParams);

export default {
 name: 'SubscriptionForm',
 data() {
   return {
     name: '',
     email: '',
     creditCardNumber: '',
     expirationDate: '',
     securityCode: '',
   };
 },
 methods: {
   async handleSubmit() {
     try {
       // Utilize a API da Cielo para processar o pagamento recorrente
       let createRecurrencyParams = {
       merchantOrderId: '2014113245231706',
       customer: {
         name: 'Comprador rec programada'
       },
       payment: {
         type: EnumCardType,
         amount: 1500,
         installments: 1,
         softDescriptor: '123456789ABCD',
         currency: 'BRL',
         country: 'BRA',
         recurrentPayment: {
           authorizeNow: true,
           endDate: '2022-12-01',
           interval: EnumRecurrentPaymentInterval.SEMIANNUAL
         },
         creditCard: {
           cardNumber: '4024007197692931',
           holder: 'Teste Holder',
           expirationDate: '12/2030',
           securityCode: '262',
           saveCard: false,
           brand: 'Visa'
         }
       }
     }


     cielo.recurrent.create(createRecurrencyParams)
       .then((data) => {
         return console.log(data);
       })
       .catch((err) => {
         return console.error('ERRO', err);
       })

       // Salve os detalhes da assinatura no Firebase
       await firebase.database().ref('subscriptions').push({
         name: this.name,
         email: this.email,
         paymentId: paymentResponse.payment.paymentId,
         recurrentPaymentId: paymentResponse.payment.recurrentPayment.recurrentPaymentId,
       });

       // Limpe o formulário
       this.name = '';
       this.email = '';
       this.creditCardNumber = '';
       this.expirationDate = '';
       this.securityCode = '';

       // Exiba uma mensagem de sucesso
       alert('Assinatura criada com sucesso!');
     } catch (error) {
       console.error(error);
       alert('Erro ao criar assinatura. Verifique os dados inseridos e tente novamente.');
     }
   },
 },
};

 </script>
 

[banzeh]

@caniswim o pacote deve ser utilizado em um backend nodejs por conta das chaves utilizada para integrar com a Cielo.

Caso sejam expostas no front, com sua merchantKey e merchantId qualquer pessoa poderá recuperar as informações dos seus pagamentos, editar e cancelar assinaturas, etc.