Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue Devtools' detector-exec.js in combination with Cookiebot prevents DOMContentLoaded event? #2149

Open
arnojong opened this issue Mar 26, 2024 · 1 comment

Comments

@arnojong
Copy link

Vue devtools version

6.6.1

Link to minimal reproduction

https://www.euromate.com/group/

Steps to reproduce & screenshots

Broken situation

  1. Have Vue Devtools enabled
  2. Visit https://www.euromate.com/group/
  3. Deny the cookies in the popup that opens
  4. Notice that the JavaScript on the page is not working by trying to open the 'Solutions' submenu

Working situation

  1. Disable Vue Devtools
  2. Visit https://www.euromate.com/group/
  3. Deny the cookies in the popup that opens
  4. Notice that the JavaScript on the page is now working properly by opening the 'Solutions' submenu

Video of the issue
In the video below you can see me toggling the Vue Devtools on and off. As you can see this breaks the site when Devtools are turned on, and the site works again when turning the Devtools off.
https://www.youtube.com/watch?v=kZb7oefIQeI

What is expected?

I expect the JavaScript to be working while I have the Vue Devtools extension enabled. For example the solutions submenu as mentioned above. Note that the site is not running on Vue at all.

What is actually happening?

None of the project's JavaScript is working when the Vue Devtools are enabled.

System Info

System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 56.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.59
    Firefox: 124.0.1
    Safari: 16.6

Any additional comments?

Only happens (AFAIK) on Chromium based browsers, I encountered the bug on both Chrome and Arc. It seems to have to do something with Cookiebot, as the issue started appearing since I've implemented Cookiebot on the site. Blocking the 'detector-exec.js' script in the Network tab in Chrome's Devtools fixes the issue aswell. This script comes from Vue Devtools.

@Sumurai8
Copy link

I've got the same issue. A site using Cookiebot stopped working with the Vue Devtools enabled, because nothing gets loaded anymore after cookiebot processes the injected script from vue devtools. There are no errors. In this case, an additional script that needs to be processed (google recaptcha) does not get loaded, breaking a login flow (as it now complains that recaptcha isn't loaded). Without the Vue Devtools recaptcha does get correctly loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants