Custom directive is missing corresponding SSR transform and will be ignored

I’m currently trying to implement vue3-lazyload package to lazy load some of my images.

modules/lazyload.ts

import { UserModule } from "../utils/types";

export const install: UserModule = async ({ isClient, router, app }) => {
    if (!isClient) return;
    const vueLazyLoad = await import("vue3-lazyload");
    app.use(vueLazyLoad.default || vueLazyLoad, {
        log: false,
        lifecycle: {
            loading: () => {
                 console.log('loading...')
            },
            error: () => {
                 console.log('error loading image...')
            },
            loaded: () => {
                 console.log('loaded')
            }
        }
    });
};

and then I have this within my component template

<template>
    <img v-lazy="{ src: 'image source', loading: '/img/placeholder.jpg', error: '/img/placeholder.jpg' }"  alt="title"/>
</template>

However it works on development, but when I run build I get this error

SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.

Please any solution to fixing this will be appreciated?

[cimchd]

I had the same problem. Assuming your custom directives are named v-custom-directive1 and v-custom-directive2 you can fix it for ssr by adding the following code to the vue plugin in your vite config.

// vite.config.ts
import { defineConfig } from 'vite';
import Vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    Vue({
      template: {
        compilerOptions: {
          directiveTransforms: {
            customDirective1: () => ({
              props: [],
              needRuntime: true,
            }),
            customDirective2: () => ({
              props: [],
              needRuntime: true,
            })
          }
        }
      }
    })
  ]
});

[userquin]

https://github.com/vuejs/vitepress/issues/92#issuecomment-877665850