How to use esm version with CDN

[juliusfriedman]

Vue version

^3.4.21

Link to minimal reproduction

https://github.com/juliusfriedman/vue-project

Steps to reproduce

Run project

What is expected?

Entire page loads

What is actually happening?

only displays html comment vnode <!----> where router import should be.

No error in console etc.

System Info

All systems but only when externalizing all depencies in production mode, if I run in debug or if I remove the externalization for vue-router everything works as expected, if I instead try to internalize vue and externalize vue-router other strange issues occur.

Any additional comments?

See also my question about this same problem on StackOverflow

Thanks in advance for your help!

If you require any additional information please let me know and I will provide ASAP!

[yangliguo7]

I cannot reproduce this issue on my end. need more information

maybe relate to ur version

[juliusfriedman]

What can't you reproduce? Locally when I build in production mode I only see the component rendered on the Home page but not the imported data of the router-view.

Are you saying when you build in production mode you are able to view the entire page and browse to home and about pages?

Let me know what other information I could possibly provide..,

Thank you!

P.s Have tried multiple versions of vue and vue-router... and removing the line of vue-router from the externals definition solves the problem but costs another 80kb

This is what I see in prod mode...

[jh-leong]

I tried removing the external configuration for vue-router in vite.config.ts under rollupOptions, and everything worked fine.

You might want to check the issues in the vue-router repository for more information.

[juliusfriedman]

Any reason why this issue was changed into a discussion? I really would like an answer as to why this occurs.

[juliusfriedman]

Just a FYI from my debugging it seems like there is a missed check in setRef function which fails to check the owner is actually not null, It only seems to throw an error depending on the version of vue I load from the CDN...

Walking the call stack I see it skips a check because the reference is basically set like ref() which makes a ref that has no value
...

This ref is later used and then when the owner is checked to update the vnode it can't process the patch call and instead leaves a comment in the dom where it was patching

Some versions will throw an error but others will not for some reason... still looking into this... BUT it looks like a problem in vue and not vue-router... still not sure...

Also my page load gets further if I simply make a function onMounted(()=>{}) in the earlier version but not in the later version.... its super weird.

The line in question is here:
https://github.com/vuejs/core/blob/dadb3632a0f824f6e6a1c246ed8788bea5cbcad6/packages/runtime-core/src/rendererTemplateRef.ts#L64

[kissu]

The fact that it's a discussion does not mean that it will not be fixed later on if it's indeed a bug.
Just a more open place where people can look into the future and open to discussion. 🤗

[juliusfriedman]

FWIW I tried 2 different CDNS for vue and vue-router..

https://esm.sh/
https://cdn.jsdelivr.net/npm/

Both seem to have issues where multiple versions of Vue somehow get imported...

This brings me back to a problem with the library packaging or the library itself...

Worst case we will collect scripts from vite and package them for use on our own CDN but I dont think we should have to, considering the tutorials say to use Vue and VueRouter from CDN I think this is something to investigate further. see

[posva]

I recall esm.sh having more options to properly handle dependencies.
The issue you have right now is that jsdelivr imports different versions of vue. Check the vue-router cdn file:

That's why you have multiple versions of Vue and why things are breaking.

Another solution would be to use import maps like the playground.

That being said, if you want to benefit from tree shaking and load less js in your application, I would recommend you not to use a CDN version for vue, vue router and pinia (a full app). Vue router is also missing the production cdn version #2242

[juliusfriedman]

Thanks for your help, I have tried inspecting the versions of the packages required manually and narrowing or setting explicitly the versions I am requesting when using externals and it still wasn't helping.

I can change my externalization process to skip based on a package name pretty easily so perhaps I should skip vue and vue-router when externalizing...

Thanks for your help!

P.s. FWIW, I have more success with the latest vue-router@4.4.0 package!

[juliusfriedman]

@posva is it possible Vue can detect when this happens and output some type of message? It was verify confusing to me to see the patch stack mangled in ways I would not expected just from having 2 versions of the library (which seems to handle refs differently)...

A simple warning / error message Detected another version of vue would be great!

[posva]

I think the devtools do. It’s not possible to add a Check without having the user pass the external Vue version to do the check. Overall, it’s not worth: cdn versions are slower than bundling with libraries like Vue, Vue router, etc. you load more than you need