Error parsing "nuxtI18n" component option in file

[Luferov]

Version

nuxt: 2.14.7 nuxt-i18n: 6.15.3

nuxt.config.js

{
 buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    ['nuxt-i18n', {
      lazy: true,
      langDir: 'lang/',
      defaultLocale: 'ru',
      locales: [
        { code: 'ru', file: 'ru.ts' },
        { code: 'en', file: 'en.ts' }
      ]
    }]
  ]
}

At the beginning of the assembly, it issues such warnings, and not on all pages.

Could this cause problems?

[rchl]

Can you post the source of one of those files?

If you actually don't use nuxtI18n option in your pages then you can disable parsePages and the warning should go away.

[Luferov]

I use TS . My component. When I delete get bc(), warning disappears. Perhaps, component style is bad way...

<template lang="pug">
  bread-crumbs(:items="bc")
    v-row Dashboard
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { MetaInfo } from 'vue-meta'
import BreadCrumbs from '~/components/BreadCrumbs.vue'
import { BreadCrumbsItem } from '~/types/devind'
import TwoColumns from '~/components/global/TwoColumns.vue'

@Component<DashboardPageIndex>({
  components: { TwoColumns, BreadCrumbs },
  middleware: ['auth'],
  head (): MetaInfo {
    return { title: 'Dashboard' } as MetaInfo
  }
})
export default class DashboardPageIndex extends Vue {
  get bc (): BreadCrumbsItem[] {
    return [{ text: 'Dashboard', to: this.localePath({ name: 'dashboard' }), exact: true }]
  }
}
</script>

[Luferov]

If use this style, its ok.

<template lang="pug">
  bread-crumbs(:items="bc")
    v-row Dashboard
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { MetaInfo } from 'vue-meta'
import BreadCrumbs from '~/components/BreadCrumbs.vue'
import { BreadCrumbsItem } from '~/types/devind'
import TwoColumns from '~/components/global/TwoColumns.vue'

@Component<DashboardPageIndex>({
  components: { TwoColumns, BreadCrumbs },
  middleware: ['auth'],
  computed: {
    bc (): BreadCrumbsItem[] {
      return [{ text: 'Dashboard', to: this.localePath({ name: 'dashboard' }), exact: true }]
    }
  },
  head (): MetaInfo {
    return { title: 'Dashboard' } as MetaInfo
  }
})
export default class DashboardPageIndex extends Vue { }
</script>

[rchl]

Since the parsing of pages is a custom code, it only works with basic syntaxes. Even if it's not crashing in your second example, it might not be able to extract nuxtI18n options had you defined them. So in your case, I'd suggest disabling parsePages and if you need to specify per-page options, use pages option in module configuration.

[darthf1]

Hi @rchl, I have the same issue, but I think it is introduced by a version change because I have not changed anything to my nuxtI18n config for a long time. Also, I get this error 8 times, whilst I have 30+ pages which have the same setup.

I'll try to find out which version update this was.

yarn run v1.22.5
$ nuxt-ts build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
✔ Builder initialized
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/aPage.vue".
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/anotherPage.vue".
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue".
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue". 
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue". 
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue".
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue".
 WARN  [nuxt-i18n] Error parsing "nuxtI18n" component option in file "/usr/src/client/pages/folder/etc.vue".
✔ Nuxt files generated

import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  name: 'MyComponent',
  middleware: ['auth', 'project'],
  nuxtI18n: {
    paths: {
      en: '/en/path',
      nl: '/nl/path',
    },
  },
})
export default class MyComponent extends Vue {}

nuxt.config.ts

import { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  modules: [
    [
      'nuxt-i18n',
      {
        defaultLocale: 'nl',
        parsePages: true,
        locales: [
          { code: 'nl', file: 'nl-NL.json' },
          { code: 'en', file: 'en-US.json' },
        ],
        lazy: true,
        langDir: 'translations/',
        seo: false,
      },
    ],
  ],
}

export default config

[leeuwd]

Same here

[rchl]

Maybe someone has time to figure out in which version exactly it has regressed. It would speed up progress in this issue.

[xfyre]

Same issue after upgrading to the latest version (currently it's 6.15.4)

@rchl If that helps, my upgrade was from 6.15.1 to 6.15.4.

P.S. The problem doesn't seem to really affect localization.

[darthf1]

Unfortunately downgrading from 6.15.4 to 6.15.1 has no impact. Could it be a dependency?

[ferleal]

Also having the same issue, but I detected that some files were not throwing the same warns, so checking them, the only difference was that the files that throws the warns have computed functions.

  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }

hope it helps debug this.

[darthf1]

I think this is related to babel.

What I did was create a new Nuxt project and compared package.json and nuxt.config.ts of my project to the newly created Nuxt project.

I noticed a lot of babel/ and @babel/ going on in my project, both included as packages in package.json and also some entries in a custom build config.

I synched the fuiles in my project with the newly created Nuxt project, which essentially was deleting all references to (@)babel, did a yarn install, yarn upgrade and a new build. The issues with nuxt-i18n disappeared.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[belvederef]

Still experiencing this issue. In my case, it happens if I use any external variable/import in the nuxtI18n component options. E.g. this works:

@Component({
  nuxtI18n: {
    locales: ['en'],
  },
})

while the code below triggers the error and does not let nuxtI18n apply the in-component options for the page.

const myLocales = ['en'];

@Component({
  nuxtI18n: {
    locales: myLocales,
  },
})

I was not able to overcome this issue, it's a huge blocker

Edit: This issue is nastier than I thought. I get the issue even if I try to specify some TS typings. E.g.:

@Component({
  nuxtI18n: {
    locales: ['en'] as Array<string>,
  },
})

[xinbenlv]

Having the same issue. Hope it can be prioritized.

[nachoadjust]

We get the same error in the same conditions as @belvederef reported. Is there any update on this?

[gaoxu529]

我也遇到同样的问题，经过排查，是部分组件使用了自定义 render 渲染时，所以出现的问题。

[HollyCreep]

I get same error as @belvederef mentioned. Any workaround to use variables within o nuxtI18n options ?

I would like to use this on nuxtI18n options, like i used on head or even an variable to be able to avoid replicated code.

[Luferov]

I would advise you to use the composition API instead of the basic class style from your project. And this error will go away.

[HollyCreep]

Thank you @Luferov for the reply. I'm running a Vue2 application, its possible to implement your suggestion with a plugin like this Composition API plugin for Vue 2 ?

If possible, would you mind providing us an example? Thank you again in advance!

[Luferov]

Thank you @Luferov for the reply. I'm running a Vue2 application, its possible to implement your suggestion with a plugin like this Composition API plugin for Vue 2 ?

If possible, would you mind providing us an example? Thank you again in advance!

Of course, no problem. We are writing an application and it is open source. We are currently transitioning to nuxt3 and therefore are now in the nuxt-bridge version. For example, https://github.com/devind-team/dcis/tree/main/client.