@vue/cli with yarn 2

vue-cli-with-yarn-2.md

• create basic @vue/cli project:

  • vue create vue-cli-yarn2
  • select "default (babel, eslint)"
  • cd vue-cli-yarn2

• switch to yarn 2:

  • mv node_modules node_module~
  • yarn policies set-version v2
  • yarn --version
  • yarn

• try to build the project:

  • yarn build --report-json

 ERROR  Failed to compile with 1 errors

Failed to resolve loader: eslint-loader
You may need to install it.
 ERROR  Build failed with errors.

• install pnp-webpack-plugin
  • yarn add -D pnp-webpack-plugin
  • add vue.config.js:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  configureWebpack: {
    resolve: {
      plugins: [
        PnpWebpackPlugin,
      ],
    },
    resolveLoader: {
      plugins: [
        PnpWebpackPlugin.moduleLoader(module),
      ],
    },
  },
};

• try to build again

 ERROR  Failed to compile with 1 errors

This relative module was not found:

* ./src/main.js in multi ./src/main.js
 ERROR  Build failed with errors

• check dist/report.json

multi ./src/main.js
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: cache-loader (via \"cache-loader\")
Required by: vue-cli-yarn2@workspace:. (via /C:/Users/Bogdan/work/vue-cli-yarn2/)

 @ multi ./src/main.js app[0]

• unplug @vue/cli-service

  • yarn unplug @vue/cli-service
  • package now in .yarn/unplugged/\@vue-cli-service-virtual-ca80db4841224a436b9a82769fd0a782bf6eb00e31959d2665abf0ed9520a8c3, we can fiddle around with it

• replace all .loader('foo-loader') (and one loader: 'file-loader') with .loader(require.resolve('foo-loader')) in

  • lib/config/base.js (comment out the pug stuff)
  • lib/config/css.js (comment out the s[ac]ss/less/stylus stuff)

• do the same (unplug, replace loaders) with @vue/cli-plugin-babel

• add cache-loader: "npm:^2.0.1" and thread-loader: "npm:^2.1.2" to @vue/cli-plugin-babel dependencies in yarn.lock

• do the same with @vue/cli-plugin-eslint

• got to next error:

 ERROR  Failed to compile with 1 errors                                                                                               2:22:32 PM

 error  in ./src/main.js

Module build failed (from ./.yarn/virtual/thread-loader-virtual-c1f3b73550c1f694de834ceb92ff5fcb1ce8db6be139387e4b160ae53c37ab0b/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
A package is trying to access another package without the second one being listed as a dependency of the first one

Required package: @vue/babel-preset-app (via "@vue/babel-preset-app/package.json")
Required by: vue-cli-yarn2@workspace:. (via /C:/Users/Bogdan/work/vue-cli-yarn2/)

• add preset.js in @vue/cli-plugin-babel:

module.exports = require('@vue/babel-preset-app');

• change babel.config.js:

module.exports = {
  presets: [
    require.resolve('@vue/cli-plugin-babel/preset')
  ]
}

• next error:

 ERROR  Failed to compile with 1 errors                                                                                               2:27:50 PM

 error  in ./src/main.js

Module build failed (from ./.yarn/virtual/thread-loader-virtual-c1f3b73550c1f694de834ceb92ff5fcb1ce8db6be139387e4b160ae53c37ab0b/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
[BABEL] C:\Users\Bogdan\work\vue-cli-yarn2\src\main.js: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: @babel/core (via "@babel/core")
Required by: @babel/plugin-proposal-async-generator-functions@virtual:0858e129ea1a21a739423aa329f1ea3061c3b2adcbbca1fefd15827821d0cf7a8c5299855649a67fed7fd04487a72f9acbd2942120f353aca8a52509a20e7202#npm:7.2.0 (via /C:/Users/Bogdan/work/vue-cli-yarn2/.yarn/virtual/@babel-plugin-proposal-async-generator-functions-virtual-3f18e3f0f8b658b510c636facbb5ff6a12984a12fb5f7438c8a5771c71f5857e/node_modules/@babel/plugin-proposal-async-generator-functions/lib/for-await.js)

• add "@babel/core": "npm:^7.0.0" to @vue/babel-preset-app peerDependencies

• unplug vue-loader, replace cache-loader with ${require.resolve('cache-loader')} in lib/loaders/pitcher.js:131

• remove postcss config from package.json

• DONE!