Support Yarn 2, especially regarding stricter peerDependencies constraints

[Demivan]

Describe the bug Quasar does not specify Vue as peer dependency but imports from it. I'm using yarn@2 and it much stricter and is not allowing package to use other packages without specifying them as dependencies.

Codepen/jsFiddle/Codesandbox (required) https://github.com/Demivan/quasar-yarn-2-issue

To Reproduce Steps to reproduce the behavior:

1. Checkout repository
2. run yarn build
3. See build error.

Expected behavior No build error should be produced.

Screenshots With webpack

ERROR in ./.yarn/cache/quasar-npm-1.12.13-43fa104864-2.zip/node_modules/quasar/src/utils/open-url.js 1:0-21
Module not found: Error: A package is trying to access another package without the second one being listed as a dependency of the first one

Required package: vue (via "vue/dist/vue.runtime.esm.js")
Required by: quasar@npm:1.12.13 (via ./.yarn/cache/quasar-npm-1.12.13-43fa104864-2.zip/node_modules/quasar/src/utils/)

With rollup:

(node:139528) [MODULE_NOT_FOUND] Error: quasar tried to access vue, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
(Use `node --trace-warnings ...` to show where the warning was created)

Platform (please complete the following information): Yarn: yarn@2 berry

Additional context Fix using .yarnrc.yml: https://github.com/Demivan/quasar-yarn-2-issue/blob/fix/.yarnrc.yml

[IlCallo]

We haven't tested Quasar on Yarn 2 yet, so we cannot assure compatibility.

Thanks for reporting and suggesting a fix, this could help the community while we still doesn't officially support it. Keep suggesting fixes and providing resources if you find others, this could help us when we start tackling this problem :)

About peerDependencies here you can read about why Quasar doesn't use them. https://github.com/quasarframework/quasar/issues/4606#issuecomment-510180386

[Demivan]

Quasar cli create command is incompatible with Yarn 2. Cause is consolidate package that is not specifying peer dependencies properly too. Quasar cli uses it to render handlebars templates. That code can be easily switched to using handlebars package directly and consolidate can be removed.

[pdanpdan]

cross ref: https://github.com/quasarframework/quasar/issues/8245 https://github.com/quasarframework/quasar/issues/8286 https://github.com/quasarframework/quasar/issues/7581

[Robula]

quasar upgrade fails too. yarn info <package> --json returns a different object to what is expected. EDIT: I'm experiencing https://github.com/quasarframework/quasar/issues/8245

[rstoenescu]

Please use Yarn v1 for the moment. The v2 of Yarn has some hard requirements that forces us to not be able to provide a good developer experience.

We have plans to create a CLI based on Vite instead of Webpack and that will allow us to officially support Yarn 2.

[Robula]

@rstoenescu Could Quasar at least support Yarn 2 with nodeLinker: node-modules for the time being? I depend heavily on workspaces and the tools that Yarn 2 provides.

Thanks

[namespace-github]

@rstoenescu Will Quasar support yarn 2 with webpack in the future? We rely on webpack and cannot switch to vite for various reasons.

[maggie44]

To share some experiences from the last few days, yarn 2 (now yarn 3) is a very different kettle of fish. Has been very difficult to integrate in to a project (not a Quasar project, something even simpler), it seems to have largely abandoned the idea of production vs development builds, does not adhere to the NODE_ENV variable, makes Docker files significantly longer and more complicated, and without production flags hasn't reduced the size of the package (there are some ways to get production builds, but it requires additional plugins to be installed, it seems the general direction they are heading is to keep one flat package.json file for everything).

Inevitably I am sure there will be a Quasar transition to the latest yarn, but wanted to flag that it may not be all roses and rainbows, be careful what we wish for.

[IlCallo]

Note that since we externalized many of the dependencies for which we controlled and pinned versions (vue, vuex, vue-router) in order to support Vite with the new CLI, it should now be possible to use Yarn2 with latest Quasar app-webpack and app-vite packages, as well as latest NPM and PNPM package managers

[maggie44]

Note that since we externalized many of the dependencies for which we controlled and pinned versions (vue, vuex, vue-router) in order to support Vite with the new CLI, it should now be possible to use Yarn2 with latest Quasar app-webpack and app-vite packages, as well as latest NPM and PNPM package managers

I did have some success with that:

yarn set version stable
yarn install

Update the .gitignore files: https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored

At this stage though it is in the compatibility mode, using the legacy node_modules folder.

Removing nodeLinker: node-modules from .yarnrc.yml should change it to the new mode. But generates an error:

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

(node:18312) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'version' of undefined
    at Object.<anonymous> (/Users/user/Documents/GitHub.nosync/balena-device-ui/ui/.yarn/__virtual__/@quasar-app-vite-virtual-89b86ecc42/0/cache/@quasar-app-vite-npm-1.0.0-beta.14-25bb27949e-d5718d0401.zip/node_modules/@quasar/app-vite/lib/helpers/banner-global.js:6:43)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.require$$0.Module._extensions..js (/Users/user/Documents/GitHub.nosync/balena-device-ui/ui/.pnp.cjs:14194:33)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.require$$0.Module._load (/Users/user/Documents/GitHub.nosync/balena-device-ui/ui/.pnp.cjs:14034:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/Users/user/Documents/GitHub.nosync/balena-device-ui/ui/.yarn/__virtual__/@quasar-app-vite-virtual-89b86ecc42/0/cache/@quasar-app-vite-npm-1.0.0-beta.14-25bb27949e-d5718d0401.zip/node_modules/@quasar/app-vite/lib/helpers/print-dev-banner.js:5:64)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:18312) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:18312) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[IlCallo]

Thanks for reporting, have you tried with Yarn 3 too?

[maggie44]

This is Yarn 3, I haven't tried with Yarn 2.

3.2.0

I have decided to abandon it and stick with Yarn 1. Nothing to do with Quasar, it's all on the Yarn end. I got about as far as trying to get Visual Studio Code to read from zip files instead of node_modules, which involved extensions for reading from Zip files, and the usual VSC dramas. Maybe in a few versions time the docs will be better and the integration smoother for the newer yarn.

[RovshenTagangylyjov]

Do we still have to use yarn v1 or can we use v2 or higher after quasar cli 1.3?

[MilosPaunovic]

Yarn 1 is still the only one fully supported.

[NGPixel]

Yarn 3 works perfectly fine as long as you set nodeLinker: node-modules in your .yarnrc.yml

Proper pnp mode support would be great in the future though...

[taai]

I tried installing dependencies with pnpm without setting shameful-hoist setting and had the same issue @maggie0002 had. So I got my hands dirty. :mag:

The problem appears to be with resolving dependencies only relative to appPaths.appDir in get-package-json.js

That line should be replaced with this:

paths: [ folder ].concat(module.paths)

It would make the resolver first to look in the specified directory and then in default paths. Then it works also with pnpm even without using shameful-hoist setting.

So, the file get-package-json.js should look like this:

const appPaths = require('../app-paths')

module.exports = function (pkgName, folder = appPaths.appDir) {
  if (pkgName === '@quasar/app-vite') {
    return require('../../package.json')
  }

  try {
    return require(
      require.resolve(`${pkgName}/package.json`, {
        paths: [ folder ].concat(module.paths)
      })
    )
  }
  catch (e) {}
}

[yusufkandemir]

@maggie0002 @taai the error regarding resolving Vite's version (TypeError: Cannot read property 'version' of undefined) will be addressed in #13609.

[maggie44]

Another related yarn support issue, when running a build for electron it passes the --production flag which is deprecated:

yarn workspace ui build -m electron

 App • Running "yarn install --production" in /Users/user/Documents/GitHub.nosync/balena-device-ui/ui/dist/electron/UnPackaged

➤ YN0050: The --production option is deprecated on 'install'; use 'yarn workspaces focus' instead

 App • Command "yarn" failed with exit code: 1

 App • ⚠️   FAIL  yarn failed installing dependencies

Rather than open a new issue, knowing that yarn > 1 isn't yet officially supported, adding here.

Any thoughts on workaround appreciated

[customautosys]

Another related yarn support issue, when running a build for electron it passes the --production flag which is deprecated:

yarn workspace ui build -m electron

 App • Running "yarn install --production" in /Users/arranmagee/Documents/GitHub.nosync/balena-device-ui/ui/dist/electron/UnPackaged

➤ YN0050: The --production option is deprecated on 'install'; use 'yarn workspaces focus' instead

 App • Command "yarn" failed with exit code: 1

 App • ⚠️   FAIL  yarn failed installing dependencies

Rather than open a new issue, knowing that yarn > 1 isn't yet officially supported, adding here.

Any thoughts on workaround appreciated

Dear @rstoenescu,

I am facing the exact same issue.

[maggie44]

Perhaps I should have created this as a separate issue for tracking?

[IlCallo]

@maggie0002 yes, please do

[maggie44]

Logged here: https://github.com/quasarframework/quasar/issues/14618

[erhard]

Yarn2 is not recommended with quasar (see above) yet yarn 1 does not support private repos in addition to public repos. So I try to migrate to npm . Where is it configured which package - manager is to be used with the latest quasar version. The problem is yarn is called from quasar ext add @bla/package-Id. But it should call npm

[erhard]

Found the solution myself.....removed yarn from engine in package.json