No language redirect with dev with prefix strategy in 'spa' mode

[dokterbob]

Version

nuxt-i18n: 6.9.2
nuxt: 2.0.0

Reproduction Link

https://github.com/dokterbob/i18nuxt-redirect-bug

Steps to reproduce

1. Clean nuxt project with i18-nuxt configured with strategy set to `prefix' as per documentation (refer to reproduction link)
2. Run dev server with npm run dev
3. Open http://localhost:3000/

What is Expected?

A redirect to a language prefix (/en/ or /pt/).

What is actually happening?

Page not found: "This page could not be found"

Notes

1. The following settings are sufficient to replicate the problem:

  modules: [
    [
      'nuxt-i18n',
      {
        locales: ['en', 'pt'],
        defaultLocale: 'en',
        strategy: 'prefix',
        vueI18n: {
          fallbackLocale: 'en'
        }
      }
    ]
  ],

2. The following settings have not shown to solve the problem:

        detectBrowserLanguage: {
          // This doesn't make a difference
          useCookie: false,
          alwaysRedirect: true
        },

3. The problem also occurs in a production environment with npm run build && npm run start

4. When using rootRedirect, the browser is redirected to the unprefixed route.

5. When requesting a route different from the default (e.g. /about/) redirection is also not performed.

6. Great care has been taken that browser cookies have been cleared in the tests above.

[rchl]

If I understand it correctly, it's duplicate of #491

[Bigdragon13th]

I also having this issue, but in a weird way. So I think I'll share my issue, in case it might help fixing this.

I created a new installation of Nuxt and Nuxt-i18n, got the following version:
nuxt: 2.12.2
nuxt-i18n: 6.9.3

My browser locale is en-us.
My Nuxt mode setting is universal.

This is my nuxt-i18n settings:

i18n: {
  locales: [
    {
      code: 'en',
      name: 'English',
      file: 'en.json',
    },
    {
      code: 'th',
      name: 'ภาษาไทย',
      file: 'th.json',
    },
  ],
  defaultLocale: 'th',
  strategy: 'prefix',
  lazy: true,
  langDir: 'locales/',
  detectBrowserLanguage: {
    useCookie: true,
    alwaysRedirect: true,
  },
},

• Now, when I try to access http://localhost:3000/, it redirect me to http://localhost:3000/en (I assume it's because of my browser's language). Which is expected. I also try remove /en and hit enter again, it's still works fine.
• The weird issue came after I switch the language to th (by using switchLocalePath(locale.code)). It redirect me to http://localhost:3000/th, after I remove /th part, I got 404.
• A more weirder issue. After trying to figure out what's wrong with my config, I've tried changed my defaultLocale to en, now everything broke. Accessing http://localhost:3000/ just throw me 404, it's not redirect anymore.

My workaround right now is, completely disable detectBrowserLanguage and force rootRedirect. It's not ideal, but at least it seems working.

rootRedirect: 'th',
detectBrowserLanguage: false,

[rchl]

@Bigdragon13th What you describe is indeed confusing so I would suggest you retest it in incognito/private window and with relevant (i18n_redirected) cookie removed.

With your configuration you should also consistently get 404 on / as there is no route generated for that path with prefix strategy.

[rchl]

No, sorry, I was wrong. nuxt-i18n can redirect you from the initial 404 / page when it detects matching browser locale or saved cookie.

But also the Nuxt mode plays a role here because it behaves a bit differently depending on whether it's spa or universal.

This issue (as the github repo shows) is related to mode: 'spa'.

[Bigdragon13th]

@rchl Thanks for the quick reply. Sorry, forgot to mention that I've tested this on incognito and have closed it to clear all cookies on every builds.

My Nuxt mode setting is universal.

[rchl]

So redirection from 404 page doesn't work in Nuxt when done from a Nuxt plugin in SPA mode.

Nuxt tries to push location using VueRouter but it gets "eaten" somewhere.
The line in question is here:
https://github.com/nuxt/nuxt.js/blob/76c40e3ffde9bba3bab55a5b0776d9aa5cb16251/packages/vue-app/template/index.js#L142-L142

This issue is in Nuxt and is what makes behavior inconsistent in SPA/Universal.

While that inconsistency is on Nuxt, there is also a problem in nuxt-i18n that makes redirection inconsistent as it will only work when detected browser locale matches one of the supported locales. Or there is a cookie already saved.

@Bigdragon13th not sure what is happening then. It shouldn't be that inconsistent. :)

[rchl]

Relevant Nuxt issue: nuxt/nuxt#4491

I will try to address the Nuxt issue (with a workaround) and the inconsistency in nuxt-i18n handling at the same time.

[dokterbob]

Thanks for the fix!

However, it does seem that the issue also occurs for production builds with spa. Note that I have updated the reproduction build to the latest nuxt-i18n, including the bugfix.

[rchl]

Do you mean when using SPA with nuxt generate or nuxt build && nuxt start?

[rchl]

@dokterbob also, there is no /about route in your repo (your mention it in your steps).

[rchl]

From quick testing, it seems to work for me (with nuxt start).

But make sure to also specify your preferred browser languages and their order as that can make a difference.

The nuxt generate case won't work as when path doesn't exist, it just doesn't and you'll get 404 from the server. There is no way to handle redirect through this module in that case. You would need to handle that through server (Apache or Nginx) redirect instead.

[dokterbob]

@rchl Thanks for the quick feedback again.

Indeed, I'm now doing a redirect in a .htaccess file and a minimal http-equiv redirect in a static index.html. But it seems rather contrived and against expectations that with nuxt.js and nuxt-i18n the translation 'just works'.

It really does seem more sensible that, in the prefix scenario, an index route is generated which redirects to the user's preferred language.

Until that is the case, I would suggest adding the information you just gave to the nuxt-i18n docs. Actually, I have found that the issues described in #700 occurs also when not using SPA, while using nuxt generate.