Quasar CLII Vite + vue-i18n result in error: orgTransform.apply is not a function

[amc1999]

What happened?

If I am creating a new project using Quasar Vite CLI and selecting vue-i18n:

npm init quasar@latest
......
Check the features needed for your project: » vue-i18n

Then attempt to import Quasar language packs (or other 3rd party language.json) fails:

// import and do something with languages
import languages from 'quasar/lang/index.json'
data () {
    return {
      langCount: languages.length
    }
  }
....
npm run dev

1:11:57 AM [vite] (client) Pre-transform error: orgTransform.apply is not a function. (In 'orgTransform.apply(this, [code, id])', 'orgTransform.apply' is undefined)

It happens because Quasar Vite CLI is adding old dependency:

    "@intlify/unplugin-vue-i18n": "^4.0.0",

Workaround is to use "@intlify/unplugin-vue-i18n": "^11.0.0" instead.

Suggested fix is to modify:

# line 27 of `create-quasar/templates/app/quasar-v2/js-vite-2/BASE/_package.json
# line 42 of create-quasar/templates/app/quasar-v2/ts-vite-2/BASE/_package.json

<% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^11.0.0",<% } %>

What did you expect to happen?

I would expect it to run without build error.

Reproduction URL

https://codesandbox.io/ no url, I have not succeed with codesandbox

How to reproduce?

npm init quasar@latest

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... tst-i18n
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... tst-i18n
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... A Quasar Project
√ Pick a Vue component style: » Options API
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » Linting (vite-plugin-checker + ESLint), vue-i18n
√ Add Prettier for code formatting? ... no

2. To recreate the error we can use MainLayout.vue similar to:

<template>
  <q-page>
    <q-page-container>
      <div>Quasar v{{ $q.version }}</div>
      <div>Quasar langCount: {{ langCount }}</div>
    </q-page-container>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'
import languages from 'quasar/lang/index.json'

export default defineComponent({
  name: 'MainLayout',

  data () {
    return {
      langCount: languages.length
    }
  }
})
</script>

npm install
npm run dev

App • Opening default browser at http://localhost:9000/

1:11:57 AM [vite] (client) Pre-transform error: orgTransform.apply is not a function. (In 'orgTransform.apply(this, [code, id])', 'orgTransform.apply' is undefined)
  Plugin: vite:json
  File: ..../node_modules/quasar/lang/index.json:220:33
1:11:57 AM [vite] Internal server error: orgTransform.apply is not a function. (In 'orgTransform.apply(this, [code, id])', 'orgTransform.apply' is undefined)
  Plugin: vite:json
  File: ..../node_modules/quasar/lang/index.json:220:33
      at <anonymous> (..../node_modules/@intlify/unplugin-vue-i18n/lib/index.mjs:220:33)
      at transform (..../node_modules/vite/dist/node\chunks/config.js:28797:51)
      at async loadAndTransform (..../node_modules/vite/dist/node/chunks/config.js:22670:48)
      at processTicksAndRejections (native:7:39)

Flavour

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

Areas

Project Creation (create-quasar)

Platforms/Browsers

No response

Quasar info output

+ @eslint/js@9.39.2 (v10.0.1 available)
+ @intlify/unplugin-vue-i18n@4.0.0 (v11.0.7 available)
+ @quasar/app-vite@2.4.1
+ autoprefixer@10.4.24
+ eslint@9.39.2 (v10.0.0 available)
+ eslint-plugin-vue@10.8.0
+ globals@16.5.0 (v17.3.0 available)
+ postcss@8.5.6
+ vite-plugin-checker@0.11.0 (v0.12.0 available)
+ vue-eslint-parser@10.4.0
+ @quasar/extras@1.17.0
+ quasar@2.18.6
+ vue@3.5.28
+ vue-i18n@11.2.8
+ vue-router@5.0.2

Relevant log output

App • Opening default browser at http://localhost:9000/

1:11:57 AM [vite] (client) Pre-transform error: orgTransform.apply is not a function. (In 'orgTransform.apply(this, [code, id])', 'orgTransform.apply' is undefined)
  Plugin: vite:json
  File: ..../node_modules/quasar/lang/index.json:220:33
1:11:57 AM [vite] Internal server error: orgTransform.apply is not a function. (In 'orgTransform.apply(this, [code, id])', 'orgTransform.apply' is undefined)
  Plugin: vite:json
  File: ..../node_modules/quasar/lang/index.json:220:33
      at <anonymous> (..../node_modules/@intlify/unplugin-vue-i18n/lib/index.mjs:220:33)
      at transform (..../node_modules/vite/dist/node\chunks/config.js:28797:51)
      at async loadAndTransform (..../node_modules/vite/dist/node/chunks/config.js:22670:48)
      at processTicksAndRejections (native:7:39)

Additional context

No response

[github-actions]

Hi @amc1999! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, 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. 👏