Usage within an Nx/Rush monorepo

[jagged3dge]

My team is considering using Nx to hold all our code for a project. This would contain the frontend apps (SPA, PWA, Electron/Tauri) as well as the backend services (API, Data abstraction layer, message queue, etc).

I'm weighing on using Quasar for the frontend apps. From previous experience with Quasar SPA & PWAs, I'm pretty confident Quasar is a very good candidate for this. However, I'm not sure how it stands in regards to co-existing with other packages in a monorepo.

Is this possible? From the looks of things, quasar generates its own project structure.

Is it possible to plug this in within a monorepo containing custom libs?

Looking for guidance from anybody with previous experience with quasar within nx.
Any pointers will be equally appreciated :)

[hawkeye64]

@jagged3dge I haven't used Nx, but I do use yarn workspaces a lot without issue. I need to investigate pnpm as the whole Vue eco-system has now migrated to that.

[jagged3dge]

PNPM's claims do sound pretty good. Will have to check how it gels with Nx workflows.

We did have a previous project using yarn workspaces, a comparatively simpler project.
However, the CI setup will be considerably complicated in the upcoming project.
Nx seems to fulfill our need for a consistent, simple API for this.

[smolinari]

@jagged3dge - I've looked into this myself and had concluded Nx's opinionation about how to build projects/apps/packages is a hard fit for frameworks like Quasar. I ended up with Rush as a monorepo manager (and also pnpm as a package manager). I'm still experimenting, but I think I can safely say Rush's use of the project's own build process is simpler than Nx's "executors". I may be totally wrong in my assessment too, so take it with a grain of salt, but Rush just seems a lot more pragmatic.

Scott

[smolinari]

@jagged3dge - Cool. I hope I could help. Some might not like that Microsoft maintains the Rush stack, but I think that is a plus, as it means it is being used day to day by a very large team of developers. Also, if you look into Heft (for build automation) and also Lage (for task runner pipelining), they are also from Microsoft and help with very specific build and CI processes.

https://microsoft.github.io/lage/
https://rushstack.io/pages/heft/overview/

Scott

[jagged3dge]

@smolinari I'm having trouble with VSCode Vetur extension and Quasar app in a rush monorepo, while using pnpm as the package manager.

Since pnpm and rush do a lot of symlinking, basic import statements like import { defineComponent } from 'vue' seems to bother Vetur.
It keeps marking the 'vue' part and throws this error:

Cannot find module 'vue' or its corresponding type declarations.Vetur(2307)

How did you cross this chasm?

[smolinari]

@jagged3dge - What version of Quasar are you on? I'm on v2 and the go-to VSCode extension for Vue3 is now Volar. I'm not using Vetur at all. Are you also using PNPM workspace? I've found them to be problematic and thus I only use Rush's homegrown linking system and thankfully, I'm not having any major issues. The only issue I've had is installing Q-App dependencies. I had to install them all in my own apps dependencies. Other than that, everything is working.

Scott

[jagged3dge]

@smolinari Using the latest Quasar. I've setup Volar now (disabled vetur). (Had to force code-formatting to prettier).

I'm not using PNPM workspaces feature; only rush's own symlinking system.

The issue with Q-App dependencies seems to be my problem too.
I hoped pnpm's feature flag shamefully-hoist would alleviate this issue. But no luck. Alas.

Taking your word, I copy-pasted all dependencies from @quasar/app into my app's package.json and ran rush update.

I figured I could try to run quasar dev. It works!

But then...

While editing one of the scaffolded files, components/CompositionComponent.vue, I started getting this popup error from VSCode:

The output of ESLint extension shows this:

[Error - 3:24:12 PM] TypeError: Cannot read property '0' of undefined
Occurred while linting /home/jagged/work/abbas-myb/myb-marketing-dashboard/apps/frontend/src/components/CompositionComponent.vue:22
Rule: "@typescript-eslint/unbound-method"
    at checkMethod (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/@typescript-eslint+eslint-plugin@5.8.1_7f5facf831fa8c7ebb8ea587912883a2/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:220:47)
    at checkMethodAndReport (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/@typescript-eslint+eslint-plugin@5.8.1_7f5facf831fa8c7ebb8ea587912883a2/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:155:53)
    at MemberExpression (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/@typescript-eslint+eslint-plugin@5.8.1_7f5facf831fa8c7ebb8ea587912883a2/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:177:17)
    at ruleErrorHandler (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/home/jagged/work/abbas-myb/myb-marketing-dashboard/common/temp/node_modules/.pnpm/eslint@8.5.0/node_modules/eslint/lib/linter/node-event-generator.js:340:14)

The relevant lines in CompositionComponent.vue are:

function useClickCount() {
  const clickCount = ref(0);
  function increment() {
    clickCount.value += 1; // <== this is line 22 as in the error. VSCode does not mark any errors on this line
    return clickCount.value;
  }

  return { clickCount, increment };
}

ESLint doesn't really show an error with the code (no part is underlined).

But the popup error keeps bothering me. Any idea what this is about? Did you face this issue?

This seems to happen whenever any ref() is used with .value.

[jagged3dge]

Apologies for the spam, but I think I've found the fix for this issue.

Leaving a note here for posterity:

When using rush with pnpm and eslint in VSCode, it's recommended to set the workspace setting of "eslint.packageManager": "pnpm" in .vscode/settings.json.

This seems to resolve the ESLint error I mentioned above.