Yarn: Compatibility between Vue and PnP

[jacekkarczmarczyk]

Do you want to request a feature or report a bug?
Bug

DISCLAIMER: This reproduction involves 3 parties - yarn, vue cli 3 and favicons plugin. I'm not sure which one shoule be responsible, but I think this is the best place to decide. Sorry if the issue was mentioned before, I haven't found anything related

What is the current behavior?

 ERROR  Error loading vue.config.js:
 ERROR  Error: Package "[email protected]" (via "C:\Users\Jacek\AppData\Local\Yarn\Cache\v4\npm-favicons-webpack-plugin-0.0.9-df63e80c556b804e4925ec8e05bee36391573dc9\node_modules\favicons-webpack-plugin\lib\compiler.js") is trying to require the package "webpack" (via "webpack/lib/SingleEntryPlugin") without it being listed in its dependencies (favicons, loader-utils, lodash, favicons-webpack-plugin)
Error: Package "[email protected]" (via "C:\Users\Jacek\AppData\Local\Yarn\Cache\v4\npm-favicons-webpack-plugin-0.0.9-df63e80c556b804e4925ec8e05bee36391573dc9\node_modules\favicons-webpack-plugin\lib\compiler.js") is trying to require the package "webpack" (via "webpack/lib/SingleEntryPlugin") without it being listed in its dependencies (favicons, loader-utils, lodash, favicons-webpack-plugin)
    at makeError (C:\cygwin64\home\Jacek\test-pnp\.pnp.js:55:17)
    at Object.resolveToUnqualified (C:\cygwin64\home\Jacek\test-pnp\.pnp.js:13067:17)
    at Object.resolveRequest (C:\cygwin64\home\Jacek\test-pnp\.pnp.js:13138:31)
    at Function.Module._resolveFilename (C:\cygwin64\home\Jacek\test-pnp\.pnp.js:13320:30)
    at Function.Module._load (C:\cygwin64\home\Jacek\test-pnp\.pnp.js:13236:31)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\Jacek\AppData\Local\Yarn\Cache\v4\npm-favicons-webpack-plugin-0.0.9-df63e80c556b804e4925ec8e05bee36391573dc9\node_modules\favicons-webpack-plugin\lib\compiler.js:3:25)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)

If the current behavior is a bug, please provide the steps to reproduce.

yarn global add @vue/cli
vue create test-pnp # select default settings (babel, eslint)
cd test-pnp
yarn --pnp
yarn add favicons-webpack-plugin
echo "require('favicons-webpack-plugin')" > vue.config.js
yarn serve

What is the expected behavior?

No errors related to importing packages

Please mention your node.js, yarn and operating system version.

NodeJS: 8.11.3
Yarn: 1.13.0
Windows 10

[arcanis]

Regarding the initial issue (webpack is not a dependency of favicons-webpack-plugin), the error message is bogus (it should instead be "unmet peer dependency"). If you add webpack as a dependency of your project, it'll work just fine 👍

The problem is that it seems like Vue forgot to list some of their dependencies, which causes issues. For example, @vue/cli-service requires a file from @vue/component-compiler-utils but doesn't list it in its dependencies. Those will have to be fixed on the Vue side.

cc @posva

[jacekkarczmarczyk]

I understand that adding a dependency in my project solves the problem, but isn't it just a workaround? IMHO if some other package uses webpack then even if it's not listed in my dependencies it should be recognized

[arcanis]

No it shouldn't - for example if you depend on A and B that both depends on different versions of C, which version of C should your app be able to access? Now imagine that you bump A and B to new versions that are semver-compatible but that stop depending on C - your application will crash (or will randomly pick up yet another version used by another package, possibly a different semver-major).

It works with node_modules, kinda, but it's completely broken in that your application can randomly fail after adding or removing unrelated dependencies, or if your package manager changes its hoisting mechanisms.