Unable to import Quasar language packs in Vite

What happened?

In Webpack, I would use the following to import languages from the quasar node_modules folder are per the Quasar docs:

      import(
        // https://quasar.dev/options/quasar-language-packs#dynamical-non-ssr-
        /* webpackInclude: /(en-US|de|fr|it|nb-NO|pt-BR)\.js$/ */
        `quasar/lang/${val}`
      )

It looks like import.meta.glob is the best proposed alternative but it isn’t compatible with node_module imports: https://github.com/vitejs/vite/issues/5728.

At the moment there doesn’t seem to be a good way to import these languages from the node_modules folder other than by either symlinking or copying them across manually and storing them in the src/ folder somewhere: https://github.com/vitejs/vite/issues/5728#issuecomment-1074586601

Ideally it would be useful to establish a ‘best practice’ for overcoming this issue in Quasar projects in Vite.

What did you expect to happen?

Be able to import the Quasar language files from node_modules so changes are pulled in to the app on a update automatically.

Reproduction URL

Not applicable

How to reproduce?

N/A

Flavour

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

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Long story short (extract from my additions to the docs below). The examples are with boot files, but I think you can infer how to use in vue files also.

1. Non-SSR

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).mjs')

export default async () => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.mjs` ]().then(lang => {
      Quasar.lang.set(lang.default)
    })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

1. SSR Mostly same thing, only that Quasar.lang.set requires a second parameter. Quasar.lang.set(lang.default, ssrContext)

[maggie0002]

Looks good, an adapted version using the same method seems to be working for me. Thanks.