got reference error __VUE_PROD_DEVTOOLS__ is not defined when using https://unpkg.com/vue@3/dist/vue.esm-browser.js

[thinlizzy]

Vue version

3.4.6

Link to minimal reproduction

https://vuejs.org/guide/quick-start.html#enabling-import-maps

Steps to reproduce

create a Vue app by using import maps by following this link: https://vuejs.org/guide/quick-start.html#enabling-import-maps

What is expected?

the app should work

What is actually happening?

app doesn't load and we get the following error in the js console:

Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined 
<anonymous> runtime-core.esm-bundler.js:8070

System Info

No response

Any additional comments?

No response

[LinusBorg]

The error message you posted shows that you used runtime-core.esm-BUNDLER.js, while you want to use runtime-core.esm-BROWSER.js

As there was no runnable reproduction provided, I'm assuming that already was the mistake and can close this.

[thinlizzy]

I am literally using this:

	<script type="importmap">
{
	"imports": {
		"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
	}
}
	</script>

[LinusBorg]

That may be the case. I can't replicate what you do since you did not share a reproduction.

Something on your end seems to import the bundler vue version. Thats not normal. What that is, I cant guess.

[thinlizzy]

Sorry. Here is http://baudejogos.net/vuetest.html

It's a simple test example that worked before and now it keeps crashing with that same error. This is happening in the rest of the site.

Wondering why suddenly the bundler became in the way...

[LinusBorg]

If you check your network tab - that happens because of the other package you have incluced, which you get from jsdelivr.

jsdelivr's esm support automatically rewrites imports the the matching urls on jsdelivr, and that rewrite results in a rewrite to esm-bundler.

Are you saying this exact same file from jsdelivr worked before?

[interesse]

I have the same issue. I can reproduce it with the example given by Parcel with a production build.

It still worked in version v3.4.0-rc.1 and is broken since version v3.4.0-rc.2. I assume it broke with this commit: ee68c52#diff-5ab5fe7b450649335062cee0ca4f1499ae23f78f1460b187873afbe21093ef0bR160

[thinlizzy]

If you check your network tab - that happens because of the other package you have incluced, which you get from jsdelivr.

jsdelivr's esm support automatically rewrites imports the the matching urls on jsdelivr, and that rewrite results in a rewrite to esm-bundler.

Are you saying this exact same file from jsdelivr worked before?

exactly. it worked since I started using v-viewer in my website. it broke approximately last week :(

do you know is there a fix or workaround to make it to work again?

[LinusBorg]

I have the same issue. I can reproduce it with the example given by Parcel with a production build.

It still worked in version v3.4.0-rc.1 and is broken since version v3.4.0-rc.2. I assume it broke with this commit: ee68c52#diff-5ab5fe7b450649335062cee0ca4f1499ae23f78f1460b187873afbe21093ef0bR160

That sounds like a different issue, namely that Parcel doesn't support that new Flag yet which the bundler version expects to be set one way or another. You should be able to inject that as a global yourself through parcel's config

[interesse]

That sounds like a different issue, namely that Parcel doesn't support that new Flag yet which the bundler version expects to be set one way or another. You should be able to inject that as a global yourself through parcel's config

Then the documentation is wrong because it states in multiple places:

Vue will work even if these flags are not explicitly configured

e.g.

• https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags
• https://vuejs.org/api/compile-time-flags.html

[LinusBorg]

You're right insofar as the handling of the defaults happens in the build tool integrations, and Parcel's vue integration is not maintained by us. (You also don't find a Parcel section on our docs.

We can likely amend the docs in that regard.

Still, no related to this issue here.

[thinlizzy]

<script>
	var __VUE_PROD_DEVTOOLS__ = false
</script>

I solved everything with this at the start of my html...