Unable to import Quasar language packs in Vite

[maggie44]

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

[github-actions[bot]]

Hi @maggie0002! 👋

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. 👏

[rstoenescu]

First of all, for anyone reading, this is not a Quasar issue. Secondly, I'll try to find some time to add instructions to the docs on how to achieve the same effect with q/app-vite.

[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
  }
}

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

[rstoenescu]

https://github.com/quasarframework/quasar/commit/e5323882b779e7f28e447b8979c0574f355a83cf

[maggie44]

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