Uncaught RunTime Error

[Habibunnisha]

I am facing this uncaught runtime error when completing all the steps it throws this error

Expected Behavior

after completing all steps, closing at last when clicking done it should not throw any error

Actual Behavior

its throwing uncaught runtime error after completing all steps or in between closing the step

Errors and Screenshots (optional)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'element') at showElement.ts:204:1 at tslib.es6.js:147:1 at Object.next (tslib.es6.js:150:1) at tslib.es6.js:121:1 at new Promise () at e (tslib.es6.js:117:1) at L (showElement.ts:202:1) at steps.ts:133:1 at tslib.es6.js:147:1 at Object.next (tslib.es6.js:150:1)

Example (recommended)

import React, { Component } from "react"; import { Steps, Hints} from "intro.js-react"; import "./First.css";

class First extends Component { constructor(props) { super(props); this.state = { stepsEnabled: false, initialStep: 0, steps: [ { title: "Welcome", intro: "Hello Everyone 👋", position: "bottom"

        },
        {
            element: ".card-demo",
            intro: "This step focus on image "
        },
        {
            element: ".card-demo-link",
            intro: "This is image title",
            position: "left"
        },
        {
            element: ".card-demo-text",
            intro: "This is information of the image",
            position: "bottom"
        },
        
        {  
          element: ".card_image",
          intro: "This is our final step!",
          position: "right"
        },
        {

          title: "Farewell",
          intro: "Enjoy our product thankyou ",
          position: "top"
        }

      ],
      hintsEnabled: true,
      hints: [
        {
          element: ".card-demo-text",
          hint: "Title information",
          hintPosition: "middle-right"
        }
      ]
  };
}

render() {

    const {
        hintsEnabled,
        hints
      } = this.state;
  return (

    <div className="card-container">
        <Steps

            // Defines if the steps are visible or not. defaultly its false
            enabled={this.state.stepsEnabled}

            // All the steps.
            steps={this.state.steps}

            // Step index to start with when showing the steps
            initialStep={this.state.initialStep}

            // Callback called when the steps are disabled
            onExit={this.onExit}

            options={{
              dontShowAgain: false,
              showProgress: true,
              // showButtons: true,
              showBullets: false,
              
            }}
            
        />
         <Hints enabled={hintsEnabled} hints={hints} />

        <div data-title="Welcome!" data-intro="Hello World! 👋" className="card-demo">
        <div className="card shadow--md">
        <div className="card_image" data-intro="Intro.js can highlight on elements">
        <img
            src="https://th.bing.com/th?id=OIP.3MxqaJv2Z5QsG7wIXzizjAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
            alt="nature pic"
            title="Logo Title Text 1"
        />
        </div>
        <div className="card__body" data-title="Farewell!" data-intro="And this is the last step!">
        <h2 className="card-demo-link">Quaco Lighthouse</h2>
        <small className="card-demo-text">
            The Quaco Head Lighthouse is a well maintained lighthouse close to St.
            Martins. It is a short, beautiful walk to the lighthouse along the
            seashore.
        </small>
       
        </div>
    </div>
    </div>
    </div>
  );
}

onExit = () => {
  this.setState(() => ({ stepsEnabled: true }));
};

}

export default First;

i have imported this file in my App.js

Environment (optional)

Edition Windows 10 Pro Version 22H2 OS build 19045.4529

React Framework,

package.json file :-

{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "intro.js": "^7.2.0", "intro.js-react": "^1.0.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },

[binrysearch]

@Habibunnisha I'm not able to repro this, can you please create a jsfiddle/live demo to reproduce this bug?

[KuzMaxOriginal]

Same happens to me, @Habibunnisha did you find the solution?

[KuzMaxOriginal]

@binrysearch

Seems that it happens in 7.2.0, but is already fixed in v8. Any chances that it's possible to create a branch for 7.x fixes? So that we can patch the 7.x version until v8 is published?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.