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

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

热门相关:总裁别再玩了   横行霸道   法医王妃不好当!   法医王妃不好当!   法医王妃不好当!