vike-vue: Can't get vue-i18n to work with +onCreateApp

[s-ol]

I'm trying to use vue-i18n with vike, but the global $t helper is not registered correctly and causes build errors for all pages that use it.

I've attached a minimal reproduction case here: vike-repro.zip

This is the onCreateApp hook, just like in the example templates:

// https://vike.dev/onCreateApp
import type { OnCreateAppSync } from 'vike-vue';
import { i18n } from '../i18n';

export const onCreateApp: OnCreateAppSync = (pageContext) => {
  const { app } = pageContext;

  app.use(i18n);

  return app;
}

and the view component:

<template>
  <h1>Test page</h1>
  <p>this is a loalized string: {{$t('common.test')}}</p>
</template>

I can see the log for each page being built, so it's not an issue due to file naming or similar problems.
Here's the build error:

TypeError: _ctx.$t is not a function
    at file:///home/s-ol/dot/t/vike-repro/dist/server/entries/src_pages_index.mjs:33:92
    at renderComponentSubTree (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:430:9)
    at renderComponentVNode (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:376:12)
    at renderVNode (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:490:14)
    at renderComponentSubTree (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:391:5)
    at renderComponentVNode (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:376:12)
    at renderToString (/home/s-ol/dot/t/vike-repro/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:649:24)
    at renderToStringWithErrorHandling (file:///home/s-ol/dot/t/vike-repro/node_modules/vike-vue/src/renderer/onRenderHtml.ts:103:25)
    at onRenderHtml (file:///home/s-ol/dot/t/vike-repro/node_modules/vike-vue/src/renderer/onRenderHtml.ts:36:37)
    at file:///home/s-ol/dot/t/vike-repro/node_modules/vike/dist/esm/shared/hooks/executeHook.js:49:25
    ```

[brillout]

Publish the reproduction on GitHub.

[s-ol]

@brillout here you go: https://github.com/s-ol/_vike-vue-i18n-repro

[brillout]

It isn't minimal as it depends on vue-i18n. Maybe it's a vue-i18n issue or a user land issue (and not a Vike issue)?

Can you reproduce your issue without vue-i18n?

[s-ol]

Well if there is a problem integrating vue plugins, I need to depend on a vue plugin to demonstrate that, no?
If I remove vike and use the same vue plugin instantiated in the same way it works.

Whether this is down to how vike-vue works, or is somehow the fault of vue-i18n I can't tell because I don't know the internals of either plugin. If I put another plugin in vue-i18n's stead and it works, won't that just prove that vike-vue works with that plugin?

[brillout]

That's my point: let's figure out who's "fault" it is. I'd suggest to create a Vike + Vue without vike-vue boilerplate and try with that. That will likely be the most insightful.

[s-ol]

Okay, I got something. vue-i18n's vue plugin install hook tests a global variable without checking whether it is defined:

            async install(app, ...options) {
                if (((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) &&
                    !false) {
                    app.__VUE_I18N__ = i18n;
                }

ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
    at Object.install (file:///home/s-ol/dot/vike-repro/node_modules/vue-i18n/dist/vue-i18n.mjs:2284:65)

This causes the install to fail but vite/vike silently eats this error in some circumstances. It seems that maybe this error is initially ignored and reported only if further rendering does not cause any other exceptions? I could only see this error after removing references to $t for example.

[s-ol]

It seems this is down to vue-i18n misbehaving wrt global variables in a way that causes an Exception in node but not in browsers.
The following workaround get s things moving:

import type { OnCreateAppSync } from 'vike-vue';
import { i18n } from '../i18n';

export const onCreateApp: OnCreateAppSync = (pageContext) => {
  const { app } = pageContext;

  // workaround for vue-i18n SSR bug
  if (!('__VUE_PROD_DEVTOOLS__' in globalThis)) {
    (globalThis as any).__VUE_PROD_DEVTOOLS__ = false;
  }
  app.use(i18n);
}

[brillout]

Thanks for circling back on this! Up for creating an issue over at vue-i18n's repository? It's best if they know about this.

[s-ol]

@brillout yep, I opened kazupon/vue-i18n#1715

[brillout]

Neat. It would be nice to add a working example to Vike's docs but I'm seeing that https://github.com/s-ol/_vike-vue-i18n-repro doesn't include the workaround. If you could update it to include the workaround that'd be great, thanks!