app-vite 2 and ssr start is failing without any error

[bekaku]

What happened?

When I built using the command quasar build -m ssr and tried running it with the command npm run start, I found that the server did not run and no errors were found.

I encountered a rather strange situation. Upon investigation, I found that the variable PrefixKey from the file utils/constants.ts is being called in both boot/requireAuth.ts and stores/example-store.ts. When PrefixKey is called simultaneously in both places, after building and running, it does not run, and no errors are found. However, if the call to PrefixKey is removed from one of the files, it runs normally after building.

utils/constants.ts

export const PrefixKey = '_gd5_';

stores/example-store.ts

import { defineStore } from 'pinia';
import { PrefixKey } from '@/utils/constants';
import { computed, ref } from 'vue';
export const useCounterStore = defineStore('counter', () => {
  console.log('useCounterStore', PrefixKey);
  const counter = ref(0);
  const doubleCount = computed(() => counter.value * 2)
  const increment = () => {
    counter.value++;
  }
  return {
    counter,
    doubleCount,
    increment
  }
});

boot/requireAuth.ts

import { boot } from 'quasar/wrappers';
import { PrefixKey } from '@/utils/constants';
export default boot(({ router, ssrContext, store, redirect }) => {
  console.log('test', PrefixKey);
  router.beforeEach((to, from, next) => {
    next();
  });
});

App.vue

<template>
  <router-view />
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/example-store'
defineOptions({
  name: 'App'
});

const counterStore = useCounterStore();
console.log('counterStore', counterStore.counter);
</script>

in dev mode work's fine.

What did you expect to happen?

Display error when start failed.

Reproduction URL

https://github.com/bekaku/quasar-start-fail

How to reproduce?

1. Clone the project from the repository.
2. Run npm install
3. Run npm run build:ssr
4. Run cd/dist/ssr
5. Run npm install
6. Run npm run start

Flavour

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

Areas

SSR Mode

Platforms/Browsers

Other

Quasar info output

Operating System - Windows_NT(10.0.22635) - win32/x64
NodeJs - 20.10.0

Global packages
  NPM - 10.2.4
  yarn - 1.22.19
  pnpm - 8.3.1
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.14 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.3.3 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.3.3 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @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

[rstoenescu]

Seems like Vite's Rollup incorrectly bundles the production code for the server-side part and introduces a circular import statement which Node.js can't handle -- and simply exits without any warning.

Will look if we can do some workaround. If not, we'll need to report this to Rollup.

[the-nicolas]

I have the same problem, node process (ssr build) exits without any error, when I import files from /boot and also import the same file somewhere else in the project. Running in dev mode works without any issues.

But it is somehow hard to reproduce, some files also work - and after some other changes exactly removing these files "fixes" the problem for the meanwhile. I guess the reason is, that the boot files gets imported somehow "dynamic" by quasar.

Someone found some hack to avoid that for now? How can I disable the bundling for PROD builds at all for the moment?

Using @quasar/app-vite 2.0.0-beta.19/20 also makes no change...

Update: Problem is somehow related to Pinia and Tree Shaking

Operating System - Linux(6.8.0-40-generic) - linux/x64
NodeJs - 20.16.0

Global packages
  NPM - 10.8.2
  yarn - 1.22.22
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.20 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.38 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.3
  pinia - 2.2.2 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.4.2 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.1 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.4 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

[the-nicolas]

After (some hours) of deeper investigation I figured out, that the problem occurs when using the store in the App component (App.vue) AND in the boot file. The generated server code for the bootfile asset looks completely different when using the store in App also.

I don´t have enough knowledge to understand the reason, but I found a silly workaround for me:
I moved my whole code from App.vue to Master.vue and replaced App.vue with:

<template>
  <Master />
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const Master = defineAsyncComponent(() => import('./Master.vue'));

defineOptions({
  name: 'App',
});
</script>

Now everything works without issues, just the prefetch in Master is not working anymore. I solved that by moving that code to the bootfile. Using the store in the Layout or Page component is no problem, because it gets imported dynamically by the router (I guess).

Hope someone has a better idea how to really fix that.