fix: Nuxt DevTools client injection failed on Chrome v129

[martinszeltins]

🐛 The bug

The Nuxt Devtools are not working on the latest Chrome Beta version. It works in all other browsers including Chrome stable but not in Chrome Beta (Version 129.0.6668.29 (Official Build) beta (64-bit))

This is with a completely new / fresh installation of Nuxt.

client.mjs:30 Nuxt DevTools client injection failed
iframe.onload @ client.js?v=3232c809:111
20:36:13.672 client.mjs:30 undefined

Related: #488 (comment)

Screenshot:

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-vguwcu?file=nuxt.config.ts

🌈 Expected behavior

It should work.

ℹ️ Additional context

No response

[antfu]

Shouldn't that be considered as a Chrome Beta bug? It's working on Chrome Stable. I am not sure what we can do here

[martinszeltins]

Shouldn't that be considered as a Chrome Beta bug? It's working on Chrome Stable. I am not sure what we can do here

Can we investigate why the Nuxt DevTools are not opening in Chrome Beta? Maybe the devtools can be patched to also work in Chrome Beta?

[antfu]

I don't think we will have the bandwidth to test every Beta version. In this case it looks more like a Chrome bug that they should fix instead. Or we would count on the community to help fix if it's really a Nuxt DevTools issue (PR welcome!).

Marking this as closed for now. Thanks.

[jon-lbm]

I don't think we will have the bandwidth to test every Beta version. In this case it looks more like a Chrome bug that they should fix instead. Or we would count on the community to help fix if it's really a Nuxt DevTools issue (PR welcome!).

Marking this as closed for now. Thanks.

I'm actually seeing the same issue on my end and I'm using Chrome Version 129.0.6668.42 (Official Build) (arm64), not beta.

[joaolisboa]

Same issue on my end. On Chromium Engine Version 129.0.6668.42

[robert-hoffmann]

Except this is not a beta anymore ..remember chrome moves fast

My dev tools are empty now with chrome 129.0.6668.59 (official)

---

Problem seems to be somewhere with the iframe, maybe it can't get a handle on it, or some async probem...

[robert-hoffmann]

I don't think we will have the bandwidth to test every Beta version. In this case it looks more like a Chrome bug that they should fix instead. Or we would count on the community to help fix if it's really a Nuxt DevTools issue (PR welcome!).

Marking this as closed for now. Thanks.

Chrome beta moves pretty fast, canary i wouldn't worry about, but something that is broken in beta, is probably gonna hit your user base pretty fast in the official version

I'd include chrome beta as an official testbed for all things nuxt
(food for thought)

[antfu]

Now, I can reproduce it with v129.

It looks like really a Chrome bug, but I haven't figured out the root cause yet. But it seems like Vue Router gets mismatched in Chrome with the wrong fullPath:

Will keep investigating

[robert-hoffmann]

Maybe something here...

https://chromestatus.com/roadmap

[antfu]

Went down, it was caused by a circular import in our client bundle. Somehow Chrome v129 failed to resolve and hangs (dynamic import(. '/foo.js') never get resolved). I might need to strim the bundle down to a minimal repro so I can report to Chrome

[antfu]

Here is the repro: https://github.com/antfu/repro-chrome-v129 - Now I am very confident it's a chrome bug. I reported to Chrome already, let's see how they response, if not I wound try to report to Chromium later.

[Moonlight63]

Same bug in MS Edge, which makes sense

[antfu]

Update: it should be fixed in the next version https://x.com/_shu/status/1837009344153669759

In the meantime, I will check our bundle to see if we can workaround it before that

[skrabbe001]

In the meantime, I will check our bundle to see if we can workaround it before that

Which thread should we follow to see if a workaround has been implemented? I see you closed this thread.

[TheAlexLichter]

The workaround was implemented in 29b0e39

[robert-hoffmann]

Which thread should we follow to see if a workaround has been implemented? I see you closed this thread.

You'll need to make sure

"@nuxt/devtools": "^1.5.0"

is in your devDependencies, and run pnpm install (maybe with --force), to get it running

[skrabbe001]

Nice. I saw manniL wrote the following on Nuxt discord, which may be relevant for other readers of this thread:

when you or a dependency uses an await before imports, that's what causes the Chrome bug

[MickL]

Had the same error suddenly. Deleted the bun lockfile, which then installed 1.5.0 and it works again!

[thiagonunesbatista]

Which thread should we follow to see if a workaround has been implemented? I see you closed this thread.

You'll need to make sure

"@nuxt/devtools": "^1.5.0"

is in your devDependencies, and run pnpm install (maybe with --force), to get it running

This solution worked for me too, I am not using the Devtools module anymore. I installed the devtools manually with the npm package and It started working again.

I'm not sure if it's the cause, but the problem started when I installed the nuxt-og-image package.

[MABottiglieri]

same issue for me with 129.0.6668.90 (official) (a 64 bit)

[blqke]

same issue for me with 129.0.6668.90 (official) (a 64 bit)

@MABottiglieri Even with @nuxt/devtools to 1.5.2 ?

[hacknug]

same issue for me with 129.0.6668.90 (official) (a 64 bit)

@MABottiglieri Even with @nuxt/devtools to 1.5.2 ?

Yeah. Same thing happening to me with Arc and v1.5.2.

Version numbers for Arc and Chromium are:

Versión 1.63.0 (54427)-RC
Chromium Engine Version 129.0.6668.90

EDIT: More context here https://x.com/_shu/status/1837009344153669759

[robert-hoffmann]

Mine works fine here on chrome: 129.0.6668.90, with

devDependencies:
"@nuxt/devtools": "^1.5.2",
"nuxt": "^3.13.2",

Do remember, you need to press: Shift + Alt + D
to open it (by default it remains closed now i think)

[jamols09]

Mine does not even appear when trying to run dev mode.