Yarn 2 Plug’n’Play support

[axxie]

Description

vue-material-adapter is not compatible with yarn 2 Plug’n’Play.

Versions

vue-material-adapter: 2.0.3
yarn: 2.4.2
node: v12.13.1
OS: Windows 10 21H1 (OS Build 1904.1055)
Browser: any/doesn’t matter - issue is with the dependencies

Steps to reproduce

1. Create project with vue and vue-material-adapter for yarn version 2 (berry).
2. Make sure Plug’n’Play is enabled
3. Run build or development server.

The demo repository with reproduction is available here: https://github.com/axxie/vue-material-adapter-issues/tree/yarn-pnp-issue. The demo is based on the basic-vue-cli example.

To reproduce the issue, run the following commands in the terminal:

git clone https://github.com/axxie/vue-material-adapter-issues.git -b yarn-pnp-issue
cd vue-material-adapter-issues
yarn install
yarn serve  

Expected result

The development server is started and serves the demo app.

Actual result

The server is not started and the following errors are displayed in the terminal:

error  in ./.yarn/$$virtual/vue-material-adapter-virtual-ad6ef94fe0/0/cache/vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip/node_modules/vue-material-adapter/dist/vue-material-adapter.esm.js

Module not found: Error: Can't resolve '@material/banner' in '<path>\.yarn\$$virtual\vue-material-adapter-virtual-ad6ef94fe0\0\cache\vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip\node_modules\vue-material-adapter\dist'

 error  in ./.yarn/$$virtual/vue-material-adapter-virtual-ad6ef94fe0/0/cache/vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip/node_modules/vue-material-adapter/dist/vue-material-adapter.esm.js

Module not found: Error: Can't resolve '@material/dom/events' in '<path>\.yarn\$$virtual\vue-material-adapter-virtual-ad6ef94fe0\0\cache\vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip\node_modules\vue-material-adapter\dist'

… and so on …

The same error is printed when running “yarn build” command.

Details

vue-material-adapter uses separate packages from "Material Components for the web" (prefixed with @material/), but it doesn't list individual packages as dependencies. Vue-material-adapter lists material-components-web package as a dependency, but with yarn 2 Plug'n'play it is not enough.

Plug'n'play requires a package to list all packages it uses even if they are already included as a transitive dependency. The detail are described on Plug'n'Play page: https://yarnpkg.com/features/pnp

Expected fix

The vue-material-adapter should explicitly list all of its dependencies in package.json.

[axxie]

Workaround

Add the following lines to .yarnrc.yml of the client app:

packageExtensions:
  "vue-material-adapter@*":
    dependencies:
      "@material/animation": "^10.0.0"
      "@material/auto-init": "^10.0.0"
      "@material/banner": "^10.0.0"
      "@material/base": "^10.0.0"
      "@material/button": "^10.0.0"
      "@material/card": "^10.0.0"
      "@material/checkbox": "^10.0.0"
      "@material/chips": "^10.0.0"
      "@material/chips/trailingaction": "^10.0.0"
      "@material/circular-progress": "^10.0.0"
      "@material/data-table": "^10.0.0"
      "@material/density": "^10.0.0"
      "@material/dialog": "^10.0.0"
      "@material/dom": "^10.0.0"
      "@material/drawer": "^10.0.0"
      "@material/elevation": "^10.0.0"
      "@material/fab": "^10.0.0"
      "@material/feature-targeting": "^10.0.0"
      "@material/floating-label": "^10.0.0"
      "@material/form-field": "^10.0.0"
      "@material/icon-button": "^10.0.0"
      "@material/image-list": "^10.0.0"
      "@material/layout-grid": "^10.0.0"
      "@material/line-ripple": "^10.0.0"
      "@material/linear-progress": "^10.0.0"
      "@material/list": "^10.0.0"
      "@material/menu": "^10.0.0"
      "@material/menu-surface": "^10.0.0"
      "@material/notched-outline": "^10.0.0"
      "@material/progress-indicator": "^10.0.0"
      "@material/radio": "^10.0.0"
      "@material/ripple": "^10.0.0"
      "@material/rtl": "^10.0.0"
      "@material/segmented-button": "^10.0.0"
      "@material/select": "^10.0.0"
      "@material/shape": "^10.0.0"
      "@material/slider": "^10.0.0"
      "@material/snackbar": "^10.0.0"
      "@material/switch": "^10.0.0"
      "@material/tab": "^10.0.0"
      "@material/tab-bar": "^10.0.0"
      "@material/tab-indicator": "^10.0.0"
      "@material/tab-scroller": "^10.0.0"
      "@material/textfield": "^10.0.0"
      "@material/theme": "^10.0.0"
      "@material/tooltip": "^10.0.0"
      "@material/top-app-bar": "^10.0.0"
      "@material/touch-target": "^10.0.0"
      "@material/typography": "^10.0.0"

And run “yarn install” again.

The demo project with workaround is available here: https://github.com/axxie/vue-material-adapter-issues/tree/yarn-pnp-issue-workaround