app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo #17648

ariel-overa · 2024-11-18T15:35:48Z

What happened?

After upgrading @quasar/app-vite from "^2.0.0-beta.24" to "^2.0.0-rc.2" and following the migration guide, typescript does not recognize the imports from '#q-app/wrappers', for example in quasar.config.ts.

I'm getting the following error:
Cannot find module '#q-app/wrappers' or its corresponding type declarations.ts(2307)

After investigating the issue, I found that the tsconfig.json generated under .quasar directory does not correctly map the paths related to node_modules.

For example:
"#q-app": [
"./../node_modules/@quasar/app-vite/types/index.d.ts"
],

In my environment, there's no node_modules in this location, because the quasar project is under a monorepo. For my environment, the correct should be:

"#q-app": [
"./../../../node_modules/@quasar/app-vite/types/index.d.ts"
],

That is, node_modules is two directory levels behind what was generated.

What did you expect to happen?

quasar prepare should generate .quasar/tsconfig.json considering the correct location of node_modules.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-zkxysz?file=packages%2Fquasar-project%2Fquasar.config.ts

How to reproduce?

Upgrade @quasar/app-vite from "^2.0.0-beta.24" to "^2.0.0-rc.2" in a monorepo environment.

Flavour

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

Areas

TypeScript Support, SPA Mode

Platforms/Browsers

Microsoft Edge

Quasar info output

Operating System - Linux(5.15.167.4-microsoft-standard-WSL2) - linux/x64
NodeJs - 22.9.0

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

Important local packages
  quasar - 2.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-rc.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.13 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.5
  pinia - 2.2.6 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 6.0.0-beta.10 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.1 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.1 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.6.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-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - f7e9380d5dfd
  br-5053dddd48ed - 172.19.0.1
  eth0 - 172.17.0.3

Relevant log output

No response

Additional context

No response

The text was updated successfully, but these errors were encountered:

yusufkandemir · 2024-11-18T21:54:44Z

./../node_modules/.... path is inside .quasar/tsconfig.json, so it maps to your-quasar-project/node_modules. I've tested it in the repro you sent, and there is a node_modules folder there:

So, please provide a detailed and reproducible reproduction. Which package manager you are using? Can you also share your directory structure, any monorepo-related configuration(e.g. package.json > workspaces or pnpm-workspace.yaml), and any .npmrc configuration you have?

yusufkandemir · 2024-11-18T22:04:34Z

I think I get what you mean here, node_modules exists, but it doesn't have @quasar/app-vite. pnpm creates a symlink in project/node_modules -> monorepo/node_modules. But, yarn doesn't seem to be doing such a thing. So, we need to figure out a way.

ariel-overa · 2024-11-18T22:11:37Z

Yes, exactly. I'm using bun as package manager.

yusufkandemir · 2024-11-18T22:20:30Z

I've found a solution, but I will test it further tomorrow morning.

…ces (fix: quasarframework#17648) it also improves handling for any other aliases to npm packages

yusufkandemir · 2024-11-19T13:54:30Z

Thanks for reporting! The fix will be available in app-vite v2 rc.3 and app-webpack v4 rc.3

jaybo · 2024-11-21T06:50:42Z

Windows: Upgraded to app-vite v2 rc.3 (from rc.2) and the issue still exists.

(dzweb) c:\GitHub\dzweb\ClientApp>quasar upgrade -i

 Global Quasar CLI • Gathering information from the NPM registry (https://registry.npmjs.org/)...

 quasar: 2.17.3 → 2.17.4
 @quasar/app-vite: 2.0.0-rc.2 → 2.0.0-rc.3

 Used https://registry.npmjs.org/ to check for latest versions.

 Global Quasar CLI • Installing [email protected]...
 Global Quasar CLI • [sync] Running "yarn add [email protected]" in c:\GitHub\dzweb\ClientApp

yarn add v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "@mapbox/mapbox-gl-draw@^1.4.3".
warning " > [email protected]" has incorrect peer dependency "@mapbox/mapbox-gl-draw@^1.4.3".
warning "@quasar/app-vite > @vitejs/[email protected]" has incorrect peer dependency "vite@^5.0.0".
warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
[5/5] Building fresh packages...
success Saved lockfile.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 38.29s.

 Global Quasar CLI • Installing @quasar/[email protected] as devDependencies...
 Global Quasar CLI • [sync] Running "yarn add --dev @quasar/[email protected]" in c:\GitHub\dzweb\ClientApp

yarn add v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "@mapbox/mapbox-gl-draw@^1.4.3".
warning " > [email protected]" has incorrect peer dependency "@mapbox/mapbox-gl-draw@^1.4.3".
warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
warning "@quasar/app-vite > @vitejs/[email protected]" has incorrect peer dependency "vite@^5.0.0".
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
[5/5] Building fresh packages...
success Saved lockfile.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
success Saved 1 new dependency.
info Direct dependencies
└─ @quasar/[email protected]
info All dependencies
└─ @quasar/[email protected]
Done in 22.42s.

 Global Quasar CLI •  SUCCESS  • Successfully upgraded Quasar packages (using npm registry: https://registry.npmjs.org/).

Then:


(dzweb) c:\GitHub\dzweb\ClientApp>del /s *-flag.d.ts
Deleted file - c:\GitHub\dzweb\ClientApp\node_modules\quasar\dist\types\feature-flag.d.ts

(dzweb) c:\GitHub\dzweb\ClientApp>quasar prepare

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 App • Using quasar.config.ts in "ts" format
 App • Generated tsconfig.json and types files in .quasar directory
 App • The app is now prepared for linting, type-checking, IDE integration, etc.

But '#q-app/wrappers' is still unrecognised.

vladyslav-mikhieiev · 2024-11-21T07:15:37Z

npm: '#q-app/wrappers' still not recognized @yusufkandemir

yusufkandemir · 2024-11-21T07:49:05Z

Please share a reproduction.

yusufkandemir · 2024-11-21T08:45:05Z

Make sure you remove baseUrl

"extends": "./.quasar/tsconfig.json",
- "compilerOptions": {
-   "baseUrl": "."
- }

This what tsconfig.json should look like:

{
  "extends": "./.quasar/tsconfig.json",
}

vladyslav-mikhieiev · 2024-11-21T12:25:47Z

Make sure you remove baseUrl
"extends": "./.quasar/tsconfig.json",
- "compilerOptions": {
-   "baseUrl": "."
- }
This what tsconfig.json should look like:
{
  "extends": "./.quasar/tsconfig.json",
}

Thank you, now everything works for me

ariel-overa added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Nov 18, 2024

github-actions bot added area/typescript bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite mode/spa labels Nov 18, 2024

yusufkandemir added bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. and removed bug/1-repro-available A reproduction is available and needs to be confirmed. labels Nov 18, 2024

yusufkandemir changed the title ~~@quasar/app-vite v2 (rc 2) does not recognize '#q-app/wrappers' in monorepo environment~~ app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo Nov 18, 2024

yusufkandemir closed this as completed in 29c2dcf Nov 19, 2024

yusufkandemir added a commit to yusufkandemir/quasar that referenced this issue Nov 19, 2024

fix(app-webpack): make #q-app TS aliases work on npm/yarn/bun workspa…

25b3528

…ces (fix: quasarframework#17648) it also improves handling for any other aliases to npm packages

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo #17648

app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo #17648

ariel-overa commented Nov 18, 2024 •

edited

Loading

yusufkandemir commented Nov 18, 2024

yusufkandemir commented Nov 18, 2024

ariel-overa commented Nov 18, 2024

yusufkandemir commented Nov 18, 2024

yusufkandemir commented Nov 19, 2024

jaybo commented Nov 21, 2024

vladyslav-mikhieiev commented Nov 21, 2024

yusufkandemir commented Nov 21, 2024

yusufkandemir commented Nov 21, 2024

vladyslav-mikhieiev commented Nov 21, 2024

app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo #17648

app-vite v2 rc2 - '#q-app' alias is not recognized in yarn/bun monorepo #17648

Comments

ariel-overa commented Nov 18, 2024 • edited Loading

What happened?

What did you expect to happen?

Reproduction URL

How to reproduce?

Flavour

Areas

Platforms/Browsers

Quasar info output

Relevant log output

Additional context

yusufkandemir commented Nov 18, 2024

yusufkandemir commented Nov 18, 2024

ariel-overa commented Nov 18, 2024

yusufkandemir commented Nov 18, 2024

yusufkandemir commented Nov 19, 2024

jaybo commented Nov 21, 2024

vladyslav-mikhieiev commented Nov 21, 2024

yusufkandemir commented Nov 21, 2024

yusufkandemir commented Nov 21, 2024

vladyslav-mikhieiev commented Nov 21, 2024

ariel-overa commented Nov 18, 2024 •

edited

Loading