Migrating hook i18n:extend-messages to i18n:registerModule does not work

[devonik]

Environment

---

• Operating System: Darwin
• Node Version: v18.14.0
• Nuxt Version: 3.5.3
• Nitro Version: 2.4.1
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Write a simple nuxt module and try to register messages to i18n with the new hook i18n:registerModule within modules setup().

https://stackblitz.com/edit/github-asw9fc

Describe the bug

My new hook in the module setup() looks like this:

nuxt.hook('i18n:registerModule', (register: any) => {
      register({
        // langDir path needs to be resolved
        langDir: resolver.resolve('./runtime/lang'),
        experimental: {
          jsTsFormatResource: true
        },
        locales: [
          {
            code: 'de',
            file: 'general.ts',
          },
          {
            code: 'en',
            file: 'general.ts',
          },
        ]
      })
    })

In https://v8.i18n.nuxtjs.org/guide/lazy-load-translations I saw the required experimental.jsTsFormatResource but with no effect
The defineI18nLocale() in general.ts function is not called by server start.

Additional context

My old setup with hook i18n:extend-messages was running

nuxt.hook(
      'i18n:extend-messages',
      async (additionalMessages, localeCodes) => {
        const messages = await fetchApi(config.api)
        additionalMessages.push(messages)
      },
    )

Logs

No response

[kazupon]

Thank you for your feedback!

experimental.jsTsFormatResource
The register callback in the i18n:registerModule hook does not accept it. Only langDir and locales.

And, please give us a minimal reproduction of the code in the stackblize or github repo 🙏
we cannot check your issue with text-only information for reproduction.

[devonik]

Thank you for your feedback!

experimental.jsTsFormatResource
The register callback in the i18n:registerModule hook does not accept it. Only langDir and locales.

And, please give us a minimal reproduction of the code in the stackblize or github repo 🙏 we cannot check your issue with text-only information for reproduction.

I put a stackblitz link into description 👍

[Randoooom]

Any updates on this?

[devonik]

Nice that there seems a fix. When it will be released I would like to test it

[BobbieGoede]

@devonik I was hoping my PR would fix the issue in your setup but after some digging it looks like your reproduction reveals more issues that are still present... 😅

I've edited your reproduction to demonstrate the issues I ran into here. This reproduction uses the latest edge branch which includes my PR.

1. It looks like there is inconsistent behavior between inline config for this module, when passing options inline ['@nuxtjs/i18n', { /* options */ }] it won't work, but passing options using i18n: { /* options */ } seems to work fine. Running npm run dev:inline-config in my reproduction will demonstrate this.

2. The way (module) locales are being resolved differs when it's within the project folder or outside, Running npm run dev:external-module will demonstrate that having the module outside the project folder will not work as expected.

It may be less than ideal, but these issues can be worked around until we have fixes for them. With the latest edge version, not using inline config and having the module inside the project folder should make it work. I'll try and get these issues resolved in the meantime 😄

[devonik]

You have to come on it for now 😅 What a strange issue. Thanks your investigate your time. Looking forward to the fix. The workaround is sadly not a solution for my case but thanks for sharing.

[devonik]

Mh I cannot make it running with npm:@nuxtjs/i18n-edge. Can your show it in stackblitz how it works now ?

[BobbieGoede]

@devonik
Looks like something went wrong and the edge channel did not get released automatically, should be fixed now, can you try again with the latest edge version?

[devonik]

Mh now i am getting Cannot start nuxt: Cannot find module '/home/projects/github-asw9fc-i4vtwp/playground/@nuxtjs/i18n' in stackblitz https://stackblitz.com/edit/github-asw9fc-i4vtwp?file=package.json,src%2Fmodule.ts,playground%2Fpackage.json

[BobbieGoede]

It looks like you installed @nuxtjs/i18n-edge and removed @nuxtjs/i18n, I recommend installing the edge channel as an alias like so npm install @nuxtjs/i18n@npm:@nuxtjs/i18n-edge. This way you can keep using @nuxtjs/i18n in nuxt.config.

After installing the edge channel there are still some changes you would have to make in the project to make it work. I have made the changes here.

It's not possible to pass configuration from the i18n:registerModule hook, only langDir and locales are used when passed. So the following need to be moved to nuxt.config

experimental: {
  jsTsFormatResource: true,
}

Unfortunately at this moment you can only lazy-load locales from modules, so the project needs to be set up with the properties required for lazy loading (see docs). So you will have to add a directory in your project, with a locale file (could be an empty json file containing {}).

In the project with the changes I made you can see I added the following to the i18n config in nuxt.config:

lazy: true,
langDir: 'lang',
locales: [{ code: 'en', file: 'en.json' }],

And added a file (en.json) in a new directory (lang) containing the following:

{}

I'm still working on some changes to remove these extra steps and make adding modules and layers with i18n config and files more intuitive, but until then these changes should make things work in your project!

[devonik]

I'm still working on some changes to remove these extra steps and make adding modules and layers with i18n config and files more intuitive, but until then these changes should make things work in your project!

Could you ping it here if there is something done on this good approach ? :)

[BobbieGoede]

@devonik
The latest RC should include the changes I was working on, for setting/extending locales and configuration I would recommend using layers. But if you're just adding translations a module would work fine as well. It's possible to do these things without configuring langDir and lazy on the consuming project.

It is still not possible to set other i18n configuration from a module, I can imagine it would complicate the priority of overrides between modules and layers and modules within layers.

Here is an example of a basic i18n project with a module that provides translations.

I think just setting lazy on a project without settings locales to objects with file or files will still throw an error/warning. Will have to look into making that more lenient sometime as locales/files can easily be provided separately now.