Skip to content

所有通过注入VitePress默认主题插槽的插件均无法在VitePress 2.0.0-alpha.20使用 #469

Description

@otomad

所有基于 vitepress-plugin-slot-inject-template 的插件(如:vitepress-plugin-back2top 等)均无法在 VitePress 2.0.0-alpha.20 开始的版本中使用。

报错内容:

[Vue warn]: Failed to resolve component: ImagePreview
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Layout> 
  at <Layout> 
  at <VitePressApp>

原因:

在新版的 vitepress/dist/client/theme-default/Layout.vue 文件中,开头的 <script setup lang="ts"> 被换成了 <script setup>,导致 import ${componentName} from './${componentName}.vue 语句无法成功添加进去。

说实话,我一直觉得 vitepress-plugin-slot-inject-template 的这种魔改 VitePress 的 Layout.vue 源文件的方式非常 hacker,可能有更优雅的方式,比如使用 @vue/compiler-sfc 对 vue 组件进行更深度的解析等。因为 Layout.vue 文件并不是公开的 API,假设下次 VitePress 把 Layout.vue 改个文件名或者换个位置,或者把插槽的模板内容稍微换一下,可能就会导致这里所有的插件都挂了。

此外,我注意到这里插件的 vue 组件在发布到 npm 后大多都是直接保留了 <script setup lang="ts">,也就是说下游项目用户必须要装 TypeScript 才能构建项目。我之前在云端服务器每次执行安装依赖时都是可以不用安装 TypeScript 依赖的但是现在要装 TypeScript 才能构建项目了。经我查询得知有一个 mkdist 或 vue-sfc-transformer库可以在构建时将 lang="ts" 的 vue 组件剥离为纯JS vue组件,并附带它的.d.ts文件,可以尝试一下。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions