Custom directive is missing corresponding SSR transform and will be ignored #3298

Vitaminaq · 2021-02-25T03:24:36Z

Version

3.0.5

Reproduction link

https://github.com/Vitaminaq/cfsw-vue-cli3.0/tree/vue3.0-ssr

Steps to reproduce

import { createApp } from './main'
import VueRescroll from '@wefly/vue-rescroll';
import VueImageLazyLoad from '@wefly/vue-image-lazy-load';
import { getAsyncData } from '@src/utils/publics';

const { app, router, store } = createApp()

router.isReady().then(() => {
  app.use(VueRescroll)
     .use(VueImageLazyLoad)
     .mount('#app');
})

<img
	 v-img-lazy-load						 
         src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=984172228,2724665722&fm=26&gp=0.jpg"
/>

服务端渲染的时候会报错/The server will report an error when rendering：Custom directive is missing corresponding SSR transform and will be ignored
但是客户端渲染时，是正常的/But when rendering on the client, it's normal

What is expected?

Custom directive it's normal

What is actually happening?

服务端渲染的时候会报错/The server will report an error when rendering：Custom directive is missing corresponding SSR transform and will be ignored

Vitaminaq · 2021-02-25T03:29:30Z

SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.
at Object.createCompilerError (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:16:19)
at createSSRCompilerError (C:\study\cfsw\node_modules@vue\compiler-ssr\dist\compiler-ssr.cjs.js:130:24)
at Array.ssrPostTransformElement (C:\study\cfsw\node_modules@vue\compiler-ssr\dist\compiler-ssr.cjs.js:562:41)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1740:19)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13) {
code: 60,
loc: {
file: 'C:/study/cfsw/src/modules/blog/components/blog-home-list-item.vue',
line: 7,
column: 10
},
id: 'C:/study/cfsw/src/modules/blog/components/blog-home-list-item.vue',
plugin: 'vite:vue',
pluginCode: '\n' +
'\t<div class="list-item" @click="toDetail">\n' +
'\t\t

\n' +
'\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t\t\t<img\n' +
'\t\t\t\t\t v-focus\n' +
'\t\t\t\t\t\tsrc="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=984172228,2724665722&fm=26&gp=0.jpg"\n' +
'\t\t\t\t\t/>\n' +
'\t\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t\t\t

\n' +
'\t\t\t\t\t\t{{\n' +
"\t\t\t\t\t\t\titem.nickname || '大飞哥'\n" +
'\t\t\t\t\t\t}}\n' +
'\t\t\t\t\t\t{{\n' +
'\t\t\t\t\t\t\ttime(item.creatAt)\n' +
'\t\t\t\t\t\t}}\n' +
'\t\t\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t

\n' +
'\t\t\t\t\n' +
'\t\t\t

\n' +
'\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t{{ item.viewnum }}\n' +
'\t\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t{{ item.commentnum }}\n' +
'\t\t\t\t

\n' +
'\t\t\t\t

\n' +
'\t\t\t\t\t\n' +
'\t\t\t\t\t{{ item.clicknum }}\n' +
'\t\t\t\t

\n' +
'\t\t\t

\n' +
'\t\t

\n' +
'\t\n' +
'\n' +
'<script lang="ts">\n' +
"import { defineComponent, PropType } from 'vue';\n" +
"import { timeFormat } from '@src/utils/filter';\n" +
"import ImageList from '@src/components/image-content/image-list.vue';\n" +
'\n' +
'export default defineComponent({\n' +
'\tcomponents: {\n' +
'\t\tImageList\n' +
'\t},\n' +
'\tdirectives: {\n' +
"\t\t'focus': {\n" +
'\t\t\tmounted(el) {\n' +
'\t\t\t\tel.focus();\n' +
'\t\t\t}\n' +
'\t\t}\n' +
'\t},\n' +
'\tprops: {\n' +
'\t\titem: {\n' +
'\t\t\ttype: Object as PropType<Loader.ListItem>,\n' +
'\t\t\tdefault: () => {\n' +
'\t\t\t\treturn {};\n' +
'\t\t\t}\n' +
'\t\t}\n' +
'\t},\n' +
'\tcomputed: {\n' +
'\t\tbaseApi() {\n' +
"\t\t\treturn '';\n" +
'\t\t},\n' +
'\t\theadImgUrl(): string {\n' +
'\t\t\treturn ${this.item.headimg};\n' +
'\t\t},\n' +
'\t\tarticInfo(): string {\n' +
'\t\t\tconst { msg } = this.item;\n' +
'\t\t\tif (msg.length > 80) return ${msg.slice(0, 79)}...;\n' +
'\t\t\treturn msg.slice(0, 80);\n' +
'\t\t},\n' +
'\t\timgList(): string[] {\n' +
'\t\t\tconst pool: string[] = [\n' +
"\t\t\t\t'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4024133959,3421323374&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2408640314,1202216066&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3128439526,1544234138&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3534110117,2193560125&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=224676309,2137626052&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2227141452,3914538426&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3527878628,2215288807&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=984172228,2724665722&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=726671648,2385216845&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=766611624,2535133080&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1688000231,463336738&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4024412743,1615646202&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3743140528,4019662611&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1507375745,3678937279&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=762538272,2713503463&fm=26&gp=0.jpg',\n" +
"\t\t\t\t'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3097912305,1217293897&fm=26&gp=0.jpg'\n" +
'\t\t\t];\n' +
'\t\t\t// 随机总数\n' +
'\t\t\tconst rang: number = Math.floor(Math.random() * 9);\n' +
'\t\t\tconst indexs: number[] = [];\n' +
'\t\t\t// 随机序号\n' +
'\t\t\tfor (let i = 0; i < rang; ) {\n' +
'\t\t\t\tconst index = Math.floor(Math.random() * 16);\n' +
'\t\t\t\tif (!indexs.includes(index)) {\n' +
'\t\t\t\t\tindexs.push(index);\n' +
'\t\t\t\t\ti++;\n' +
'\t\t\t\t}\n' +
'\t\t\t}\n' +
'\t\t\treturn indexs.map((i) => pool[i]);\n' +
'\t\t}\n' +
'\t},\n' +
'\tmounted() {\n' +
" console.log(this, 'ooooooooooooooooooooo');\n" +
'\t},\n' +
'\tmethods: {\n' +
'\t\ttime(creatAt: string) {\n' +
'\t\t\treturn timeFormat(Number(creatAt));\n' +
'\t\t},\n' +
'\t\ttoDetail() {\n' +
"\t\t\tthis.$router.push({ name: 'blog-detail', query: { id: this.item.articId } });\n" +
'\t\t}\n' +
'\t}\n' +
'});\n' +
'</script>\n' +
'<style lang="less" scoped>\n' +
'.list-item {\n' +
'\twidth: 100%;\n' +
'\tpadding-top: 15px;\n' +
'\t.list-content {\n' +
'\t\twidth: 100%;\n' +
'\t\tbackground-color: #fff;\n' +
'\t\t.artic-content {\n' +
'\t\t\twidth: 93%;\n' +
'\t\t\tmargin: 0 10px 0 15px;\n' +
'\t\t\tdisplay: flex;\n' +
'\t\t\tjustify-content: center;\n' +
'\t\t\talign-items: center;\n' +
'\t\t\ttext-align: left;\n' +
'\t\t\tpadding: 5px 0 10px 0;\n' +
'\t\t\t.user-img {\n' +
'\t\t\t\tflex-grow: 0;\n' +
'\t\t\t\tpadding-top: 10px;\n' +
'\t\t\t\timg {\n' +
'\t\t\t\t\twidth: 50px;\n' +
'\t\t\t\t\theight: 50px;\n' +
'\t\t\t\t\tborder-radius: 50px;\n' +
'\t\t\t\t}\n' +
'\t\t\t}\n' +
'\t\t\t.author {\n' +
'\t\t\t\tflex-grow: 1;\n' +
'\t\t\t\tfont-size: 14px;\n' +
'\t\t\t\tpadding-top: 10px;\n' +
'\t\t\t\tmargin: 0 10px;\n' +
'\t\t\t\t.title {\n' +
'\t\t\t\t\tmargin-bottom: 5px;\n' +
'\t\t\t\t\tfont-size: 16px;\n' +
'\t\t\t\t\tfont-weight: 500;\n' +
'\t\t\t\t\tmax-width: 100%;\n' +
'\t\t\t\t\tword-break: break-word;\n' +
'\t\t\t\t}\n' +
'\t\t\t\t.detail {\n' +
'\t\t\t\t\tcolor: #adadad;\n' +
'\t\t\t\t\tdisplay: flex;\n' +
'\t\t\t\t\tjustify-content: flex-start;\n' +
'\t\t\t\t\talign-items: flex-end;\n' +
'\t\t\t\t\t.author-name {\n' +
'\t\t\t\t\t\twidth: auto;\n' +
'\t\t\t\t\t\tfont-size: 12px;\n' +
'\t\t\t\t\t\toverflow: hidden;\n' +
'\t\t\t\t\t\ttext-overflow: ellipsis;\n' +
'\t\t\t\t\t\twhite-space: nowrap;\n' +
'\t\t\t\t\t}\n' +
'\t\t\t\t\t.publish-time {\n' +
'\t\t\t\t\t\twidth: auto;\n' +
'\t\t\t\t\t\tmargin-left: 10px;\n' +
'\t\t\t\t\t\tfont-size: 10px;\n' +
'\t\t\t\t\t\twhite-space: nowrap;\n' +
'\t\t\t\t\t}\n' +
'\t\t\t\t}\n' +
'\t\t\t}\n' +
'\t\t}\n' +
'\t\t.artic-msg-content {\n' +
'\t\t\tword-break: break-word;\n' +
'\t\t\tmargin: 0 15px;\n' +
'\t\t\tfont-size: 14px;\n' +
'\t\t\tline-height: 20px !important;\n' +
'\t\t}\n' +
'\t\t.oparate-num {\n' +
'\t\t\tdisplay: flex;\n' +
'\t\t\tjustify-content: center;\n' +
'\t\t\talign-items: center;\n' +
'\t\t\twidth: 100%;\n' +
'\t\t\tmargin-top: 8px;\n' +
'\t\t\tpadding-bottom: 4px;\n' +
'\t\t\tfont-size: 12px;\n' +
'\t\t\tcolor: #adadad;\n' +
'\n' +
'\t\t\tdiv {\n' +
'\t\t\t\tflex-grow: 1;\n' +
'\t\t\t\ttext-align: center;\n' +
'\n' +
'\t\t\t\t.icon-symbol {\n' +
'\t\t\t\t\theight: 0.4rem;\n' +
'\t\t\t\t\twidth: 0.4rem;\n' +
'\t\t\t\t\tmargin-right: 2px;\n' +
'\t\t\t\t\tfill: #adadad;\n' +
'\t\t\t\t}\n' +
'\t\t\t\t.num {\n' +
'\t\t\t\t\tposition: relative;\n' +
'\t\t\t\t\ttop: -2px;\n' +
'\t\t\t\t}\n' +
'\t\t\t}\n' +
'\t\t}\n' +
'\t}\n' +
'}\n' +
'.image-contain {\n' +
'\tmargin: 0 15px;\n' +
'}\n' +
'</style>\n',
frame: '5 | \t\t\t\t

\n' +
'6 | \t\t\t\t\t<img\n' +
'7 | \t\t\t\t\t v-focus\n' +
' | ^\n' +
'8 | \t\t\t\t\t\tsrc="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=984172228,2724665722&fm=26&gp=0.jpg"\n' +
'9 | \t\t\t\t\t/>'
}
Error: Couldn't resolve component "default" at "/blog/home"
at C:\study\cfsw\node_modules\vue-router\dist\vue-router.cjs.js:1996:47
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:13788) UnhandledPromiseRejectionWarning: SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.
at Object.createCompilerError (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:16:19)
at createSSRCompilerError (C:\study\cfsw\node_modules@vue\compiler-ssr\dist\compiler-ssr.cjs.js:130:24)
at Array.ssrPostTransformElement (C:\study\cfsw\node_modules@vue\compiler-ssr\dist\compiler-ssr.cjs.js:562:41)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1740:19)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
(Use node --trace-warnings ... to show where the warning was created)
(node:13788) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with
.catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:13788) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:13788) UnhandledPromiseRejectionWarning: SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.
at Object.createCompilerError (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:16:19)
at Array.ssrPostTransformElement (C:\study\cfsw\node_modules@vue\compiler-ssr\dist\compiler-ssr.cjs.js:562:41)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1740:19)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
at traverseChildren (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1682:9)
at traverseNode (C:\study\cfsw\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:1733:13)
(node:13788) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with
.catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:13788) UnhandledPromiseRejectionWarning: Error: Couldn't resolve component "default" at "/blog/home"
at C:\study\cfsw\node_modules\vue-router\dist\vue-router.cjs.js:1996:47
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:13788) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with
.catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 7)

HcySunYang · 2021-02-25T04:42:33Z

During the compilation phase, Vue will transform directives. For example, the ssrTransformShow function used to transform the v-show directive. If you have a custom directive, the corresponding transform function needs to be written by yourself and passed to the compiler through CompilerOptions.

You can refer to the implementation of v-show to write your own transform function, if your custom directives do not need to be processed, then you only need to use the following function:

export const ssrTransformCustomDir = (dir, node, context) => {
  return {
    // do nothing
    props: []
  }
}

Vitaminaq · 2021-02-25T07:36:21Z

thank you，yyds，With your help，I've solved it，but I think it should be more simplified。

// vite.config.ts
import vue from '@vitejs/plugin-vue'

export const ssrTransformCustomDir = () => {
  return {
    props: [],
    needRuntime: true
  }
}

export default defineConfig({
  plugins: [vue(
    {
    template: {
      ssr: true,
      compilerOptions: {
        directiveTransforms: {
          'img-lazy-load': ssrTransformCustomDir,
          'rescroll': ssrTransformCustomDir
        }
      }
    }
  }
  )],
  });

tcstory · 2021-10-18T08:57:56Z

wirte transform function for every custom directive is too bad

HcySunYang closed this as completed Feb 25, 2021

dewfall123 mentioned this issue Mar 23, 2021

vue 自定义指令，如何在vitepress 友好使用？ dewfall123/vitepress-for-component#14

Closed

maxerbox mentioned this issue Apr 23, 2021

Build fails due to custom directive missing an SSR Transform vuejs/vitepress#92

Closed

lidlanca mentioned this issue Jan 7, 2022

How directive in Vue 3 Works #5223

Closed

github-actions bot locked and limited conversation to collaborators Oct 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom directive is missing corresponding SSR transform and will be ignored #3298

Custom directive is missing corresponding SSR transform and will be ignored #3298

Vitaminaq commented Feb 25, 2021

Vitaminaq commented Feb 25, 2021

HcySunYang commented Feb 25, 2021

Vitaminaq commented Feb 25, 2021

tcstory commented Oct 18, 2021

Custom directive is missing corresponding SSR transform and will be ignored #3298

Custom directive is missing corresponding SSR transform and will be ignored #3298

Comments

Vitaminaq commented Feb 25, 2021

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

Vitaminaq commented Feb 25, 2021

HcySunYang commented Feb 25, 2021

Vitaminaq commented Feb 25, 2021

tcstory commented Oct 18, 2021