Unable to use Stepindicator Extensionb in my custom card

Develop, Build & Integrate APIs & Integrations
1

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 -

SNigam_1-1725453526928.png
SNigam_1-1725453526928.png846×601 34 KB

SNigam_0-1725453474046.png
SNigam_0-1725453474046.png888×226 36.5 KB

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

2

Hi @SNigam :waving_hand: 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

3

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