Nuxt 3: Unexpected token 'export'.

[LeCoupa]

Reporting a bug?

Hey, I get the same error unexpected token 'export'. since a few hours in a blank new Nuxt 3 app and I can't figure it out. Maybe you will see what is wrong. :)

Also, the error differs when I add yaml but I still get an issue.

Expected behavior

The following component should display show more. Instead I get the error in the image below.

<template>
  <div>{{ $t('showMore')}} </div>
</template>

<script lang="ts" setup>
</script>

<i18n lang="json">
{
  "en": {
    "showMore": "(Show more)"
  },
  "fr": {
    "showMore": "(Afficher)"
  }
}
</i18n>

Reproduction

I have created a blank new Nuxt 3 project with the following packages.

npm install @nuxtjs/i18n@next --save-dev
npm i @intlify/unplugin-vue-i18n

// nuxt.config.ts
import VueI18nPlugin from '@intlify/unplugin-vue-i18n'

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: [
    '@nuxtjs/i18n',
  ],
  vite: {
   plugins: [
      VueI18nPlugin.vite({}),
    ],
  }
})

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 13.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 189.55 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Brave Browser: 114.1.52.126
    Safari: 16.1

Screenshot

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• 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 Discussion.

[pfinkbeiner]

Hm might be the wrong import.

import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

instead of

import VueI18nPlugin from '@intlify/unplugin-vue-i18n'

Then you will most likely run into an issue with Internal server error: All collection items must start at the same column If so remove the plugin from additional vite config. Thats how I got it up and running.

// nuxt.config.ts
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: [
    '@nuxtjs/i18n',
  ],
})

[MasatoHokotaDive]

I get the same error in both import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'and import VueI18nPlugin from '@intlify/unplugin-vue-i18n'. I think to need plugins key. I don't get an error the no plugins key, but the translation doesn't work.

// nuxt.config.ts
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    plugins: [
      VueI18nPlugin(),
    ],
  },
  modules: [
    '@nuxtjs/i18n',
  ],
})

and

// nuxt.config.ts
import VueI18nPlugin from '@intlify/unplugin-vue-i18n'

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    plugins: [
      VueI18nPlugin.vite(),
    ],
  },
  modules: [
    '@nuxtjs/i18n',
  ],
})

[pfinkbeiner]

I made a Repository with the bare minimum. You can check it out here git@github.com:pfinkbeiner/nuxt3-vite-i18n-example.git

Try to clone it and see if it works on your machine. If so, compare the versions and configurations.

[MasatoHokotaDive]

@pfinkbeiner I fixed it I use useI18n().t instead of $t and it solved the problem. Thank you.

[kazupon]

close as it's now recommended to use unplugin-vue-i18n

thanks!