[SOLVED] How to resolve Vue 3 custom renderer error

How to resolve Vue 3 custom renderer error

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?

Solution

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!