如何解决 Vue 3 自定义渲染器错误答案

【问题标题】：How to resolve Vue 3 custom renderer error如何解决 Vue 3 自定义渲染器错误
【发布时间】：2021-10-18 18:52:27
【问题描述】：

我正在尝试使用 Vue 3 和 Vite 构建自定义渲染器。渲染器在其 original repo（克隆该 repo、npm install 和 npm run dev）中工作，但当我发布该渲染器并安装到另一个项目时失败。

要重新创建，要么：

Clone, install, and run this repo，或
创建一个 Vue 3 项目，npm install mvp-renderer，然后从 mvp-renderer 导入 { createApp } 而不是 vue。

工作的自定义渲染器将 custom-renderer 类添加到每个 DOM 元素；在损坏的版本中，没有任何内容呈现给 DOM，当调用 mount 函数时，我看到以下错误：

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

关于如何解决的任何想法？

【问题讨论】：

我花了很多时间在这上面，没有任何运气......但我认为 mvp-renderer 使用了一些 Vue 的内置代码（如 ensureRenderer()）并且可能会有 2 个 Vue 渲染器处于活动状态同时在 DEV 模式下。也许 Vite Vue 插件添加了一个 Vue 渲染器。这种设置的问题是内部 Vue 变量“currentRenderingInstance”不知何故为空，这可能意味着“createApp”函数缺少一些关键功能。
@FerryKranenburg 感谢您查看！这肯定给了我更多的继续 - 我遇到了一个类似的问题here，但不确定从哪里开始找到那个重复的实例。我会更深入地研究它，看看我能找到什么。

【解决方案1】：

感谢 Ferry Kranenburg 的建议，我能够找到解决此问题的方法 - 看起来问题在于 Vite 添加了一些额外的功能。

我向the renderer 添加了一个新的build:renderer 命令，当我现在从NPM 安装时它工作正常。该命令只是运行常规的 Typescript 编译，而不是执行 Vite 的完整构建过程。

要查看它的运行情况，您可以从上面clone the implementation，运行npm install mvp-renderer@latest，然后运行npm run dev，看看它是否正常工作。

看起来在 Vite 中制作渲染器原型可以正常工作，但如果您想将其捆绑用于生产，则需要自行编译渲染器。再次感谢渡轮！

【讨论】：