Custom directive is missing corresponding SSR transform and will be ignored

这篇具有很好参考价值的文章主要介绍了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(),
      },
    },
  },
...

现在分享出来,希望对你有所帮助,记得点个赞哟~文章来源地址https://www.toymoban.com/news/detail-486324.html

到了这里,关于Custom directive is missing corresponding SSR transform and will be ignored的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx : [warn] the “ssl“ directive is deprecated, use the “listen ... ssl“ directive instead 解决

    配置nginx 加载 证书,卸载SSL 启动时告警 nginx 报错 : [warn] the \\\"ssl\\\" directive is deprecated, use the \\\"listen ... ssl\\\" directive instead: 错误配置 nginx版本在1.15.x版本之后的,ssl on; 要去掉,listen 443; 改为 listen 443 ssl 调整后配置文件

    2024年02月11日
    浏览(95)
  • Required request body is missing 报错解决

    用 PostMan 测试 POST 类型的接口时,出现错误: 直白的翻译就是该传的参数没能传递到后端。我的传参是表单格式: 后端接口的参数接收使用了注解 @RequestBody ,猜想应该是参数格式有问题,把它改成 JSON 格式传递,再次运行就 OK 了。

    2024年02月12日
    浏览(51)
  • nginx: [warn] the “ssl“ directive is deprecated, use the “listen ... ssl“ directive instead in /

    原因: nginx在1.15.x版本之后不再使用 ssl on; 解决方法: ssl on; 要去掉,将 listen 443; 改为 listen 443 ssl; 原配置文件: worker_processes  1; events {     worker_connections  1024; } http {     include       mime.types;     default_type  application/octet-stream;     sendfile        on;     keepalive_timeout  

    2024年02月04日
    浏览(48)
  • postman请求时报错Required request body is missing:

    postman调试端口时后台报错:Required request body is missing: postman这里使用了错误的书写方式 将网页请求参数以json的形式写在Body的raw中

    2024年02月12日
    浏览(60)
  • flutter报错-cmdline-tools component is missing

    安装完androidsdk和android studio后,打开控制台,出现错误 解决办法 找到自己安装android sdk的位置,然后安装上,并将下面的勾选上 再次运行 flutter doctor 不报错,出现以下画面

    2024年02月09日
    浏览(46)
  • 【IDEA】解决@param XX tag description is missing问题

    目录 前言 正题 1.1 原因分析 1.2 解决方法  但是!!!(干掉问题) 1.1 到设置中将注释缺陷检查关掉即可  补充 在开发Java项目的过程中,我们常常会使用到IntelliJ IDEA这款强大的集成开发环境。IDEA不仅提供了丰富的代码补全、调试和版本控制等功能,还内置了一套严格的代

    2024年03月17日
    浏览(43)
  • NotImplementedError: Module is missing the required “forward“ function

    在做中文文本情感分析model类定义的时候报错如下: 有两种可能: 1.重写父类函数时,函数名称写错,我将写成了 最终导致程序报错: 2.def forward函数与def __init__(self,config):一定要对齐。

    2024年02月14日
    浏览(49)
  • Required request body is missing: 前端接口报错错误解决

    在前几天的工作中遇到了一个小小的问题 这是完整报错: 这个接口在Apifox上经过测试是没有问题的,那么因此就是前端接口设置出了问题。 解决方法: 这个接口报错的大意是:必需的请求正文缺失 因此检查一下接口文档,发现数据是写在body里的 因此返回检查接口代码,代

    2024年02月15日
    浏览(45)
  • Api接口出现Required request body is missing的解决方法

    在使用PostMan 测试接口的时候,出现如下问题:

    2024年02月15日
    浏览(46)
  • flutter cmdline-tools component is missing可能的问题。

    flutter版本 Flutter 3.3.10 andorid studio版本 2021.3.1 Patch 1 打开android studio 工具栏找到tools,找到下面的SDK manager,勾选住下图红框选中的内容,安装即可。 如果你修改过sdk的默认安装目录,如下图 那么你需要修改flutter配置来指定android-sdk目录。 在CMD里输入 然后运行flutter doctor 检查一

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包