Vue-cli: 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 ... https://github.com/arcanis/pnp-webpack-plugin/pull/17

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

[sodatea]

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 https://github.com/yarnpkg/berry/issues/654#issuecomment-569654598

[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

[bkarlson]

Any idea how to deal with this error?

This dependency was not found:

* vue in /project/.yarn/cache/vue-class-component-npm-7.2.2-75dec6a313-2.zip/node_modules/vue-class-component/dist/vue-class-component
.esm.js

The vue-class-component is referenced in a package Vuex-Pathify that is used by a vue-project that i'm trying to build (error above).

[bkarlson]

answering myself, added to .yarnrc.yml:

    "vue-class-component@*":
        peerDependencies:
            "vue": "*"                        

[ipat500]

Like @bkarlson said above I currently need to have the following in .yarnrc.yml before running create:

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

The above works for me when using the following preset:

   "demo-preset": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "cssPreprocessor": "dart-sass"
    }

With the above I can run:

yarn dlx -p @vue/cli vue create my-project

And then yarn install, yarn serve, yarn build, yarn lint all work fine.

However, when I run yarn build --modern it produces the following error:

 DONE  Compiled successfully in 3285ms                                                                                             5:09:12 PM

  File                                      Size             Gzipped

  dist/js/chunk-vendors-legacy.fcdf40be.    115.75 KiB       40.75 KiB
  js
  dist/js/app-legacy.4bb51ca2.js            6.14 KiB         2.24 KiB
  dist/js/about-legacy.bf4cd176.js          0.45 KiB         0.32 KiB
  dist/css/app.2f20bce4.css                 0.42 KiB         0.26 KiB

  Images and other types of assets omitted.

 ERROR  Error: spawn /projects/my-project/.yarn/$$virtual/@vue-cli-service-virtual-705d11e2ca/0/cache/@vue-cli-service-npm-4.2.3-3b0ebff959-2.zip/node_modules/@vue/cli-service/bin/vue-cli-service.js ENOENT
Error: spawn /projects/my-project/.yarn/$$virtual/@vue-cli-service-virtual-705d11e2ca/0/cache/@vue-cli-service-npm-4.2.3-3b0ebff959-2.zip/node_modules/@vue/cli-service/bin/vue-cli-service.js ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

Despite the very unhelpful error spawn produces my best guess as to where the offending call is coming from is here:
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/index.js#L64-L65

I'm not really sure how $$virtual is supposed to work but my impression is that that is some part of how yarn 2 extracts things out of the .zip files. Perhaps there is some issue caused by the recursive call to the same package? I have no idea.

Since this is slightly outside the original "what is expected" of this issue (yarn serve) should I make a new issue for this or are we keeping things like this here?

[LinusBorg]

I think we should collect any yarn2 problems here.

[AlexandreBonaventure]

@ipat500 see https://github.com/yarnpkg/berry/issues/964

[pattrickrice]

Hi there, since we're collecting issues with yarn 2 here, I thought I would report issues with the cypress plugin:

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass
)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

$ cd hello-world
$ yarn
$ yarn set version berry
$ yarn
$ yarn test:e2e --headless # fails `Required package: babel-loader (via "babel-loader")`
$ yarn add -D babel-loader
$ yarn test:e2e --headless # fails `Required package: babel-loader (via "@babel/core")`
$ yarn add -D @babel/core
$ yarn test:e2e --headless # This dependency was not found: tslib
$ yarn add -D tslib
$ yarn test:e2e --headless # Hangs forever

Cypress not opening with Yarn 2.0 was reported here: https://github.com/cypress-io/cypress/issues/6377
At this point you need to force the resolution of cypress to 4+
package.json

{
  "resolutions": {
    "cypress": "^4.4.0"
  }

$ yarn
$ yarn test:e2e --headless 
 (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    4.5.0                                                                              │
  │ Browser:    Electron 80 (headless)                                                             │
  │ Specs:      1 found (test.js)                                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  test.js                                                                         (1 of 1)

Oops...we found an error preparing this test file:

  /home/patrick/hello-world/tests/e2e/specs/test.js

The error was:

Error: Cannot find module '@vue/cli-plugin-babel/preset' from '/home/patrick/hello-world' while parsing file: /home/patrick/hello-world/tests/e2e/specs/test.js


This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Oops...we found an error preparing this test file:

  /home/patrick/hello-world/tests/e2e/support/index.js

The error was:

Error: Cannot find module '@vue/cli-plugin-babel/preset' from '/home/patrick/hello-world' while parsing file: /home/patrick/hello-world/tests/e2e/support/index.js


This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        0                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     test.js                                                                          │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF                                                     
  -  Finished processing: tests/e2e/videos/test.js.mp4                                   (0 seconds)


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  test.js                                    0ms        -        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                       0ms        -        -        1        -        -  

 ERROR  Error: Command failed: /home/patrick/hello-world/.yarn/unplugged/cypress-npm-4.5.0-a1072bd48b/node_modules/cypress/bin/cypress run --config baseUrl=http://localhost:8080/ --headless
Error: Command failed: /home/patrick/hello-world/.yarn/unplugged/cypress-npm-4.5.0-a1072bd48b/node_modules/cypress/bin/cypress run --config baseUrl=http://localhost:8080/ --headless
    at makeError (/home/patrick/hello-world/.yarn/cache/execa-npm-1.0.0-7028e37029-3.zip/node_modules/execa/index.js:174:9)
    at /home/patrick/hello-world/.yarn/cache/execa-npm-1.0.0-7028e37029-3.zip/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

At this point, I'm not sure how to resolve the issue. yarn add -D @vue/cli-plugin-babel does not resolve the issue.

[bodograumann]

So I just tried using vue-cli with yarn 2 and found a few problems.
I ran vue create -m yarn -b my-app. yarn dlx … doesn't work because it complains about not finding a package.json.

1. By default it uses yarn 1 and I had to manually yarn set version berry.
2. Lot's of missing dependency errors. Adding the dependencies to .yarnrc.yml quiets the error, but I am a little apprehensive about adding dependencies which should be peerDependencies.

yarnPath: ".yarn/releases/yarn-berry.js"
packageExtensions:
  "@vue/cli-service@*":
    peerDependencies:
      "@vue/cli-plugin-babel": "*"
      "@vue/cli-plugin-eslint": "*"
      "@vue/cli-plugin-pwa": "*"
      "@vue/cli-plugin-typescript": "*"
      "@vue/cli-plugin-unit-jest": "*"
      "@vue/cli-plugin-e2e-nightwatch": "*"
  "@vue/cli-plugin-typescript@*":
    dependencies:
      "babel-loader": "*"
  "babel-loader@*":
    dependencies:
      "@babel/core": "*"
  "fork-ts-checker-webpack-plugin@*":
    dependencies:
      "vue-template-compiler": "*"
    peerDependencies:
      "typescript": "*"
  "vue-template-compiler@*":
    dependencies:
      "vue": "*"
  "vue-router@*":
    peerDependencies:
      "vue": "*"

1. Typescript is missing the type for process and complains during compilation, e.g.:

ERROR in /home/bodo/my-app/src/registerServiceWorker.ts(5,5):                                                                                                             
5:5 Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    3 | import { register } from "register-service-worker";                                                                                                                                   
    4 | 
  > 5 | if (process.env.NODE_ENV === "production") {                                                                                                                                          
      |     ^                                                                                                                                                                                 
    6 |   register(`${process.env.BASE_URL}service-worker.js`, {
    7 |     ready() {                                                                                                                                                                         
    8 |       console.log(

[heavenkiller2018]

i have the same problem! when does vue can work with yarn2?

[bkarlson]

After recent upgrade of most of vue-* packages, vue-cli stopped working throwing such error:

0:0 error Parsing error: vue-eslint-parser tried to access babel-eslint, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

The solution is similar to above, just add to .yarnrc.yml:

  vue-eslint-parser@*:
    dependencies:
      babel-eslint: "*"