Not able to set a locale or redirect to specific locale from the server in a middleware or plugin.

[dennisadriaans]

Environment

• Operating System: Linux
• Node Version: v18.15.0
• Nuxt Version: 3.7.4
• CLI Version: 3.9.1
• Nitro Version: 2.7.0
• Package Manager: npm@9.5.0
• Builder: -
• User Config: devtools, app, modules, i18n, runtimeConfig
• Runtime Modules: @nuxtjs/i18n@8.0.0-rc.5, @pinia/nuxt@0.5.1
• Build Modules: -

Reproduction

Install Nuxt i18n, try to call setLocale in Nuxt plugin our middleware.

Describe the bug

It seems like I cannot set a locale or redirect to specific locale from the server in a middleware or plugin.

$i18n.switchLocalePath()
$i18n.setLocale( localeCookie.value )

Nitro error:
[nitro] [unhandledRejection] Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin.

Tested in both middleware and plugin.

Additional context

No response

Logs

No response

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction starter (v8 and higher)
👉 Reproduction starter (edge)

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[dennisadriaans]

I am unable to proceed with testing my actual bug due to the apparent malfunction of the basic language switcher.

Please refer to my attempted reproduction steps.

https://stackblitz.com/edit/github-m2j2vu?file=nuxt.config.ts

[BobbieGoede]

Your reproduction doesn't have any pages, so there's no page for switchLocalePath to return. I modified your reproduction here to demonstrate, if there are no pages vue-router won't be included as a dependency by Nuxt (see docs).

[edgarsn]

Same happens for me when calling setLocale in middleware like this:

export default defineNuxtRouteMiddleware(async (to) => {
    const {$i18n} = useNuxtApp();
    const userLocaleFromBackend = 'en';
    
    await $i18n.setLocale(userLocaleFromBackend);
});

Using Nuxt 3.9.0.

8.0.0-rc.7 ✅ (Works fine for me)
8.0.0-rc.8 ✅ (Works fine for me)
8.0.0-rc.9 ❌ (Starts to fail)
8.0.0-rc.10 ❌
8.0.0-rc.11 ❌
8.0.0 ❌

[ucw]

setting experimental: {asyncContext: true} is a possible solution

[michaelzangl]

I took some time to investigate the issue.

The problem is that setLocale asynchronously calls detectRedirect which uses the useNuxtApp hook. So calling it in anything on server that triggers the async code can cause problems (e.g. waiting for an API call and then setting the locale based on the result of that call).

[BobbieGoede]

It's still unclear what the expected behaviour is, and without a minimal reproduction I can only guess what's going on.

If you're trying to change the locale in a route middleware, you're best off using a redirect from the middleware using switchLocalePath.

[ucw]

https://stackblitz.com/edit/nuxt-starter-i64ji9?file=plugins%2Fi18n.ts reproduction from my use-case. I need to make a custom locale detection. I expect that calling the setLocale method from the plugin will change the language, not throw an error.

[BobbieGoede]

@ucw
Thanks for the reproduction, I think I know what's causing this issue and how to fix it (#2777 didn't fully resolve this). Will likely have a fix ready this week.

[BobbieGoede]

@ucw
The issue in your reproduction should be resolved in the latest edge release, I modified your reproduction to demonstrate here.

Can you try installing the edge version in your project and confirm if this resolves the issue for you?

[ucw]

@BobbieGoede I checked my project with edge version, everything works fine. Thank you for your work!

[BobbieGoede]

@ucw that's great to hear! I just published v8.1.1 which includes these changes.

I'll close this issue now, if anyone else is still experiencing this or a similar problem, please open a new issue with a (minimal) reproduction.