Custom directive is missing corresponding SSR transform and will be ignored

背景

最近在给业务组件库集成指令库，将各个项目中常用的指令如一键复制、元素和弹窗拖拽等封装到一起，进行统一发版维护。

业务组件库项目架构采用的是pnpm+vite+vue3+vitepress，其中vitepress主要做组件库文档站点同时展示可交互的组件。

问题

开发运行时指令库demo没有问题，构建编译时就会报错，编译不通过，报错：

Custom directive is missing corresponding SSR transform and will be ignored

一番查找原因，发现是VitePress应用在生成静态构建时是通过Node.js服务端渲染的，识别不了我们的包含

自定义指令的组件。

解决方式

一番搜索和chatgpt问答后，参考了https://blog.csdn.net/theoneEmperor/article/details/114087464，在vite.config.ts中进行配置，

还是构建编译不过，反而产生新的错误，

又试过https://www.npmjs.com/package/patch-vue-directive-ssr库，这个，本地构建编译不报错了，但线上构建还是会报错

最后在官方vitepress文档中找到

使用或展示非SSR友好(比如包含自定义指令)的组件，可以使用 vitepress中的全局组件 ClientOnly将其包裹

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

但包裹后，还是会构建不通过，官方文档没有明确的说明，还得进行如下配置才行：

//docs\.vitepress\config.ts  文件
...
const buildTransformers = () => {
  const transformer = () => {
    return {
      props: [],
      needRuntime: true,
    }
  }

  const transformers = {}
   // 自定义的指令要添加到该数组中
  const directives = [
    'yun-copy',
    'yun-draggable',
    'yun-long-press',
    'yun-water-marker',
  ]
  directives.forEach((k) => {
    transformers[k] = transformer
  })

  return transformers
}

...
  vue: {
    template: {
      ssr: true,
      compilerOptions: {
        directiveTransforms: buildTransformers(),
      },
    },
  },
...

现在分享出来，希望对你有所帮助，记得点个赞哟~