Yarn issues with html-webpack-plugin and @cypress/webpack-dev-server

I am having issues with vue-cli-service build not being able to find html-webpack-plugin. This is already defined in devDependencies on package.json:

package.json

with the following log excerpt

"yarn build" log

I note that during yarn install, I see the following warnings:

"yarn install" log

My theory is a yarn cache issue and conflicting cache stores.

If I remove html-webpack-plugin from devDependencies and leave everything to yarn, it complains about missing html-webpack-plugin. Clearing all of my local yarn cache and reinstalling - same issue. Deleting the existing yarn.lock and rerunning install, same. issue.

If I manually run yarn install && yarn add -D html-webpack-plugin, I get the same warnings, but yarn build works. I have a temporary workaround in yarns scripts:

"scripts": {
    "install:dev": "yarn && yarn add -D html-webpack-plugin"
}

yarn does not give a dependency

 % yarn why html-webpack-plugin
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "html-webpack-plugin"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
error We couldn't find a match!
✨  Done in 0.24s.

But we have dependencies on html-webpack-plugin-4 & html-webpack-plugin-5

% yarn why html-webpack-plugin-4
yarn why v1.22.19
...
info Reasons this module exists
   - "@cypress#webpack-dev-server" depends on it
   - Hoisted from "@cypress#webpack-dev-server#html-webpack-plugin-4"
...

% yarn why html-webpack-plugin-5
yarn why v1.22.19
...
=> Found "html-webpack-plugin-5@5.5.3"
info Has been hoisted to "html-webpack-plugin-5"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@cypress#webpack-dev-server#html-webpack-plugin-5"
   - Hoisted from "@vue#cli-service#html-webpack-plugin-5"
...

But this is not really how yarn is supposed to work... Does anyone have a better solution, or perhaps there's something wrong in my initial project setup?

Solution

As discussed in the comments this looks like a Yarn 1.x resolution bug. @cypress/webpack-dev-server's package.json uses npm: alises to map html-webpack-plugin-5 to v5 of html-webpack-plugin.

That's all well and good but @vue/cli-service depends on html-webpack-plugin also, and does not want it aliased. Yarn 1, seemingly due to a bug, also aliases it for that dependency too, so it can't find it where it expects it.

Yarn 1 is old and upgrading it to the latest fixes the issue.