If $t params are undefined

[martinlundin]

Reporting a bug?

When using a variable as a param to the $t() function it works good until the variable is undefined. Then there is an error:
Uncaught (in promise) SyntaxError: Invalid argument

Expected behavior

In previous versions this was handled by the function.

Reproduction

I made a JSFiddle here https://jsfiddle.net/rxn13fa7/4/
Its the "undefined" on row 28 that creates the error. Remove it and it works fine.

System Info

See JSFiddle

Screenshot

No response

Additional context

The current solution I do is making a wrapping function like this
translate (key) { return key ? this.$t(key) : '' }

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
• The provided reproduction is a minimal reproducible example of the bug.

[kazupon]

This is not a bug, but expected behavior.
vue-i18n raises the following error:

vue@3:1839 Uncaught SyntaxError: Invalid argument
    at createCompileError (vue-i18n@9:323:21)
    at createI18nError (vue-i18n@9:3669:14)
    at Object.t (vue-i18n@9:4645:29)
    at Proxy.$t (vue-i18n@9:5826:49)
    at eval (eval at compileToFunction (vue@3:16563:20), <anonymous>:11:57)
    at renderList (vue@3:4446:18)
    at Proxy.render (eval at compileToFunction (vue@3:16563:20), <anonymous>:9:68)
    at renderComponentRoot (vue@3:2459:18)
    at ReactiveEffect.componentUpdateFn [as fn] (vue@3:7510:48)
    at ReactiveEffect.run (vue@3:538:21)```

Invalid argument is outputting that message because there is a problem with the $t argument.

Thanks!