Почему не работает локализация в quasar в build режиме?

Question

[shasoftX]

Создаю новый проект quasar
npm init quasar

Build mode............. spa
Pkg quasar............. v2.7.5
Pkg @quasar/app-vite... v1.0.5
Pkg vite............... v2.9.14
Debugging.............. no
Publishing............. no
Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

Добавляю в файл src/MainLayout.vue строки инициализации функции вывода локализованной строки

setup () {
    const leftDrawerOpen = ref(false)

    const { t } = useI18n();  // <====

    return {
      essentialLinks: linksList,
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      },
      t // <====
    }
  }

выше добавляю импорт функции useI18n
import { useI18n } from 'vue-i18n';

выше в шаблон добавляю вывод локализованной строки {{ t('success') }}

<q-toolbar-title>
    {{ t('success') }} Quasar App
</q-toolbar-title>

запускаю в режиме разработки
npx quasar dev

и вижу вывод строки в шаблоне


Запускаю в продуктивном режиме
npx quasar build
и получаю в консоли ошибку

index.63cd8324.js:1 TypeError: s is not a function
at Ge (vue-i18n.runtime.esm-bundler.996464c2.js:25:3626)
at We (vue-i18n.runtime.esm-bundler.996464c2.js:25:3004)
at vue-i18n.runtime.esm-bundler.996464c2.js:29:2691
at A (vue-i18n.runtime.esm-bundler.996464c2.js:29:2566)
at Proxy.ye (vue-i18n.runtime.esm-bundler.996464c2.js:29:2686)
at MainLayout.4d535e73.js:1:33039
at r (index.63cd8324.js:1:15264)
at m (render.6463f44e.js:1:126)
at Proxy. (MainLayout.4d535e73.js:1:799)
at No (index.63cd8324.js:1:15568)

и нет вывода строки


Что я делаю не так? Вроде взял уже совсем простой пример.

Пробовал стандартный пример из доков - всё тоже самое.

"name": "vue-i18n", "version": "9.1.10",
"name": "quasar", "version": "2.7.5",

Comments

[shasoftX]

Fedor Vlasenko,

Пробовал вот такой код чтобы в коде использовать

setup () {
    const leftDrawerOpen = ref(false)

    console.log('message 1');
    const { t } = useI18n();
    console.log('message 2');
    console.log('message',t);
    console.log('message 3');
    console.log('message',t('success'));
    console.log('message 4');

    return {
      essentialLinks: linksList,
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      },
      t
    }
  }

всё равно ошибка. Т.е. функция t вроде есть, но внутри неё где-то падает

[shasoftX]

Fedor Vlasenko, попробовал, всё-равно ошибка. Может я сервер не так запускаю :(
Хотя там просто скопировать что получилось и всё, но возможно в этом причина.

[shasoftX]

Нашел описание похожей (или такой же) ошибки https://github.com/intlify/vue-i18n-next/issues/746.

[shasoftX]

Fedor Vlasenko,
"build": "quasar buld",
buld - тут точно не ошибка?

Я запускаю сборку на OpenServer. Но даже не представляю что там можно сделать не так. Сервер просто отдаёт файл index.html и всё.

[shasoftX]

Fedor Vlasenko, open server нужен чтобы запрустить созданные в dist проект

[shasoftX]

Попробовал в i18n.boot вывести

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  console.log('i18n.boot...');
  console.log('i18n', i18n);
  console.log('messages', messages);
  console.log('out', i18n.t('success'));
  console.log('i18n.boot...ok');
  // Set i18n instance on app
  app.use(i18n)
})

ошибка :(

[shasoftX]

Fedor Vlasenko, а как вы запускаете production сборку?

[shasoftX]

была идея что сервер некоректно отдаёт файл. Проверил - всё нормально. :(

Попробую найти штатный пример с уже сгенерированным dist, может он заработает.

[shasoftX]

Выяснилось что ошибка возникает при использовании Vite. Если проект под Webpack делать, то всё работает.