Vue Devtools-Next errors when trying to evaluate pageContext

[pdanpdan]

I'm not sure if this should be solved in vike or in devtools-next (https://github.com/vuejs/devtools-next) or in both.

When inspecting components that use usePageContext in script setup devtools will try to check some marker/well-known keys for internal purposes in prepare.js.

let n = G(()=>St(t.setupState[o])), r = e[o], s, a = typeof n == "function" || typeof (n == null ? void 0 : n.render) == "function" || typeof (n == null ? void 0 : n.__asyncLoader) == "function" || typeof n == "object" && n && ("setup"in n || "props"in n) || /^v[A-Z]/.test(o);

This will produce calls to getPageContextProxyForUser for key render at least, and that will produce an [vike][Wrong Usage] pageContext.render isn't defined on the client-side error.

It looks like normal (non-next) vue devtools works.

@brillout Maybe this should be forwarded to the vue devtools team, but I think you can decide better.

[brillout]

Thank you for raising the issue. The getPageContextProxyForUser.ts file already has a couple of Vue-specific whitelisting logic. How about we whitelist render? Would that be enough?

If assertUsage() causes too many issues, then let's make it a assertWarning() instead.

[pdanpdan]

Maybe the whitelisting should be established together with the devtools team, so that is they check for something new they should notify in the vike repo.

[brillout]

I agree, although I ain't sure how much interest they'll show in maintaining such list 🤔 Maybe it's worth a try.

[pdanpdan]

I'll make a simple repo showing the problem and open an issue on their repo referencing this issue.

[brillout]

👍

[martijndirksen]

I would prefer a warning instead of assertUsage as well. Right now this error prevents the Vue devtools from listing the component contents entirely whenever PageContext is used.

[brillout]

@martijndirksen Yea, let's give whitelisting a last chance and if we can't make it work then let's make it a warning. (Thanks for sponsonring btw! 💚)

[pdanpdan]

@brillout Can you please take over the technical part here?
vuejs/devtools#542 (comment)

[brillout]

@pdanpdan Done 👍

[pdanpdan]

Fixed in devtools

[brillout]

Neat, thank you for reaching out @pdanpdan

[brillout]

I would prefer a warning instead of assertUsage as well.

This is the plan so far: vikejs/vike#1776.