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(),
},
},
},
...
现在分享出来,希望对你有所帮助,记得点个赞哟~
Custom directive is missing corresponding SSR transform and will be ignored的更多相关文章
- [Angular] @ViewChild read custom directive and exportAs
For example we have a component: <Card ></Card> And a driective: <Card highlighted> ...
- [Angular] Custom directive Form validator
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...
- Collection View Programming Guide for iOS---(六)---Creating Custom Layouts
Creating Custom Layouts 创建自定义布局 Before you start building custom layouts, consider whether doing so ...
- babeljs源码
babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...
- 关于Eclipse Modeling Framework进行建模,第二部分
使用 Eclipse Modeling Framework 进行建模,第 2 部分 Eclipse 的 Java Emitter Templates(JET) 是一个开放源代码工具,可以在 Eclip ...
- Vue 2.0 学习路线
「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- 初学Vue2.0--基础篇
概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...
- Vue.js 整理笔记
以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...
- Angular概念纵览
Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...
随机推荐
- 购物车,实现增删改查;无bug,还有一个直接修改购物车数量功能未实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用vSphere Update Manager 升级 ESXi 主机
使用vSphere Update Manager 升级 ESXi 主机 vSphere Update Manager vSphere Update Manager 是用于升级.迁移.更新和修补群集主 ...
- Unity3D中的Attribute详解(一)
首先来看一下微软官方对Attributes(C#)的定义: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/conce ...
- vue指令之属性指令
目录 属性指令 示例 属性指令 标签上的属性可以绑定变量,变量变化,属性也会变化 # 什么是属性?比如: href/src/name/value/class/style... 语法: v-bind:属 ...
- 通过python修改本地ip
写在前面, 1 对于个人公司需要固定ip,而回家需要用到家里的ip, 2对于公司it人员,每台电脑都需要设置ip,,尤其批量的时候,这个作为it的自己知道 3运维人员,可以通过ip测试哪些ip可以用, ...
- [大数据]Hadoop HDFS文件系统命令集
基本格式: hadoop fs -cmd [args] 1 Query 显示命令的帮助信息 # hadoop fs -help [cmd] 查看hadoop/hdfs的用户 # hdfs dfs -l ...
- YII文件上传
<span style="font-size:14px;">use yii\web\UploadedFile; public function actionDoarta ...
- win10环境下 VMware Workstation Pro 安装centos7无法上网
一.安装centos7 网上类似的教程太多了,我就不一一写了,提供两个网址,先按照教程安装 VMware Workstation Pro ,秘钥在第二个链接里面(亲测可用), 安装完VMware在根据 ...
- shell执行一个程序过程
1:shell调用执行程序或脚本 2:unix内核启动一个新的进程,在该进程中执行所指定的程序. 3:如果是编译型程序,内核成执行,如果无法执行指定的程序,返回"not executable ...
- Git&GitHub简介与入手(一)
一.Git版本控制 1.集中式版本控制工具:SVN(版本控制集中在服务器端,会有单点故障风险): 2.分布式版本控制工具:Git: 3.Git简史 Talk is cheap, show me the ...