Subscribe on changes!

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

avatar
Jan 8th 2024

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

avatar
Jan 8th 2024

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.

avatar
Jan 8th 2024

I am literally using this:

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

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.

avatar
Jan 9th 2024

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...

avatar
Jan 9th 2024

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?

avatar
Jan 9th 2024

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: https://github.com/vuejs/core/commit/ee68c525f06e02c78655ade680a579e4cf85a314#diff-5ab5fe7b450649335062cee0ca4f1499ae23f78f1460b187873afbe21093ef0bR160

avatar
Jan 9th 2024

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?

avatar
Jan 9th 2024

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

avatar
Jan 9th 2024

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.

avatar
Jan 9th 2024

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.

avatar
Jan 10th 2024
<script>
    var __VUE_PROD_DEVTOOLS__ = false
</script>

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