Quasar not respecting Vuex on Node v18

[ethought]

What happened?

I moved a project from one development machine to another and I cannot seem to get the store working. All I see is 'store is undefined'. Works perfectly on old dev machine, no code has changed.

After digging around it seems that app.js was different for the new install from the old one and mentioned nothing about the store.

So I figured it was a Vuex problem. After looking around it seems Vuex is not installed as seen in the Quasar info output.

However, when I try and add a new store with:

quasar new store somestorename

It installs pinia.

Anyone know what is wrong here, and how I can get Vuex to install?

Here is my package.json

"dependencies": { "@quasar/extras": "^1.0.0", "axios": "^0.21.1", "core-js": "^3.6.5", "quasar": "^2.6.0", "vue": "^3.0.0", "vue-router": "^4.0.0", "vuex": "^4.0.2" }, "devDependencies": { "@quasar/app-webpack": "^3.0.0" }, "browserslist": [ "last 10 Chrome versions", "last 10 Firefox versions", "last 4 Edge versions", "last 7 Safari versions", "last 8 Android versions", "last 8 ChromeAndroid versions", "last 8 FirefoxAndroid versions", "last 10 iOS versions", "last 5 Opera versions" ], "engines": { "node": ">= 12.22.1", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" }

What did you expect to happen?

I expected Vuex to get installed automatically as I have in place src/store/index.js - which was working perfectly on the last dev machine.

Reproduction URL

https://codepen.io/pen/

How to reproduce?

Install latest quasar through NPM and try and use a project with vuex

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

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

Platforms/Browsers

Firefox, Chrome

Quasar info output

$ quasar info

Operating System - Linux(5.15.0-33-generic) - linux/x64
NodeJs - 18.2.0

Global packages
  NPM - 8.9.0
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.36 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.15
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.2 -- Babel compiler core.
  webpack - 5.72.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.8.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @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[bot]]

Hi @ethought! 👋

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

[ethought]

Hi @ethought! wave

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

Not really possible to replicate in codepen??!?

[yusufkandemir]

@ethought please read the message carefully, it doesn't enforce Codepen. You can share a GitHub repo link in this instance. And, it's a bot, please don't get at mad it 😅

You have "vuex": "^4.0.2" in your package.json, you say it is trying to install Pinia, but none of them seems to be installed according to the quasar info output. You might have posted them in a different order or something, so we can't really be sure about the source of the problem. Normally, if you have Vuex installed, it will use it, otherwise, it will use or install Pinia.

Aside from providing a repro, you can try with a different Node version to see if it makes a difference. Trying Node v16 would be a good start. If that turns out to be the culprit, we'll investigate the problem.

[ethought]

Thanks, wasn't mad, just was not sure what to do about the link.

I removed pinia after it was auto installed when I tried adding a new store despite the vuex structure already being in place.

I will try a different version of Node and report back.

[ethought]

Reverted back to Node 16.5.0 and everything is working again.

Thanks

[rstoenescu]

Improvement will be available in q/app-webpack 3.5.5 and q/app-vite 1.0.3