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.vitepressconfig.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(),       },     },   }, ...  

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