TypeError: props4.options is null

[nbittich]

What happened?

Yesterday, my app was working just fine. after doing quasar upgrade and npm update, routing no longer works.
I tried to delete the cache, package-lock, node_modules, problem still persist. i didn't change the code of the project at all.

see video (routing broken):

Screencast.from.2024-10-15.10-38-09.mp4

code can be find here: https://github.com/nbittich/sequeda/tree/master/backoffice

What did you expect to happen?

my app just works like it was yesterday

Reproduction URL

https://github.com/nbittich/sequeda/tree/master/backoffice

How to reproduce?

1. clone the repo
2. cd sequeda-docker && docker compose build
3. docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d
4. cd ../backoffice
5. npm i
6. quasar dev

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

Firefox, Chrome

Quasar info output

Operating System        Linux(6.10.12-200.fc40.x86_64) - linux/x64
NodeJs                  20.17.0

Global packages    
  NPM                   10.8.2
  yarn                  1.22.22
  @quasar/cli           2.3.0
  @quasar/icongenie     Not installed
  cordova               Not installed

Relevant log output

Uncaught (in promise) TypeError: props4.options is null
    getOption quasar.client.js:21142
    values quasar.client.js:20871
    innerValue quasar.client.js:20871
    refreshComputed reactivity.esm-bundler.js:377
    get value reactivity.esm-bundler.js:1627
    getter reactivity.esm-bundler.js:1725
    run reactivity.esm-bundler.js:222
    job reactivity.esm-bundler.js:1795
    watch reactivity.esm-bundler.js:1845
    doWatch runtime-core.esm-bundler.js:6184
    watch2 runtime-core.esm-bundler.js:6117
    setup quasar.client.js:21013
    callWithErrorHandling runtime-core.esm-bundler.js:199
    setupStatefulComponent runtime-core.esm-bundler.js:7870
    setupComponent runtime-core.esm-bundler.js:7831
    mountComponent runtime-core.esm-bundler.js:5179
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    mountChildren runtime-core.esm-bundler.js:4895
    mountElement runtime-core.esm-bundler.js:4818
    processElement runtime-core.esm-bundler.js:4783
    patch runtime-core.esm-bundler.js:4651
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    mountComponent runtime-core.esm-bundler.js:5192
    processComponent runtime-core.esm-bundler.js:5145
    patch runtime-core.esm-bundler.js:4663
    componentUpdateFn runtime-core.esm-bundler.js:5289
    run reactivity.esm-bundler.js:222
    setupRenderEffect runtime-core.esm-bundler.js:5417
    registerDep runtime-core.esm-bundler.js:7164

Additional context

No response

[yusufkandemir]

The error is happening inside q-select because the given options prop is null. If it started being null randomly or after updating dependencies, then the first thing to look for is dynamic parts, e.g. API calls getting the options.

I've found some potential problems. I don't think this was supposed to work properly:
https://github.com/nbittich/sequeda/blob/54dcb33ecc886254d9dea8aa90ca760f99dcacb6/backoffice/src/pages/organization/customers/EditOrgCustomerPage.vue#L20
Vue or something in the build pipeline might have changed the behavior. Try moving that call into setup to see if it changes anything.

Also, make sure your API calls are not failing and not returning null.

[nbittich]

it doesn't seem to be a q-select problem. I commented out all the q-selects in one page and I still get the errors.
Checked my database, actually deleted all the data here and started from the demo data (was working yesterday morning), still hit the same issue.

Also moved the async codes everywhere on the setup method, didn't fix the problem.

[yusufkandemir]

getOption only exists in q-select

So, if the exact same error is happening even if you don't have any QSelects, it doesn't make any sense.

[nbittich]

thanks! found the issue, it was in a child component (where i missed the q-select), the initial value of the options was idd null, don't know why it worked and then stopped after bumping, but now with an initial empty array it works!

used to be:

const postalCodesOptions = ref(null as unknown as PostalCode[]);
now it is:
const postalCodesOptions = ref([] as PostalCode[]);