vue/cli 3 unmet dependencies

Question

I tried the latest vue-cli 3 tool... full install project setup is done correctly, but as soon as I add a new dependency, I get a list of warnings, unmet dependencies ... is it due to yarn ( I did not test npm..) or not. Anyway to solve them?

    $ yarn add vue-i18n
    yarn add v1.9.4
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    warning "@vue/cli-plugin-babel > [email protected]" has unmet peer dependency "webpack@>=2".
    warning "@vue/cli-plugin-eslint > [email protected]" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
    warning "@vue/cli-plugin-pwa > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
    warning "@vue/eslint-config-prettier > [email protected]" has unmet peer dependency "eslint@>=3.14.1".
    warning " > [email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
    warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
    [4/4] 📃  Building fresh packages...
    success Saved lockfile.
    success Saved 1 new dependency.
    info Direct dependencies
    └─ [email protected]
    info All dependencies
    └─ [email protected]
    ✨  Done in 34.88s.

Answer 1

tl;dr: Probably not a problem except for webpack (but still probably not a problem). Since webpack is a peer dependency for multiple dependencies, non-deterministic behavior could arise due to different version constraints being listed in different dependencies.

What's Going On

Yarn presents these warnings to prevent different dependencies requiring different versions of a third sub-dependency, which may cause non-deterministic behavior. For instance here, babel-loader, eslint-loader, workbox-webpack-plugin, and sass-loader all have slightly different version constraints on webpack, which means without a yarn.lock file the version constraints are not exactly predictable. To resolve this, you could add webpack as an explicit dependency for your project, or you could yarn upgrade [email protected] to the version you desire then rely on your yarn.lock to specify this version.

The Solution

In your specific case, the only peer dependency you should be worried about is webpack because all the other ones are only required by a single dependency. However, its likely that no problems will arise if you were to just do nothing about these warnings.

Ideally, this should have been resolved by Vue in vue create process by adding webpack to the package.json, but since I am able to reproduce this error on my end I am guessing that they have not gotten around to it. I would encourage you to create an issue if one has hasn't already been made for this.

More info on Peer Dependencies

A project maintainer can specify peer dependencies in the project's package.json when they believe dependency conflicts could arise when using the package. For instance, if you visit the package.json for @vue/cli-plugin-babel then you will see webpack@>=2 listed in a peerDependencies section. Whoever wrote this Vue plugin likely added webpack as a peer dependency because they were aware how popular webpack is and wanted to warn the user that this plugin uses webpack so as to help them deal with potential conflicts.

While written with npm instead of yarn in mind, I found this article presents some useful advice for working with peer dependencies and peer dependency warnings.