Build fails with vite-ssg

[praburangki]

I've encountered an error while building, I thought there was something wrong with my configuration then I tried to reproduce using https://github.com/antfu/vitesse.

I've tried using this two approach:

1. content of main.ts:

import 'virtual:windi.css'
import './styles/main.css'
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'virtual:generated-pages'
import { setupLayouts } from 'layouts-generated'
import { MotionPlugin } from '@vueuse/motion'
import App from './App.vue'

const routes = setupLayouts(generatedRoutes)

// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
  App,
  { routes },
  (ctx) => {
    ctx.app.use(MotionPlugin)
    // install all modules under `modules/`
    Object.values(import.meta.globEager('./modules/*.ts')).map(i => i.install?.(ctx))
  },
)

2. Using the module

import { MotionPlugin } from '@vueuse/motion';
import { UserModule } from '~/types';

export const install: UserModule = ({ app, isClient }) => {
  isClient && app.use(MotionPlugin);
};

The build script: cross-env NODE_ENV=production vite-ssg build

and the result of the build returns the message:

What am I missing here? thank you

[Tahul]

Hello @praburangki ;

I know that this happens, actually I do have the same problem using VitePress (for the @vueuse/motion docs).

I'm actually investigating about this error, as this is only happening on Vue 3 with SSG, this is completely undocumented and needs me to dig into the directives implementation of Vue 3.

I think this error (that breaks your build) should only be a warning.

My directive works fine with SSG/SSR (for instance Nuxt 2 runs it well).

I might submit a PR for that really soon, I hope it will be fixed in next Vue version.

As a workaround, you can actually use useMotion with ref(), that will be working server-side.

I know this is not the best workaround as it prevents you from using the nice v-motion directive, but this will be fixed as soon as possible, at least I hope so!

Thank you for your issue, I keep this open and will keep you posted.

👋

[Tahul]

Actually I found this, which seem to be a great path to take to solve the problem: https://github.com/intlify/vue-i18n-extensions/tree/c9a529a5fa7e1df4661cd42bee62e980fcd0d631#pre-translation-with-using-v-t-custom-directive

I will try to find out an elegant solution to solve this.

[Tahul]

Hey @praburangki ;

@antfu has been providing a fix for the issue causing the errors on build!

You only have to npm install --save-dev patch-vue-directive-ssr in your repository, and the error will be gone.

I'll be documenting this and add it to the readme.

Once done, this issue will be closed. 😄