How to resolve Vue 3 custom renderer error

Question

I'm trying to build a custom renderer using Vue 3 and Vite. The renderer is working in its original repo (clone that repo, npm install, and npm run dev), but failing when I publish that renderer and install on another project.

To recreate, either:

Clone, install, and run this repo, or
Create a Vue 3 project, npm install mvp-renderer, and import { createApp } from mvp-renderer instead of vue.

The working custom renderer adds the class custom-renderer to every DOM element; in the broken version, nothing renders to the DOM and I see the following error when the mount function is called:

[Vue warn]: resolveComponent can only be used in render() or setup().

Any thoughts on how to fix?

I spent to much time on this, without any luck... But I think the mvp-renderer uses some builtin code of Vue (like ensureRenderer()) and probably there will be 2 Vue renderers active at the same time while in DEV mode. Maybe the Vite Vue plugin adds a Vue renderer. The problem with this setup is that the internal Vue variable 'currentRenderingInstance' is null somehow and this could probably mean the 'createApp' function is missing some critical functionality. — Ferry Kranenburg, Aug 23 '21 at 18:41
@FerryKranenburg Thanks for checking it out! That definitely gives me a bit more to go on - I ran into a similar question [here](https://stackoverflow.com/questions/64231911/vue-3-resolvecomponent-can-only-be-used-in-render-or-setup) but wasn't sure where to start to find that duplicate instance. I'll dig more into it and see what I can find. — Sander Moolin, Aug 27 '21 at 15:03

score 1 · Accepted Answer · answered Aug 27 '21 at 15:32

Thanks to Ferry Kranenburg's suggestion, I was able to find the fix for this - it looks like the problem was Vite adding some extra functionality.

I added a new build:renderer command to the renderer and it's working correctly when I install from NPM now. That command just runs a regular Typescript compile rather than doing Vite's full build process.

To see it in action, you can clone the implementation from above, run npm install mvp-renderer@latest, and run npm run dev see the it working without any errors.

Looks like prototyping a renderer in Vite works fine, but if you want to bundle it for production, you'll need to compile the renderer on its own. Thanks again Ferry!

How to resolve Vue 3 custom renderer error

1 Answers1