Yarn Berry PnP + Quasar Error

[zN3utr4l]

I have already worked on a quasar project, but already started, now I have to work on another quasar project and I wanted to understand how to do a quasar setup, from the beginning.

I use nvm windows [https://github.com/coreybutler/nvm-windows].

I don't understand why it tells me that I don't have corepack enable, even though I activated it from powershell with admin privileges.

PS G:\My\My.Hmi\My.Hmi> corepack --version
0.23.0
PS G:\My\My.Hmi\My.Hmi> yarn set version berry
➤ YN0000: You don't seem to have Corepack enabled; we'll have to rely on yarnPath instead
➤ YN0000: Downloading https://repo.yarnpkg.com/4.1.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-4.1.1.cjs
➤ YN0000: Done with warnings in 0s 245ms

I performed the entire yarn create quasar procedure, but when it asked me to install the dependencies automatically it went into error because I didn't have yarn in the project folder, but outside. (It shouldn't change anything, since you can also choose not to install the dependencies)

PS G:\My\My.Hmi\My.Hmi> yarn create quasar    
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-quasar@npm:1.8.2, @nodelib/fs.scandir@npm:2.1.5, @nodelib/fs.stat@npm:2.0.5, @nodelib/fs.walk@npm:1.2.8, braces@npm:3.0.2, fast-glob@npm:3.3.2, fastq@npm:1.17.1, and 21 more.
➤ YN0000: └ Completed in 0s 981ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 28 packages were added to the project (+ 4 MiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 140ms



 .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

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... quasar-project
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 5 (BETA | next major version - v2)
√ Package name: ... My-hmi
√ Project product name: (must start with letter if building mobile apps) ... My Hmi
√ Project description: ... My Hmi Quasar
√ Author: ... Me
√ Pick a Vue component style: » Composition API with <script setup>
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » Linting (vite-plugin-checker + ESLint + vue-tsc), State Management (Pinia), axios, vue-i18n
√ Pick an ESLint preset: » Prettier

 Quasar • Generating files...

 - postcss.config.cjs
 - .editorconfig
 - .gitignore
 - index.html
 - package.json
 - tsconfig.json
 - README.md
 - .npmrc
 - quasar.config.ts
 - src/env.d.ts
 - src/quasar.d.ts
 - src/shims-vue.d.ts
 - src/App.vue
 - public/favicon.ico
 - .vscode/extensions.json
 - .vscode/settings.json
 - src/boot/.gitkeep
 - src/assets/quasar-logo-vertical.svg
 - src/router/index.ts
 - src/router/routes.ts
 - src/components/models.ts
 - src/components/EssentialLink.vue
 - src/components/ExampleComponent.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/layouts/MainLayout.vue
 - public/icons/favicon-128x128.png
 - public/icons/favicon-16x16.png
 - public/icons/favicon-32x32.png
 - public/icons/favicon-96x96.png
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - src/boot/axios.ts
 - src/boot/i18n.ts
 - src/i18n/index.ts
 - src/i18n/en-US/index.ts
 - .eslintrc.cjs
 - .eslintignore
 - tsconfig.vue-tsc.json
 - .prettierrc
 - src/stores/example-store.ts
 - src/stores/index.ts
 - src/stores/store-flag.d.ts

 Quasar •  SUCCESS  • The project has been scaffolded

√ Install project dependencies? (recommended) » Yes, use yarn

Usage Error: The nearest package directory (G:\My\My.Hmi\My.Hmi\quasar-project) doesn't seem to be part of the project declared in G:\My\My.Hmi\My.Hmi.

- If G:\My\My.Hmi\My.Hmi isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If G:\My\My.Hmi\My.Hmi is intended to be a project, it might be that you forgot to list quasar-project in its workspace configuration.
- Finally, if G:\My\My.Hmi\My.Hmi is fine and you intend quasar-project to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

$ yarn install [--json] [--immutable] [--immutable-cache] [--refresh-lockfile] [--check-cache] [--check-resolutions] [--inline-builds] [--mode #0]

 yarn FAILED...

 Quasar • ⚠️  Could not auto install dependencies. Probably a temporary npm registry issue?

..........

Enjoy! - Quasar Team

So i run yarn install manually

PS G:\My\My.Hmi\My.Hmi> yarn install
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @intlify/unplugin-vue-i18n@npm:2.0.0, @quasar/app-vite@npm:2.0.0-beta.5, @quasar/extras@npm:1.16.9, @types/node@npm:20.11.28, @typescript-eslint/eslint-plugin@npm:6.21.0, and 609 more.
➤ YN0000: └ Completed in 5s 690ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ My-hmi@workspace:. doesn't provide postcss (p1d17e), requested by autoprefixer.
➤ YN0002: │ My-hmi@workspace:. doesn't provide vite (p143d7), requested by vite-plugin-checker.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 47 packages were added to the project (+ 14.8 MiB).
➤ YN0000: └ Completed in 1s 321ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.20.2 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.19.12 must be built because it never has been before or the last one failed
➤ YN0007: │ vue-demi@npm:0.14.7 [47173] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 559ms
➤ YN0000: · Done with warnings in 8s 665ms


PS G:\My\My.Hmi\My.Hmi> yarn config set nodeLinker pnp
➤ YN0000: Successfully set nodeLinker to 'pnp'

PS G:\My\My.Hmi\My.Hmi> yarn dlx @yarnpkg/sdks vscode 
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @yarnpkg/sdks@npm:3.1.0, @arcanis/slice-ansi@npm:1.1.1, @nodelib/fs.scandir@npm:2.1.5, @nodelib/fs.stat@npm:2.0.5, @nodelib/fs.walk@npm:1.2.8, @sindresorhus/is@npm:4.6.0, and 99 more.
➤ YN0000: └ Completed in 0s 915ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 105 packages were added to the project (+ 9.27 MiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 1s 185ms

➤ YN0000: ┌ Generating SDKs inside .yarn/sdks
➤ YN0000: │ ✓ Eslint
➤ YN0000: │ ✓ Prettier
➤ YN0000: │ ✓ Typescript
➤ YN0000: │ • 5 SDKs were skipped based on your root dependencies
➤ YN0000: └ Completed
➤ YN0000: ┌ Generating settings
➤ YN0000: │ ✓ Vscode (new ✨)
➤ YN0000: └ Completed

PS G:\My\My.Hmi\My.Hmi> yarn quasar info

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 20.11.1

Global packages
  NPM - 10.5.0
  yarn - 4.1.1
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.0
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.1.6 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - Not installed
  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-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

At this point I think everything is ready to be launched. But this error is thrown:

PS G:\My\My.Hmi\My.Hmi> yarn dev

 .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
▲ [WARNING] Cannot find base config file "G:\\My\\My.Hmi\\My.Hmi\\.yarn\\__virtual__\\@quasar-app-vite-virtual-4deb238e72\\5\\C:\\Users\\g.chirico\\AppData\\Local\\Yarn\\Berry\\cache\\@quasar-app-vite-npm-2.0.0-beta.5-164eae7331-10c0.zip\\node_modules\\@quasar\\app-vite\\tsconfig-preset" [tsconfig.json]

    tsconfig.json:2:13:
      2 │   "extends": "@quasar/app-vite/tsconfig-preset",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

G:\My\My.Hmi\My.Hmi\.pnp.cjs:12492
      Error.captureStackTrace(firstError);
            ^

Error: vite-plugin-checker tried to access optionator (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: optionator
Required by: vite-plugin-checker@virtual:50ce5990c1c4e77ee07f3ed6e6d28a1fa6b5e282088afe4d84eddcef6712e87f47c205b27b020c13e09137ba6e7f3fb5f6ccef3f77ff8127dee9b712497282f5#npm:0.6.4 (via G:\My\My.Hmi\My.Hmi\.yarn\__virtual__\vite-plugin-checker-virtual-08a926702b\5\C:\Users\g.chirico\AppData\Local\Yarn\Berry\cache\vite-plugin-checker-npm-0.6.4-7ffc01c613-10c0.zip\node_modules\vite-plugin-checker\dist\cjs\checkers\eslint\)
Ancestor breaking the chain: My-hmi@workspace:.


Require stack:
- G:\My\My.Hmi\My.Hmi\.yarn\__virtual__\vite-plugin-checker-virtual-08a926702b\5\C:\Users\g.chirico\AppData\Local\Yarn\Berry\cache\vite-plugin-checker-npm-0.6.4-7ffc01c613-10c0.zip\node_modules\vite-plugin-checker\dist\cjs\checkers\eslint\options.js
- G:\My\My.Hmi\My.Hmi\.yarn\__virtual__\vite-plugin-checker-virtual-08a926702b\5\C:\Users\g.chirico\AppData\Local\Yarn\Berry\cache\vite-plugin-checker-npm-0.6.4-7ffc01c613-10c0.zip\node_modules\vite-plugin-checker\dist\cjs\checkers\eslint\main.js
    at require$$0.Module._resolveFilename (G:\My\My.Hmi\My.Hmi\.pnp.cjs:12492:13)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at require$$0.Module._load (G:\My\My.Hmi\My.Hmi\.pnp.cjs:12383:31)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (G:\My\My.Hmi\My.Hmi\.yarn\__virtual__\vite-plugin-checker-virtual-08a926702b\5\C:\Users\g.chirico\AppData\Local\Yarn\Berry\cache\vite-plugin-checker-npm-0.6.4-7ffc01c613-10c0.zip\node_modules\vite-plugin-checker\dist\cjs\checkers\eslint\options.js:34:33)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at require$$0.Module._extensions..js (G:\My\My.Hmi\My.Hmi\.pnp.cjs:12535:33)
    at Module.load (node:internal/modules/cjs/loader:1207:32)

Node.js v20.11.1

I noticed that 3 packages were missing, so I ran yarn add postcss vite optionator -D
And now this is the error:

PS G:\My\My.Hmi\My.Hmi> yarn dev

 .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
▲ [WARNING] Cannot find base config file "G:\\My\\My.Hmi\\My.Hmi\\.yarn\\__virtual__\\@quasar-app-vite-virtual-4deb238e72\\5\\C:\\Users\\g.chirico\\AppData\\Local\\Yarn\\Berry\\cache\\@quasar-app-vite-npm-2.0.0-beta.5-164eae7331-10c0.zip\\node_modules\\@quasar\\app-vite\\tsconfig-preset" [tsconfig.json]

    tsconfig.json:2:13:
      2 │   "extends": "@quasar/app-vite/tsconfig-preset",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


 » Reported at............ 18/3/2024 13:24:06
 » App dir................ G:\My\My.Hmi\My.Hmi
 » App URL................ http://192.168.77.73:9000/
                           http://localhost:9000/
                           http://172.24.160.1:9000/
                           http://172.25.176.1:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.15.1
 » Pkg @quasar/app-vite... v2.0.0-beta.5
 » Browser target......... es2022|firefox115|chrome115|safari14

 App • Opening default browser at http://localhost:9000/


node:internal/event_target:1100
  process.nextTick(() => { throw err; });
                           ^
Error: EROFS: read-only filesystem, mkdir '/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc'
    at makeError$1 (G:\My\My.Hmi\My.Hmi\.pnp.cjs:7098:24)
    at EROFS (G:\My\My.Hmi\My.Hmi\.pnp.cjs:7125:10)
    at ZipFS.mkdirSync (G:\My\My.Hmi\My.Hmi\.pnp.cjs:12070:13)
    at ZipFS.mkdirPromise (G:\My\My.Hmi\My.Hmi\.pnp.cjs:12064:17)
    at G:\My\My.Hmi\My.Hmi\.pnp.cjs:9377:28
    at G:\My\My.Hmi\My.Hmi\.pnp.cjs:9549:87
    at ZipOpenFS.getMountPromise (G:\My\My.Hmi\My.Hmi\.pnp.cjs:9640:22)
    at ZipOpenFS.makeCallPromise (G:\My\My.Hmi\My.Hmi\.pnp.cjs:9549:23)
    at ZipOpenFS.mkdirPromise (G:\My\My.Hmi\My.Hmi\.pnp.cjs:9374:23)
    at VirtualFS.mkdirPromise (G:\My\My.Hmi\My.Hmi\.pnp.cjs:8354:24)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)
    at [kOnExit] (node:internal/worker:304:5)
    at Worker.<computed>.onexit (node:internal/worker:229:20) {
  code: 'EROFS'
}

Node.js v20.11.1

[yusufkandemir]

Quasar CLI doesn't support PnP, use node linker and/or any option that makes it possible to work. We recommend using yarn v1 as the rest is not so obvious.