Date with empty value prevents normal rendering

[RollingTL]

Component is not rendered when calling date function with empty string first param. No error is logged into console.

<template>
{{ $d('', 'long') }}
</template>

It would be better if it will render empty string too.

vue & vue-i18n version

vue 3.0.5 vue-i18n 9.0.0-rc.3

[kazupon]

Thank you for your reporting! I could not reproduce this issue.

Could you give minimum reproduction code, please? :pray:

[RollingTL]

Hi, I have tried to make minimum reproduction code in codesandbox.io and etc. but failed. It is too complicated for me. If you can make such a template it would be nice for all to use it to show their cases.

Anyway I will try to explain my case.

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import { createI18n } from 'vue-i18n'
import messageDictionary from '@/i18n/messageDictionary'
import dateTimeFormats from '@/i18n/dateTimeFormats'
const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'ru',
  availableLocales: ['ru', 'kz', 'en'],
  messages: messageDictionary(),
  datetimeFormats: dateTimeFormats()
})

const app = createApp(App)
app.use(store)
app.use(i18n)
app.mount('#app')

and this all. I use i18n in many components.

  <h3 class="mb3">
    {{ $t('land.land-for-sale') }}
  </h3>

    <div class="pr1">
      {{ $d(detailsData.created_at, 'long') }}
    </div>

All works fine and as expected. But when first argument of $d function is empty the containing component stops rendering and without any errors.

package.json { "name": "vue3", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "@types/vuelidate": "^0.7.13", "@vuelidate/core": "^2.0.0-alpha.8", "@vuelidate/validators": "^2.0.0-alpha.5", "axios": "^0.21.1", "vue": "^3.0.5", "vue-i18n": "^9.0.0-rc.2", "vue-router": "^4.0.3", "vuex": "^4.0.0-rc.2", "xstate": "^4.15.4" }, "devDependencies": { "@types/jest": "^24.0.19", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-eslint": "^4.5.10", "@vue/cli-plugin-router": "^4.5.10", "@vue/cli-plugin-typescript": "^4.5.10", "@vue/cli-plugin-unit-jest": "^4.5.10", "@vue/cli-plugin-vuex": "^4.5.10", "@vue/cli-service": "^4.5.10", "@vue/compiler-sfc": "^3.0.5", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^5.0.2", "@vue/test-utils": "^2.0.0-beta.14", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.4.1", "node-sass": "^4.12.0", "prettier": "^1.19.1", "sass-loader": "^8.0.2", "typescript": "~3.9.3", "vue-jest": "^5.0.0-alpha.7" } }

[RollingTL]

checked with vue-i18n 9.0.0-rc.4 - the problem persists.

[kazupon]

Thank you for your feedback!

Hmm, :thinking: it's strange... In my enviroments, I could not reproduce it, occured SyntaxError: The argument provided is not a valid ISO date string

[kazupon]

close due to in-activity.

if you have still issue, you can open the new issue. thanks!