Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage of n() and $n() with undefined should not throw errors #1746

Open
3 tasks done
MickL opened this issue Feb 23, 2024 · 4 comments
Open
3 tasks done

Usage of n() and $n() with undefined should not throw errors #1746

MickL opened this issue Feb 23, 2024 · 4 comments
Labels
Status: Proposal Request for comments

Comments

@MickL
Copy link

MickL commented Feb 23, 2024

Clear and concise description of the problem

Sometimes values are undefined within an application, unfortunately this will throw a 500 error (at least in Nuxt) so the whole page is unavailable just because one variable is undefined:

<script setup lang="ts">
const props = defineProps<{price: number}>();
</script>

<template>
{{ $n(props.price, 'currency') }}
</template>

Another example are inputs:

<script setup lang="ts">
const price = ref(10);
</script>

<template>
<input v-model="price" type="number">
{{ $n(price, 'currency') }}
</template>

These can get undefined while the user is editing the input value which will also throw errors:

Incaught (in promise) SyntaxError: Invalid arguments (at message-compiler.mjs:77:19)

Suggested solution

It would be great if the function n() and $n() would instead just return an empty string '' without the whole page crashing or throwing any errors.

Alternative

No response

Additional context

No response

Validations

@MickL MickL added the Status: Proposal Request for comments label Feb 23, 2024
Copy link
Member

kazupon commented Feb 28, 2024

Thank you for your feedback!

The first argument of n and $n must be number.
Don't pass undefined.
It is the responsibility of the application to verify the value passed.

However, vue-i18n API documentation does not mention that an error is raised if an unexpected value is specified.
https://vue-i18n.intlify.dev/api/composition.html#composernumberformatting

I think it would help to mention it in the documentation.

@MickL
Copy link
Author

MickL commented Feb 28, 2024

Hey, thanks for your answer! It would be great if it doesnt throw an error because values can always be undefined especially when working with inputs. And because this function just returns a string it would be nice if it returns an empty string in case of undefined input imo. Currently it breaks the full page/application just because one undefined value.

@MickL
Copy link
Author

MickL commented Mar 11, 2024

Can we please allow n() and $n() to have undefined values? Consider the second example from above:

  • The first example above will break the full page
  • The second example above will throw errors because price is becoming an empty string when the input is empty

@KaelWD
Copy link

KaelWD commented May 30, 2024

Also #1155

These strict runtime checks are incredibly inconvenient, I don't understand why you need to throw an error (often breaking the entire page) when just passing through null values and casting numbers to strings automatically would at worst display some mildly confusing strings to users and at best cause no problems because we have null checks after $t().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Proposal Request for comments
Projects
None yet
Development

No branches or pull requests

3 participants