Setting target to an item that is not mounted in the DOM yet causes issues in production

[KevinZiadeh]

🐛 Bug Report

I have a Tour that will interact with an element inside a MUI dialog.
This element is not mounted by default, therefore I get Warning: Steps are not valid ... error component stack in the dev console.
The tour works correctly in both development and production environment.

BUT in production mode, using React with CRA(yes outdated), when I refresh the page that contains the Tour(even if the tour will not run), I get a blank screen and the Error: Uncaught RangeError: Maximum call stack size exceeded at ju.toString in the deep-equal package. A Hard reload does not cause this issue.

Expected behavior

Same as in development environment, not crash.

[Canya1607]

Hi Kevin! I faced the same issue when I was using it in combination with MUI dialog. Everything you need is to control it manually with callback prop. So you add all logic there to force stop the tour and with timeout f.e 300ms continue the tour when MUI dialog will be already rendered.

[KevinZiadeh]

Hello Canya, thanks for the response.
I did that (custom callback) and the tour works correctly in the dev and prod environment.
My issue was that when I deploy to prod, I get the Uncaught RangeError: Maximum call stack size exceeded at ju.toString sometimes (doesn't work for me, works for another person). A Hard Refresh makes everything work well, while a normal one doesn't fix the issue (and any subsequent load of the page).
Investigating further, I saw the warning of invalid steps.
I do not know if the issue is a caching issue (since a Hard refresh doesnt crash the website, but a normal one does), or a build issue (as some packages are not the most up to date)