Yarn2 compatibility

[Jancat]

Version

4.1.2

Environment info

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 2.0.0-rc.27 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: Not Found
    Safari: 13.0.4
  npmGlobalPackages:
    @vue/cli: 4.1.2

Steps to reproduce

1. Run the vue create demo command, using the following presets:

"demo-preset": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save",
            "commit"
          ]
        },
        "@vue/cli-plugin-unit-mocha": {}
      },
      "cssPreprocessor": "dart-sass"
    }

What is expected?

Create the project and run yarn serve successfully.

What is actually happening?

The shell output some errors:

➤ YN0050: The --registry option is deprecated; prefer setting npmRegistryServer in your .yarnrc.yml file
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:1.2.11: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:1.2.11: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ nan@npm:2.14.0: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ evp_bytestokey@npm:1.0.3: Implicit dependencies on node-gyp are discouraged
➤ YN0002: │ frontend@workspace:. doesn't provide eslint@>= 1.6.0 requested by @vue/cli-plugin-eslint@npm:4.1.2
➤ YN0002: │ frontend@workspace:. doesn't provide typescript@>=2 requested by @vue/cli-plugin-typescript@npm:4.1.2
➤ YN0002: │ frontend@workspace:. doesn't provide vue-template-compiler@^2.0.0 requested by @vue/cli-service@npm:4.1.2
➤ YN0002: │ @vue/cli-plugin-unit-mocha@npm:4.1.2 [d9650] doesn't provide webpack@^4.0.0 requested by mochapack@npm:1.1.13
➤ YN0000: └ Completed in 22.58s
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @nodelib/fs.scandir@npm:2.1.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @nodelib/fs.stat@npm:2.0.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @nodelib/fs.walk@npm:1.2.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @vue/cli-plugin-unit-mocha@npm:4.1.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ ansi-colors@npm:3.2.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ array-union@npm:2.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ browser-stdout@npm:1.3.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ diff@npm:3.5.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ dir-glob@npm:3.0.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ fast-glob@npm:3.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ fastq@npm:1.6.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ flat@npm:4.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ glob-parent@npm:5.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ glob@npm:7.1.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ globby@npm:10.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ growl@npm:1.10.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ ignore@npm:5.1.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ is-buffer@npm:2.0.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ jsdom-global@npm:3.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ mocha@npm:6.2.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ mochapack@npm:1.1.13 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ node-environment-flags@npm:1.0.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ nodent-runtime@npm:3.2.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ path-type@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ progress@npm:2.0.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ reusify@npm:1.0.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ run-parallel@npm:1.1.9 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ supports-color@npm:6.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ toposort@npm:2.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-unparser@npm:1.6.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:14.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 6.18s
➤ YN0000: ┌ Link step
➤ YN0007: │ fsevents@patch:fsevents@npm%3A1.2.11#builtin<compat/fsevents>::version=1.2.11&hash=e8cd9e must be built because it never did before or the last one failed
➤ YN0007: │ core-js@npm:3.6.4 must be built because it never did before or the last one failed
➤ YN0007: │ yorkie@npm:2.0.0 must be built because it never did before or the last one failed
➤ YN0007: │ core-js@npm:2.6.11 must be built because it never did before or the last one failed
➤ YN0007: │ nodent-runtime@npm:3.2.1 must be built because it never did before or the last one failed
➤ YN0007: │ ejs@npm:2.7.4 must be built because it never did before or the last one failed
➤ YN0009: │ fsevents@patch:fsevents@npm%3A1.2.11#builtin<compat/fsevents>::version=1.2.11&hash=e8cd9e couldn't be built successfully (exit code 1, logs can be found here: /var/folders/td/q20k2cmj2f377tggk0t0z7wm0000gn/T/logfile-5370069TiMAau5XgP.log)
➤ YN0000: └ Completed in 5.14s
➤ YN0000: Done with warnings in 33.95s
🚀  Invoking generators...
📦  Installing additional dependencies...

➤ YN0050: The --registry option is deprecated; prefer setting npmRegistryServer in your .yarnrc.yml file
➤ YN0000: ┌ Resolution step
➤ YN0002: │ frontend@workspace:. doesn't provide eslint@>= 1.6.0 requested by @vue/cli-plugin-eslint@npm:4.1.2
➤ YN0002: │ frontend@workspace:. doesn't provide typescript@>=2 requested by @vue/cli-plugin-typescript@npm:4.1.2
➤ YN0002: │ frontend@workspace:. doesn't provide vue-template-compiler@^2.0.0 requested by @vue/cli-service@npm:4.1.2
➤ YN0002: │ @vue/cli-plugin-unit-mocha@npm:4.1.2 [d9650] doesn't provide webpack@^4.0.0 requested by mochapack@npm:1.1.13
➤ YN0000: └ Completed in 0.25s
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0.46s
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1.52s
➤ YN0000: Done with warnings in 2.27s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project frontend.
👉  Get started with the following commands:
$ cd frontend
$ yarn serve

The generated package.json was incomplete(missing scripts and dependencies):

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-typescript": "^4.1.0",
    "@vue/cli-plugin-unit-mocha": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0"
  }
}

Finally, faild to run yarn serve

Usage Error: Couldn't find a script named "serve".

[rromanv]

I'm having the exact same issue.

[DRoet]

pretty sure you need yarn add vue-cli-plugin-pnp -D when using typescript

[LinusBorg]

yarn 2 comes with a lot of breaking changes that will require some serious work to make it work with this project.

For example: since it has its own module resolution, webpack's alias and jest's moduleNameMapperoptions no longer work. Instead, yarn now requires you do add those aliases as some sort of pseudo-module to your dependencies in package.json. But that doesn't work with npm as far as I understand. And that's just one example.

So now we are in a situation where users will have to actively decide wether they want to use npm or yarn for a project, as we have to set up parts of the config differently.

It also means you can't easily switch from npm to yarn by deleting package-lockjson and running yarn - you will have to re-configure parts of your project.

It will take some time and likely a mahor release of Vue CLI to address yarn 2.

Edit: It seems the yarn team made some changes that now support webpack aliases. One less thing to care about ... arcanis/pnp-webpack-plugin#17

Not sure if similiar fixes where applied to the plugins for jest, rollup etc.

[haoqunjiang]

Supported in Vue CLI 4.2 (without the need of vue-cli-plugin-pnp).

As far as I tested, there are still problems in the typescript, unit-*, and e2e-* plugins. ESLint with prettier config seems also broken. Other presets are fine.

Contributions are welcome.

[AlexandreBonaventure]

for anyone reading, using vue-cli + yarn v2 with workspaces is broken because of pnpFallbackMode not being enabled in the context of workspaces. see yarnpkg/berry#654 (comment)

[AlexandreBonaventure]

I've put up a working example of a vue-cli app with Typescript / Yarn v2 + workspaces / Eslint here https://github.com/AlexandreBonaventure/workspace-yarn2-example
I hope it will help others, and that it can serve as a working document for implementing various fixes in third-party libraries

[bkarlson]

I'm getting "Error: A package is trying to access another package without the second one being listed as a dependency of the first one" despite setting up packageExtensions in .yarnrc.yml:

packageExtensions:
    "@vue/cli-service@*":
        peerDependencies:
            "@vue/cli-plugin-babel": "*"
            "@vue/cli-plugin-eslint": "*"

Error:

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/cli-plugin-babel (via "@vue/cli-plugin-babel")
Required by: @vue/cli-service@virtual:76152537329bf61477530d65c3327d65cb3ced27dbbd7306c7cd6a12bd3ef3338268a3b44c816b5f85136c0edcbbc855a8df1776f8ccb26a6a8b17b4f838dd60#npm:4.2.2 (via /project/.yarn/$$virtual/@vue-cli-service-virtual-29e59e8438/0/cache/@vue-cli-service-npm-4.2.2-fad0399727-2.zip/node_modules/@vue/cli-service/lib/)

I'm not using TS.

Any idea how to get serve to work?

[AlexandreBonaventure]

@bkarlson make sure to run yarn again after making any modifications in .yarnrc.yml