App-vite (Beta v2) - Vue-i18n with SSR will result in runtime error

[Evertvdw]

What happened?

When creating a new starter project with SSR and Vue-i18n enabled the generated build file (index.js) will throw a syntax error upon runtime:

SyntaxError: Named export 'createI18n' not found. The requested module 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports.

@IlCallo @yusufkandemir
This can be fixed by adding ssr: ctx.modeName === 'ssr', to the options of '@intlify/unplugin-vue-i18n/vite'. This should be added to the quasar.config base file and probably in the docs/upgrade guide as well.

What did you expect to happen?

No error

Reproduction URL

Build time only, cannot provide an URL

How to reproduce?

1. Create a new starter project with the App-vite beta
2. Select vue-i18n as an option
3. Add -m ssr to the dev and build commands
4. Build the project and run the generated index.js file

Flavour

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

Areas

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

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 18.17.0

Global packages
  NPM - 9.6.7
  yarn - 1.22.17
  @quasar/cli - 2.3.0
  @quasar/icongenie - 2.3.0
  cordova - Not installed

Important local packages
  quasar - 2.14.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.19 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.1.3 -- Native-ESM powered web dev build tool
  esbuild - 0.20.1 -- An extremely fast JavaScript and CSS bundler and minifier.
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  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 @Evertvdw! 👋

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

[Razvan Stoenescu]

Thanks for opening this!
Fixed it for create-quasar and updated docs (docs changes will be available on next docs deployment)

[Evertvdw]

@rstoenescu I checked your solution but ctx.mode.ssr will throw an error in Typescript because ctx has combined types and typescript cannot infer that. So you have to do a check like 'ssr' in ctx.mode before you can access ctx.mode.ssr safely. Thats why I suggested to use ctx.modeName === 'ssr' instead :)

[Razvan Stoenescu]

@Evertvdw ugh, ok. Will change it right away.