Unable to use Stepindicator Extensionb in my custom card

[SNigam]

I have created one custom crm card using hubspot cli for deal object and its visible also but I used stepindicator and it throws error - 

I checked app log here it is what i found there - 

other than this in my console i am getting this - 
Error: [hubspot.extend]: We were unable to load your extension. Please verify that your local development server is running and is not reporting any critical errors, and try your request again.

Here is my code i used in custom crm card for using stepindicator -

import React, { useState } from 'react';
import ReactDOM from 'react-dom';  // Import ReactDOM
import {
  hubspot,
  StepIndicator,
  Button
} from '@hubspot/ui-extensions';

function Extension() {
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <>
      <StepIndicator
        currentStep={currentStep}
        stepNames={["First", "Second", "Third"]}
      />
      <Button onClick={() => setCurrentStep(currentStep - 1)} disabled={currentStep === 0}>
        Previous
      </Button>
      <Button onClick={() => setCurrentStep(currentStep + 1)} disabled={currentStep === 2}>
        Next
      </Button>
    </>
  );
}

// Initialize the HubSpot extension
hubspot.extend(() => {
  // Render the React component within the callback
  ReactDOM.render(
    <Extension />,
    document.getElementById('root')  // Ensure 'root' exists in your HTML
  );
});

 

Please help me to solve this issue. 

Thank you

Shubham Nigam

[Humashankar · Accepted solution]

Hi @SNigam 

Please review and update us on the troubleshooting checklist coverage to help identify the root cause of the issue and determine the best course of action.

• Is your initialization code correct?
• Are all required dependencies installed and correctly imported (@hubspot/ui-extensions, React, and ReactDOM) ?
• Are there any additional error messages or warnings in your server logs?
• Does the element with the ID root exist in your HTML file?
• Is your HubSpot CLI configuration correct (hubspot.config.yml) ?

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

[Jaycee_Lewis]

Hi @SNigam 👋 I hope you've been doing great. Thanks for your question. Let's invite some of our brilliant community members to the converstaion — @Danielle_J @coldrickjack @Humashankar have you worked on anything similar in your projects?

Thank you very much for taking a look! — Jaycee