Import localization from files no longer works

[VirtualZer0]

Environment

• Operating System: Windows_NT
• Node Version: v16.17.0
• Nuxt Version: 3.6.2
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: components, modules, css, build, runtimeConfig, devtools, i18n
• Runtime Modules: @pinia/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ebdazc?file=app.vue

Describe the bug

Some time ago I started a project with a localization structure, where the localization was splitted into several files and imported into the index file, and it worked. Today I found that it stopped working. The console shows messages that the specified keys are not found, only the strings specified in the main file directly, without importing, work.

Additional context

File structure example:

• locales
  • en
    • index.ts
    • submodule.ts

Where index.ts is

import submodule from './submodule';

export default {
  submodule,
  simpleString: 'Working',
};

and submodule.ts is

export default {
  submoduleString: 'Not working',
};

nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],

  i18n: {
    experimental: {
      jsTsFormatResource: true
    },
    locales: [
      {
        code: 'en',
        file: './en/index.ts'
      }
    ],
    defaultLocale: 'en',
    lazy: true,
    strategy: 'no_prefix',
    langDir: 'locales/',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'lang',
      redirectOn: 'root'
    }
  }
})

Logs

[intlify] Not found 'submodule.submoduleString' key in 'en' locale messages.

[kazupon]

Thank you for your reporting!

That regression is occured from v8.0.0-beta.10, when I confirmed with your reproduction by changing package.json

[kazupon]

This issue is caused by unplugin-vue-i18n, so we need fix it.

[NtchPlayer]

I face the same problem ! It's realy nice to see that the error is report ! Thx for you incredible work on that module 💚 !

[TheDutchCoder]

It also doesn't work in <i18n> blocks in SFC's

[mrleblanc101]

We usually split our app in multiple module instead of having one single big localization file. global, errors, etc.... I hope this get fixed soon.

[tex0l]

Hi! Any idea when this is going to be fixed / what needs to be done?

Currently, since the <i18n> blocks in SFC don't work, it's painful to translate many pages, as there is only one global file.

[tex0l]

I dug into the code of unplugin-vue-i18n to try and find the issue, I failed so far.

However, I've found that this line gives off 'i18n' as the langInfo, when no lang attribute is provided. This variable is used a few lines below to determine if we should use generateJSON or generateYAML. Therefore, by default, generateYAML is used by default regardless of defaultSFCLang. This can be fixed by setting explicitly an attribute in the i18n tag (<i18n lang="json">).

However, it still does not work. @kazupon do you have an idea of what does not work in unplugin-vue-i18n? Is there an issue open in that repo? Why do the e2e tests of unplugin-vue-i18n don't have the same issue?

[BobbieGoede]

I have a workaround using the edge version for import files, I have changed you reproduction here to demonstrate.

By using defineI18nLocale with a function it works like so:

import submodule from './submodule';

export default defineI18nLocale(() => ({
  submodule,
  simpleString: 'Working',
}));

Note the config in the edited reproduction has cache for the locale file enabled, this is disabled for dynamic/function locale files by default. Not required to get it to work, but worth mentioning as the example is essentially static.

[BobbieGoede]

Unable to reproduce after updating the reproduction to use the latest versions of nuxt and nuxt-i18n, this was likely resolved in v10 since it bumps @intlify/unplugin-vue-i18n. Updated reproduction to demonstrate https://stackblitz.com/edit/github-ebdazc-b1owcjxx?file=nuxt.config.ts