Vuei18n@9 doesn't work with SSR

reemhosny commented 2 years ago

Reporting a bug?

I'm using vuei18n@9 with vue cli 3, it worked well until I started to enable SSR, .it shows "Property "$t" was accessed during render but is not defined on instance".

Expected behavior

expected to work as usual .

Reproduction

https://bitbucket.org/waffarha-dev/waffarha-website-vuw/branch/vue3-ssr?dest=develop

System Info

"vue-cli-3"
"vue-i18n": "^9.2.2",
"vue-router-4"

Screenshot

`import { createI18n } from 'vue-i18n'

import en from './locales/en' import ar from './locales/ar'

const locale = localStorage.getItem('lang') ? localStorage.getItem('lang') : 'ar'

const messages = { ar, en }

const i18n = createI18n({ locale, fallbackLocale: 'ar', messages })

export default i18n `

import i18n from './lang/index.js' app.use(i18n)

Additional context

Property "$t" was accessed during render but is not defined on the instance. (node:13301) UnhandledPromiseRejectionWarning: TypeError: _ctx.$t is not a function.

Validations

[X] Read the Contributing Guidelines
[X] Read the Documentation
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
[X] The provided reproduction is a minimal reproducible example of the bug.

xfq commented 2 years ago

https://bitbucket.org/waffarha-dev/waffarha-website-vuw/branch/vue3-ssr?dest=develop is 404 for me.

reemhosny commented 2 years ago

@xfq actually I give up, it took too much time to enable SSR in vue project, so I started to migrate my project to nuxt as it has SSR built-in .

kazupon commented 2 years ago

I've come back from sick.

I could check your repo. Could you give us your repro repo again, please? 🙏

If you cannot provide it, we will close this issue.

reemhosny commented 2 years ago

I've come back from sick.

I could check your repo. Could you give us your repro repo again, please? pray

If you cannot provide it, we will close this issue.

Thanks for the reply, sorry to hear you are sick I hope you get better soon. you can check it again https://bitbucket.org/waffarha-dev/waffarha-website-vuw/branch/vue3-ssr If it doesn't work, It is my company repo so it is private and I don't have access to make it public.

kazupon commented 2 years ago

vue-i18n v9.3 beta has been already released. you can try to use it!

noook commented 2 years ago

Hello, I just tried with 9.3.6-beta and I'm having the same error message.

The configuration is as simple as installing the latest version of vue-i18n on a Nuxt 3 project (rc-12 here), and trying to access the $t function on the page.

Here is the config:

// plugins/i18n.ts

import { createI18n } from 'vue-i18n'
import en from '@/locales/en';
import fr from '@/locales/fr';

export type MessageSchema = typeof fr;

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n<[MessageSchema], 'fr' | 'en'>({
    legacy: false,
    globalInjection: true,
    locale: 'fr',
    messages: {
      en,
      fr,
    }
  })

  vueApp.use(i18n)
})

// composables/i18n.ts

import { useI18n as i18n } from 'vue-i18n'
import { MessageSchema } from '@/plugins/i18n'

export const useI18n = () => {
  return i18n<{ message: MessageSchema }, 'fr' | 'en'>()
}

// fr.ts

export default {
  hello: 'Bonjour',
  apps: '0 app | 1 app | {n} apps',
}

<script setup lang="ts">
// index.vue
// const { t } = useI18n() // This works when I uncomment

</script>

<template>
  <div class="p-8">
    <h1 class="text-2xl font-semibold">Index page</h1>
    <!-- <p class="mt-4">{{ t('hello') }} {{ userStore.user.firstName }} {{ userStore.user.lastName}}</p> -->
    <!-- error on next line ! -->
    <p class="mt-4">{{ $tc('apps', 3) }}</p>
  </div>
</template>

acn-masatadakurihara commented 1 year ago

@kazupon Same issue. The following is an excerpt from package.json.

"vue": "3.2.45",
"vite": "4.0.3",
"vite-plugin-ssr": "0.4.68",
"vue-i18n": "9.3.0-beta.13",
"@intlify/unplugin-vue-i18n": "0.8.1",

error log is here. ssr-error.log

jrutila commented 1 year ago

Hi!

I think I have this almost same issue when trying to use vue-i18n with Nuxt and SSR generate. I have nuxt/i18n with version 8.0.0-rc.4. As soon as I update vue-i18n to 9.3.0-beta.26 or beyond the generate does not work anymore and fails on following error (this error was with vue-i18n 9.4.1):

ERROR  [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 't')
  at formatParts (.../node_modules/@intlify/core-base/dist/core-base.mjs:822:15)
  at msg (.../node_modules/@intlify/core-base/dist/core-base.mjs:817:26)
  at evaluateMessage (.../node_modules/@intlify/core-base/dist/core-base.mjs:1263:22)
  at translate (.../node_modules/@intlify/core-base/dist/core-base.mjs:1085:22)
  at .../.nuxt/prerender/chunks/app/server.mjs:2900:46
...

Changing the nuxt/i18n version does not matter, so I suspect it is with vue-i18n and SSR. I have a stackblitz that will reproduce this. I tried to bring in the unplugin-vue-i18n but that didn't help. The stackblitz actually renders the pages but my local dev env fails to do that. The error is still the same in StackBlitz:

 ERROR  [unhandledRejection] Cannot read properties of undefined (reading 't')                                  9:01:04 AM

  at formatParts (node_modules/@intlify/core-base/dist/core-base.mjs:884:15)
  at msg (node_modules/@intlify/core-base/dist/core-base.mjs:879:26)
  at evaluateMessage (node_modules/@intlify/core-base/dist/core-base.mjs:1325:22)
  at translate (node_modules/@intlify/core-base/dist/core-base.mjs:1147:22)
  at eval (.nuxt/prerender/chunks/app/server.mjs:1163:46)
  at wrapWithDeps (.nuxt/prerender/chunks/app/server.mjs:1125:13)
  at Proxy.t (.nuxt/prerender/chunks/app/server.mjs:1163:12)
  at eval (.nuxt/prerender/chunks/app/server.mjs:4959:247)
  at renderComponentSubTree (node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:423:9)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:371:12)

The StackBlitz is here: https://stackblitz.com/edit/github-8pzkpn?file=nuxt.config.ts

jrutila commented 1 year ago

Regarding my above comment, this was a bug in @nuxtjs/i18n package. And it is now fixed in the next-channel. Bug: https://github.com/nuxt-modules/i18n/issues/2390 And fix: https://github.com/nuxt-modules/i18n/pull/2387

And for this bug, is it still happening with 9.4.1?

intlify / vue-i18n