Runtime only build breaks with missing keys despite formatFallback

[AlexandreBonaventure]

Reporting a bug?

Hello, recently with my team we decided to optimize vue-i18n following your guide recommendations and ended up using the official vite plugin.
Now we run into an issue with runtimeOnly build where missing message key are making the app crash, despite formatFallback: true because it tries to compile the fallback message key as a string.

Expected behavior

with formatFallback: true I expect that missing message keys are not hard failing.
That is a show stopper for use since our translation process is asynchronous and missing translations are common. For now, we are still including the message compiler in our build only because of this issue.

A possible fix would be to convert key: string to () => key if formatFallback && !messageCompiler

Reproduction

https://github.com/AlexandreBonaventure/vue-i18n-runtime-only

System Info

irrelevant

Screenshot

Additional context

Thanks!

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion

[PeterAlfredLee]

Hi, @AlexandreBonaventure
I just checked your repo, I think this issue is caused by lack of missing interaction {bar} configuration in your en.json file.
If you change your en.json file to the following, everything will work fine:

{
    "foo {bar}": "foo {bar}",
    "missing interpolation {bar}": "missing interpolation {bar}"
}

[AlexandreBonaventure]

Yes! That was on purpose, sorry if this was not clear enough. The point being that if for whatever reason you don't have the key in your message json it will throw an error.

[PeterAlfredLee]

Yes! That was on purpose, sorry if this was not clear enough. The point being that if for whatever reason you don't have the key in your message json it will throw an error.

I see.
The error is thrown because you are using the runtime package vue-i18n.runtime.esm-bundler.js which don't have messageCompiler.
If you use vue-i18n.esm-bundler.js, it will print the string you pass to the t function instead of thrown a error (because it have messageCompiler).

But seems you just want to use runtime package, So I not sure should we change this behavior from thrown a error to print the string when we don't have messageCompiler. @kazupon WDYT?

Also I still think configure the key is a easy way since you have congfigured fallbacklocale: 'en'. So you only need to add this key to en.json.
And if you don't want to config key in en.json, you just want to print the missing key message, you can just use console.log instead of the t function.

[AlexandreBonaventure]

The error is thrown because you are using the runtime package vue-i18n.runtime.esm-bundler.js which don't have messageCompiler.
If you use vue-i18n.esm-bundler.js, it will print the string you pass to the t function instead of thrown a error (because it have messageCompiler).

Yes exactly I wish I could just use the runtime to reduce bundle size. I know that right now I can keep using the compiler.

Also I still think configure the key is a easy way since you have congfigured fallbacklocale: 'en'. So you only need to add this key to en.json.

Well, not really, obviously the repo I created to highlight the issue is a minimal repro that is not really matching the complexity of a real-word use-case. Like I said our translations are handled with a third-party service and distributed accross multiple different apps. Missing keys can just happen in our setup.

you just want to print the missing key message, you can just use console.log instead of the t function.

Yes but I don't know which key is going to be missing and don't want to override t function or write custom logic for something that is already kind of supported.
If I'm quoting your doc here: https://vue-i18n.intlify.dev/guide/essentials/fallback.html#fallback-interpolation
This is exactly whay I need, but would like to be able to leverage this feature with runtime only as well

Thanks!

[kazupon]

Hi!
Thank you for your reporting!

As @PeterAlfredLee mentioned, you can just add the key to en.json, but it is not very desirable to crash it.
Fortunately, this issue can be solved as you mentioned.

A possible fix would be to convert key: string to () => key if formatFallback && !messageCompiler

In the above condition case, the problem can be solved by modifying the code in the translate function of the core-base package to convert it to a function that just returns key in the following permalink range.

https://github.com/intlify/vue-i18n-next/blob/51263d5c6b0c3214f3ae060ae944a53d0245ac15/packages/core-base/src/translate.ts#L365-L425