Error: Component not found

[MrCookiez]

Error: Component not found

Description

Then using the chargebee-js-react-wrapper components there is an error occurred when filling the form fields.

Error message:

Code implementation:

export const initChargebee = () => {
    window.Chargebee.init({
      site: xxx,
      publishableKey: xxx,
    });
};

import React, { useState, useEffect, useRef } from "react";
import { CardComponent, CardNumber, CardExpiry, CardCVV } from "@chargebee/chargebee-js-react-wrapper";

...

const CardFormComponent = () => {
  const cardRef = useRef();

 // ... initChargebee ...
  
  return (
    <form>
      <CardComponent ref={cardRef}
        styles={options.style}
        classes={options.classes}
        locale="en"
        placeholder={options.placeholder}
      >
        <div className="class1">
          <CardNumber />
        </div>

        <div className="class2">
          <div className="class1">
            <CardExpiry />
          </div>

          <div className="class1">
            <CardCVV />
          </div>
        </div>

        <button onClick={onSubmit}>
          Submit
        </button>
      </CardComponent>
    </form>
  )
}

...

[Dremora]

I also get the same issue. However, trying to debug this made me realise that the problem doesn't lie with this library or even Chargebee itself, but with trying to initialise it more than once.

Have a look for the following message in the console logs:

Chargebee.js has been already initialized

If you can see it, eliminating repetitive initialisations should fix the issue.