__VUE_PROD_DEVTOOLS__ issue on build with vite with 9.4.1

[hschaefer123]

Reporting a bug?

Hi,
i am currently using vitepress 1.0.0-rc.20 and also vue-i18n 9.4.1 (updated from 9.3.0).

Now the build process fails with error
VUE_PROD_DEVTOOLS is not defined!
inside vue-i18n.

Workaround:
I was able to get it running while removing the check form by changing to lines
(... env != "production" || VUE_PROD_DEVTOOLS
by removing the second var, but it would be great to get that fixed.

Without that var, vitepress/vite ssr build works as expected.

Regards
Holger

Expected behavior

No build errors using vite

Reproduction

Using vitepress inside custom theme index.ts

import { createI18n } from "vue-i18n";
const i18n = createI18n({
locale: "de-DE", // set locale
fallbackLocale: "en-US", // set fallback locale
numberFormats,
});
ctx.app.use(i18n);

System Info

System:
    OS: macOS 13.6
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.95 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /opt/homebrew/opt/node@18/bin/node
    npm: 9.6.7 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.6.12 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 117.0.5938.92
    Safari: 16.6
  npmPackages:
    vitepress: ^1.0.0-rc.20 => 1.0.0-rc.20 
    vue: ^3.3.4 => 3.3.4 
    vue-i18n: ^9.4.1 => 9.4.1 
    vue-inline-svg: ^3.1.2 => 3.1.2 
    vue3-markdown-it: ^1.0.10 => 1.0.10

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions

[kazupon]

Hi! Thank you for your reporting!

I've just fixed and released vue-i18n v9.5 and @intlify/unplugin-vue-i18n latest version.
So, vitepress is vite application.
That mean, you can use @intlify/unplugin-vue-i18n in .vitepress/confing.ts

import { defineConfig } from 'vitepress'
import vueI18n from '@intlify/unplugin-vue-i18n/vite'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  vite: {
    plugins: [vueI18n({
      ssr: true,
    })]
  },
  // something your configration ...

Thanks!

[hschaefer123]

Hi Kazuya,

thanks for the info concerning the unplugin.

Right now, i am still running into issues with 9.5.0:

Concerning usage of the plugin, how can apply my custom options to vue-i18n?

import { createI18n } from "vue-i18n";
const i18n = createI18n({
      locale: "de-DE", // set locale
      fallbackLocale: "en-US", // set fallback locale
      numberFormats,
});
ctx.app.use(i18n);

Do i need to import both packages unplugin and also vue-18n,
because the createI18n is not exported from the plugin?

If the unplugin is the better vite/vitepress option,
how can i set my options including numberFormats with the plugin?

Regards Holger

[kazupon]

I've added example for vitepress
https://github.com/intlify/vue-i18n-next/tree/master/examples/ssr/vitepress
You can refer to it.

vitepress is both a vue application and a vite application.

You need to understand them.

unplugin-vue-i18n is a plugin for vite. The plugin provides various optimizations that make using vue-i18n with vite a hassle.
This SSR is one of them.

The vitepress configuration is in .vitepress/config.(ts|js). In that configuration, you can also configure vite.
You need to configure unplugin-vue-i18n there.

vue-i18n is a plugin for vue.
vitepress can be extended to Vue app instances like the code you presented. You need to install the vue-i18n plugin as well as unplugin-vue-i18n.