Unnecessary network requests

[spiderhands]

Describe the bug On every render there is a new network request in the Network Tab

To Reproduce Steps to reproduce the behavior:

1. Go to https://reactour.vercel.app
2. Scroll down to "Smooth scroll"
3. Open developer tools
4. Navigate to the network tab
5. Click on "Start tour"
6. Click on the "Right arrow" of Popover

Expected behavior No requests are sent

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version 103.0.5060.134 (Official Build) (x86_64)

[elrumordelaluz]

Hi @spiderhands, thanks for open the Issue.

I am only getting the same result on Chrome, not in FF nor in Safari. Let's investigate which could be the source of the problem.

[elrumordelaluz]

It seems that there are img requests.

[spiderhands]

Something tries to navigate to a URL with the mask hash at the end

https://emaxple.com/some-page#mask__dvybzk7rb9a

[elrumordelaluz]

where did you found this?

[spiderhands]

Our internal deployment returns 404 with the HTML body on any page that is not the /index.html

The browser prints errors in the console like this:

[elrumordelaluz]

So you are getting the same result/issue as in the demo, in your project using @reactour/tour (outside the playground).

Is weird that those /sesson#mask__{…} calls are different of those on the demo and with different response codes.

[elrumordelaluz]

Also, for some reason and always using Chrome, this didn't happens on the Demo site at https://reactour.js.org which is using all updated dependencies

[elrumordelaluz]

unrelated: for some reason the site on gh-pages stopped working, investigating. SOLVED

[elrumordelaluz]

@reactour packages now are css-in-js lib agnostic; this means avoid the creation of <style> blocks on each chage with new css declarations for each mask change and related stuff.

Please try the same demo and updating your project into @reactour/[email protected].

On my side seems solved. Please re-open in any case.