How to get react-joyride to wait for a component to be available?

[brianteeter]

So we've used react-joyride to build a simple multi page tour of a web application in react. The tour works great, however, we've noted when clicking 'Back' that the tour sometimes fails in cases where the page has to navigate back to a different URL and the components being targeted have not yet rendered. We don't see this behavior going forward in the tour only back. This is the error we get in console:

Target not mounted {event: 'click', placement: 'bottom', offset: 10, disableBeacon: false, disableCloseOnEsc: false, …}content: {$$typeof: Symbol(react.element), type: 'p', key: null, ref: null, props: {…}, …}data: {prev: '/analytics', next: '/analytics'}disableBeacon: falsedisableCloseOnEsc: falsedisableOverlay: falsedisableOverlayClose: truedisableScrollParentFix: truedisableScrolling: trueevent: "click"floaterProps: {options: {…}, wrapperOptions: {…}, disableAnimation: false, offset: 30, styles: {…}}hideBackButton: falsehideCloseButton: falsehideFooter: falseisFixed: falselocale: {back: 'Back', close: 'Close', last: 'Finish', next: 'Next', open: 'Open the dialog', …}offset: 10placement: "bottom"showProgress: falseshowSkipButton: truespotlightClicks: falsespotlightPadding: 20styles: {beacon: {…}, beaconInner: {…}, beaconOuter: {…}, tooltip: {…}, tooltipContainer: {…}, …}target: "#analytics-report-button"title: "Analytics Report"[[Prototype]]: Object

I'd like to modify the code or tour to simply wait up to 3 seconds for a component to be available before it throws this error. But doing this in the callback doesn't seem to work as its called after the event happens. Any tips or thoughts?

[gilbarbara]

Hey @brianteeter

Did you check the MultiRoute demo?
You can navigate between the steps in the callback, and the routes are aware of the tour and know what to do.
If you use the stepIndex, you can easily stop the tour without changing the stepIndex and use a setTimeout to restart and update the index when it's ready.

[brianteeter]

Yeah I did. It isn't so much a question of navigation - its that when I arrive at a particular step in the navigation react hasn't rendered the required components yet. I really just want the tour to wait until they are there. I think if I trigger a navigation, it will cause another page load making the components not be available again.

I have also tried doing something like this:

 const waitForSelector = (selector, attempts = 10, delay = 250) => {
        return new Promise((resolve, reject) => {
            let attempt = 0;

            function checkSelector() {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                } else if (attempt < attempts) {
                    attempt++;
                    setTimeout(checkSelector, delay);
                } else {
                    reject(new Error(`Selector ${selector} not found after ${attempts} attempts`));
                }
            }

            checkSelector();
        });
    }

and waiting for the object to be available. But, I can't seem to find a way to force the tour to retry the step again.

[gilbarbara]

Are you using the stepIndex in your setup?

The generic solution for this muti-route case is to use a React context (like the demo).
Or set an interval in your callback to check if the target is mounted and update the tour status and stepIndex when it is.
This will only work if you use a CSS selector for the target, not a React ref).

The callback is synchronous because it is just receiving the current status, so there's nothing to wait for.
I'll rebuild the internal state and add the ability to wait for the target internally, but it's a major change, and unfortunately, I don't have the time now.