Custom directive is missing corresponding SSR transform and will be ignored
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
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
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)
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: []
}
}
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
}
}
}
}
)],
});
wirte transform function for every custom directive is too bad