Yarn PnP support

[archseer]

What problem does this feature solve?

yarn 1.12 supports PnP: https://github.com/yarnpkg/rfcs/blob/master/accepted/0000-plug-an-play.md

yarnpkg/yarn#6382

What does the proposed API look like?

I tried to get it to work, but the default project was missing a whole bunch of peer dependencies in the package.lock. Once that was resolved, the vue-cli webpack rules would have to be adjusted with:

https://github.com/arcanis/pnp-webpack-plugin

And for jest:

https://github.com/arcanis/jest-pnp-resolver

[vielhuber]

This would be awesome for many usecases: Using vue-cli in Docker, Windows WSL or Vagrant currently is a pain (because of >100.000 mounted and synced files inside node_modules). Without this everything would be gone.

Do you consider this integrating in vue-cli (when choosing "yarn" inside the installation wizard)?

[yuu2lee4]

yeah,i would glad see the supporting for pnp,i want know transpileDependencies how to defained

[bodograumann]

I was trying to setup pnp for a basic vue-cli application. See https://github.com/bodograumann/yarn-pnp-app.

pnp is enabled and php-webpack-plugin is installed. This already fixed a lot of errors about module loading.

Now I’m at a point where I have no idea to proceed. Running yarn build gives the following error:

 ERROR  Failed to compile with 1 errors                                                                                                                                               14.42.06

This relative module was not found:

* ./src/main.js in multi ./src/main.js
 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Does anybody have an idea?

[sodatea]

@bodograumann
We currently don't have the capacity to fix all the issues with yarn pnp compatibility. But here's a note from @lbogdan who have successfully made a basic vue cli project work with yarn v2:
https://gist.github.com/lbogdan/b8c652e6fd6f906492e0adf0ee044c82
Hope it helps.

[lbogdan]

@sodatea Would you be open to a PR that fixes (most of) the issues I encountered, while not breaking current functionality?

[sodatea]

Yeah I would love to see that PR

[hufeng]

I look forward to being able to support

[hufeng]

@bodograumann Yes, I also encountered the same error

[hufeng]

@archseer @bodograumann

I found an easy way to combine vue-cli and yarn pnp

https://github.com/hufeng/vue-love-pnp

key point，Add a webpack.config.js to the current project directory and Add missing dependencies。
 
webpack.config.js

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
const Service = require('@vue/cli-service/lib/Service');
let service = process.VUE_CLI_SERVICE;

if (!service || process.env.VUE_CLI_API_MODE) {
  // const Service = require('./lib/Service');
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd());
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV);
}

module.exports = service.resolveWebpackConfig();

 

[fitzix]

After PR #4953 was merged, PnP works. But if global caching is enabled, an error occurs, it looks like there is a problem with eslint-plugin-vue.

ERROR STACK:

Module build failed (from ./.yarn/$$virtual/eslint-loader-virtual-9a87a5d115/7/.yarn/berry/cache/eslint-loader-npm-2.2.1-baa9138c1f-2.zip/node_modules/eslint-loader/index.js):
Error: Cannot read config file: /x/.yarn/$$virtual/eslint-plugin-vue-virtual-6249297965/7/.yarn/berry/cache/eslint-plugin-vue-npm-6.1.2-f3835ee917-2.zip/node_modules/eslint-plugin-vue/lib/configs/base.js
Error: Cannot find module '/x/.yarn/$$virtual/eslint-plugin-vue-virtual-6249297965/7/.yarn/berry/cache/eslint-plugin-vue-npm-6.1.2-f3835ee917-2.zip/node_modules/eslint-plugin-vue/lib/configs/base.js'

[mikob]

This is working mostly out of the box in recent versions thanks to what @fitzix mentions and @yarnpkg/plugin-compat. Even with typescript. All I had to do was modify the dependencies for some 3rd party loaders, and for typescript (for tslib). You mileage may vary depending on the state of @yarnpkg/plugin-compat - which is updated regularly.

I also had to get rid of references to node_modules in typeRoots in my tsconfig.json.

Recommend this issue be closed @LinusBorg

packageExtensions:
  "webpack-sharp-loader@*":
    dependencies:
      "file-loader": "*"
  "@vuetify/loader-shared@*":
    dependencies:
      "vue": "*"
  "vue-cli-plugin-vuetify@*":
    peerDependencies:
      "vue": "*"
  "vue-loader@*": 
    dependencies:
      "vue": "*"
      "@vue/compiler-sfc": "*"
  "lipsurf.com@*":
    dependencies:
      "tslib": "*"

@vue/cli 5.0.4
@vue/compiler-sfc 3.2.32
yarn 3.1.1