Quasar CLI Vite - build SPA with axios and vue-i18n result in TypeError: le.version.split is not a function

[znbang]

What happened?

When I build SPA with axios and vue-i18n, the sample page is not displayed
and the DevTools console shows:
TypeError: le.version.split is not a function at axios.fcba7966.js:2:10803s

There is no problem if build with only axios or vue-i18n.

What did you expect to happen?

The sample page is displayed in the browser.

Reproduction URL

no link

How to reproduce?

1. npm init quasar with following options:
   √ What would you like to build? » App with Quasar CLI, let's go!
   √ Project folder: ... qq
   √ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
   √ Pick script type: » Javascript
   √ Pick Quasar App CLI variant: » Quasar App CLI with Vite (BETA stage)
   √ Package name: ... qq
   √ Project product name: (must start with letter if building mobile apps) ... Quasar App
   √ Project description: ... A Quasar Project
   √ Author: ... qq
   √ Pick your CSS preprocessor: » Sass with SCSS syntax
   √ Check the features needed for your project: » Axios, Vue-i18n

2. cd qq

3. quasar build

4. cd dist\spa

5. caddy file-server --listen :9000

6. open http://localhost:9000 in the browser

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Chrome, Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - Not installed
  @quasar/cli - 1.3.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.6.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.0-beta.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.1 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - Not installed
  vuex - Not installed
  vite - 2.8.6 -- Native-ESM powered web dev build tool
  eslint - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @znbang! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[Grawl]

SSR too.

It's Axios bug. I removed this package and everything works good.

[rstoenescu]

Here's the correct way to add vue-i18n:

// quasar.config.js
const path = require('path')

build: {
   vitePlugins: [
        ['@intlify/vite-plugin-vue-i18n', {
          // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
          // compositionOnly: false,

          // you need to set i18n resource including paths !
          include: path.resolve(__dirname, './src/i18n/**')
        }]
      ]
}

The include is absolutely necessary otherwise it will mess with a lot of other things.

Will do the corrections in the scaffolding app. But you'll have to do the changes above manually into an already scaffolded app.

PS: there's also "quasar serve" command, so you don't need caddy etc.

[znbang]

Hi, with new scaffolding and the IndexPage.vue:

<template>
  {{ t('success') }}
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

the error message is:

TypeError: s is not a function
    at lt (vue-i18n.runtime.esm-bundler.11ca8ca2.js:33:3637)
    at Ve (vue-i18n.runtime.esm-bundler.11ca8ca2.js:33:3009)
    at vue-i18n.runtime.esm-bundler.11ca8ca2.js:37:2706
    at x (vue-i18n.runtime.esm-bundler.11ca8ca2.js:37:2579)
    at Proxy.We (vue-i18n.runtime.esm-bundler.11ca8ca2.js:37:2701)
    at IndexPage.dd6596ca.js:1:1111
    at r (vendor.eb977b9c.js:1:14846)
    at m (render.fe9c2083.js:1:128)
    at Proxy.<anonymous> (IndexPage.dd6596ca.js:1:944)
    at Hn (vendor.eb977b9c.js:1:15150)

[selaimanh]

The i18n make a global function $t available for all the components :

file boot i18n.js add globalInjection: true.

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

  // Set i18n instance on app
  app.use(i18n);
});

[jeancaffou]

@rstoenescu

Here's the correct way to add vue-i18n:

It's still failing, even when setting compositionOnly: false and globalInjection: true in i18n boot.

The script has an unsupported MIME type ('text/html').
index.0d7c96e5.js:1 TypeError: s is not a function
    at Ke (i18n.69efe207.js:25:3625)
    at $e (i18n.69efe207.js:25:3003)
    at i18n.69efe207.js:29:2690
    at U (i18n.69efe207.js:29:2565)
    at Object.ve [as t] (i18n.69efe207.js:29:2685)
    at Object.t (i18n.69efe207.js:29:8572)
    at Proxy.$t (i18n.69efe207.js:29:12980)
    at IndexPage.2785adea.js:10:1612
    at r (index.0d7c96e5.js:1:15622)
    at Pe (QBtn.d2433f53.js:1:838)

@znbang did you solve it?