Vue 3 Support - Getting a Component is missing template or render function with Vue 3 RC

Question

Vue 3 Support - Getting a Component is missing template or render function with Vue 3 RC

EKami opened this issue 4 years ago · comments

Hello,
I'm getting the following error with Vue 3, any idea how I can solve it?

vue.js:1170 [Vue warn]: Component is missing template or render function. 
  at <VueSpeedometer value="333" > 
  at <SpeedMeter> 
  at <SpeedtestView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Thanks!

Arun Kumar · Answer 1 · Fri Sep 18 2020 12:27:14 GMT+0800 (China Standard Time)

@EKami I still need to work on making a version compatible with Vue 3. Basically it will be v2.0 vue-speedometer that will be compatible with Vue 3. As mentioned in the README, v2.x will be compatible with Vue 3, v1.x will be compatible with Vue 2

I was waiting for stable Vue 3 release ... I'm yet to look into compatibility issues with Vue 3 ...

PRs are welcome ...

Thanks!

Tuatini Godard · Answer 2 · Fri Sep 18 2020 13:44:54 GMT+0800 (China Standard Time)

@palerdot I see, sorry I thought all Vue 2 components were compatible with Vue 3, I just learned recently there were breaking changes. I'm just starting with Vue, I don't think I'll be of much use for the PR but I will see what I can do.

Arun Kumar · Answer 3 · Fri Sep 18 2020 20:09:21 GMT+0800 (China Standard Time)

I see following message here - https://v3.vuejs.org/guide/migration/introduction.html#notable-new-features

We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.

I will wait for official migration instructions. Meanwhile, if you come across any information about Vue 3 migration pls post here.

Tuatini Godard · Answer 4 · Fri Sep 18 2020 20:17:02 GMT+0800 (China Standard Time)

Understood, thanks :)

Arun Kumar · Answer 5 · Fri Oct 02 2020 23:03:56 GMT+0800 (China Standard Time)

Might be related to vite (vue build tool) issue - vitejs/vite#610

Will keep a tab on this issue and see if it fixes this

Arun Kumar · Answer 6 · Fri Oct 02 2020 23:06:19 GMT+0800 (China Standard Time)

@EKami As per vitejs/vite#610 this seems to be fixed by vite (vue build tool) and they recently closed this issue. Can you upgrade all your dependencies and see if this is fixed? If not, please post your system information and other relevant information so that I could provide this information in vitejs/vite#610. Thanks.

Tuatini Godard · Answer 7 · Fri Oct 02 2020 23:14:16 GMT+0800 (China Standard Time)

Hi @palerdot , it seems vite is still in rc4 since 2 months now, I'll probably have to wait for a new release in order to test the code.

Arun Kumar · Answer 8 · Fri Oct 02 2020 23:37:58 GMT+0800 (China Standard Time)

@EKami Thanks for checking out. I'm not sure why they closed the issue while the PR for the fix is open and yet to be merged - vitejs/vite#841. Will keep an eye on this issue and see if it fixes this problem.

Tuatini Godard · Answer 9 · Fri Oct 02 2020 23:45:28 GMT+0800 (China Standard Time)

Still, please reopen this issue till a release has been made.

Understood, thanks a lot for your support :)

Arun Kumar · Answer 10 · Fri Oct 02 2020 23:48:43 GMT+0800 (China Standard Time)

@EKami Sorry I posted the reply wrongly in this issue. I was intending to reply in the vite repo.

I will still keep this issue open and follow up on the main issue - vitejs/vite#610, and make sure a release in vite fixes this issue.

Sorry for the trouble.

Arun Kumar · Answer 11 · Fri Oct 02 2020 23:50:41 GMT+0800 (China Standard Time)

I was intending to reply in the vite repo.

I just asked them to reopen the issue so that people have a better idea on where the problem comes from. (vitejs/vite#610 (comment))

Arun Kumar · Answer 12 · Sat Oct 03 2020 00:00:45 GMT+0800 (China Standard Time)

@EKami If this issue is a deal breaker for your projects, you could manually clone the vite repo somewhere and locally link for development. Instructions for this from vite repo - https://github.com/vitejs/vite#using-master-branch

You could switch back to published npm package by doing yarn unlink vite in your repo, and can upgrade the package to new released version. Just a suggestion in case you are blocked on your Vue 3 projects.

Tuatini Godard · Answer 13 · Sat Oct 03 2020 01:01:50 GMT+0800 (China Standard Time)

I will still keep this issue open and follow up on the main issue - vitejs/vite#610, and make sure a release in vite fixes this issue.
Sorry for the trouble.

No worries :)

If this issue is a deal breaker for your projects, you could manually clone the vite repo somewhere and locally link for development. Instructions for this from vite repo

For the moment I can do without, but eventually, I will need it, as soon as the vite repo gets updated I'll update you if I still get the error or not. Thanks a lot!

Ritik Patni · Answer 14 · Fri Jun 18 2021 20:43:02 GMT+0800 (China Standard Time)

@palerdot Any update on Vue 3 support for this?

Arun Kumar · Answer 15 · Sat Jun 19 2021 11:40:41 GMT+0800 (China Standard Time)

@RitikPatni This was an vite issue. With Vite updated to latest version, this should not be a problem. Please confirm if you are still facing this issue.

@EKami Can you please confirm if your issue was fixed after upgrading to latest Vite?

Since Vue 3 is api compatible with vue 2, it should work out of box without any issues (unless we hit any vite or other build related issues.)

Ritik Patni · Answer 16 · Sat Jun 19 2021 11:52:12 GMT+0800 (China Standard Time)

@palerdot I tried installing it in Vue 3 Vue CLI project and it won't install it because of vue 2 being one of its peer dependencies

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: generic-web@1.25.0
npm ERR! Found: vue@3.1.1
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.10" from vue-speedometer@1.8.0
npm ERR! node_modules/vue-speedometer
npm ERR!   vue-speedometer@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/ritik/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ritik/.npm/_logs/2021-06-19T03_45_14_832Z-debug.log

Then after trying to install it by force and then using it I was getting this error

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

After this, I tried to make changes in vue.config.js but had to drop it as I needed something quick and went with another approach

Arun Kumar · Answer 17 · Sun Jun 20 2021 11:37:45 GMT+0800 (China Standard Time)

@RitikPatni Thanks for the info. The component itself would run without problem on a Vue 3 codebase.

One of the problems with upgrading is vue docs itself is lacking in this respect. For eg: https://v3.vuejs.org/guide/migration/introduction.html

We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage.

In any case, Let me try and make an upgrade branch. I will update the progress on this issue tracker.

Ritik Patni · Answer 18 · Sun Jun 20 2021 13:15:32 GMT+0800 (China Standard Time)

@palerdot Not sure about the docs, but the issue has been resolved now, and migration build is available

Here is the issue link & here are the docs related to migration link

Arun Kumar · Answer 19 · Mon Jun 21 2021 11:19:33 GMT+0800 (China Standard Time)

@RitikPatni Thanks for the links. I will update this issue with vue 3 compatibility progress

Arun Kumar · Answer 20 · Mon Jun 21 2021 11:20:21 GMT+0800 (China Standard Time)

Also, PRs are also appreciated.

Ritik Patni · Answer 21 · Mon Jun 21 2021 12:44:22 GMT+0800 (China Standard Time)

@palerdot Sure will try to raise a PR with Vue 3 compatibility if I can get it right.

Arun Kumar · Answer 22 · Tue Jun 22 2021 11:33:33 GMT+0800 (China Standard Time)

@palerdot Sure will try to raise a PR with Vue 3 compatibility if I can get it right.

@RitikPatni Thank you.

Arun Kumar · Answer 23 · Thu Jun 30 2022 23:51:49 GMT+0800 (China Standard Time)

V2.x is released with Vue 3 support.

Please refer this issue for more details - #55