APIs & Integrations

SNigam
Conselheiro(a) de destaque

Unable to use Stepindicator Extensionb in my custom card

resolver

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_0-1725453474046.png

 

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

1 Solução aceita
Humashankar
Solução
Conselheiro(a) de destaque

Unable to use Stepindicator Extensionb in my custom card

resolver

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

Humashankar VJ
HubSpot Community Champion and enthusiast | Engineering Manager

Exibir solução no post original

0 Avaliação positiva
2 Respostas 2
Humashankar
Solução
Conselheiro(a) de destaque

Unable to use Stepindicator Extensionb in my custom card

resolver

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

Humashankar VJ
HubSpot Community Champion and enthusiast | Engineering Manager
0 Avaliação positiva
Jaycee_Lewis
Gerente da Comunidade
Gerente da Comunidade

Unable to use Stepindicator Extensionb in my custom card

resolver

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot