Hi @ineshbose here is a reproduction of the error: https://stackblitz.com/edit/github-7hsxua?file=app.vue

Thank you 🙏

From v8.0.0-beta.12, we need to add “type”: “module” to package.json of your nuxt project. https://v8.i18n.nuxtjs.org/getting-started/setup#packagejson

We are working on improving the system so that it can work without the “type”: “module” specification, but at the moment that configuration is required.

@wahibAbdou can’t confirm - “type”:“module” in package.json doesn’t throw 500 for me anymore during build / browser run - but locally (not in vercel) build time takes 3-4 times more ~4 minutes. Also I have a lot of issues as I said above when javascript is off… seems a lot of parts are not server rendered properly

Actually this is what I’m experiencing. SSR rendering of translations is not working properly in netlify/vercel. Error has disappeared btw by adding type module, so I guess we should open another issue.

Unfortunately, I had to roll back to the old versions where everything was working fine here are these versions that work for me @nuxtjs/i18n@8.0.0-beta.11 nuxt@3.4.0 hope this helps for now till this gets solved in future updates.

From v8.0.0-beta.12, we need to add “type”: “module” to package.json of your nuxt project. https://v8.i18n.nuxtjs.org/getting-started/setup#packagejson

We are working on improving the system so that it can work without the “type”: “module” specification, but at the moment that configuration is required.

@kazupon Thank you! while I had followed this suggestion from stackoverflow about a week ago and it makes i18n work… translation still doesn’t work with JavaScript off which is very important for SEO and search indexing. Any ideas why is that?

here is a vercel build: vercel build that can be used to illustrate it along with Disable Javascript Chrome Extension

Issue 1:

I added the following plugin (in addition to the i18n.config.js) and it now translation works without JavaScript enabled BUT lang switcher is not working so I cannot change languages (url changes with adding /en and then it doesn’t remove it for greek language) … there is need for documentation improvement I guess or it should somehow work out of the box without an extra plugin… not sure about langswitcher …

i18n.server.js

import { createI18n } from 'vue-i18n'
import en from '../locale/en.js'
import el from '../locale/el.js'

export default defineNuxtPlugin(({ vueApp }) => {
   const i18n = createI18n({
     legacy: false,
     globalInjection: true,
     locale: 'el',
     messages: {
         en, el
     }
   })

   vueApp.use(i18n)
 })

LangSwitcher.vue

<script setup>
const { locale } = useI18n()
const switchLocalePath = useSwitchLocalePath()
</script>
<template>
   <div class="language-switch">
       <div v-if ="locale === 'el'">
           <NuxtLink :to="switchLocalePath('en')"><img src="/uk.png" alt="English Flag" class="flag"/></NuxtLink>
       </div>
       <div v-else>
           <NuxtLink :to="switchLocalePath('el')"><img src="/el.webp" alt="Greek Flag" class="flag"/></NuxtLink>
       </div>
   </div>

</template>

Issue 2:

I found another issue when javascript is off:

in the data store (pinia) in one of the methods I am doing

const nuxt = useNuxtApp()
nuxt.$i18n.t('insightGenerator.monthly', { param }) 

and this part is not translated with javascript off

You can check again with this different vercel build (after introducing i18n.server.js plugin) along with Disable Javascript Chrome Extension to see how lang switcher doesn’t behave properly with javascript off