[Case Study] Vue-cli

[AlexandreBonaventure]

What package is covered by this investigations?

vue-cli@4.2.2

Describe the goal of the investigation
The goal is to help vue-cli reach a seamless support of yarn@2.x
For reference: vuejs/vue-cli#5135

Investigation report
Hello Yarn team! First of all, thanks for your incredible work. Lately, vue-cli released 4.2.0 with better support for yarn v2. So I was eager to try how good it was, I've created a working example repo here: https://github.com/AlexandreBonaventure/workspace-yarn2-example
As you can see, there are a couple of things/PRs to merge in third-party tooling to reach 100% support, but overall it is working just fine!

However, I stumble upon an issue when building the project with --modern mode.
Here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/index.js#L64
Vue-cli service is spawning a sub process of itself, but this is breaking in the virtual context. (you can workaround it by running yarn unplug @vue/cli-service)
The error Error: spawn /project-folder/.yarn/$$virtual/@vue-cli-service-virtual-6a585d6e2c/0/cache/@vue-cli-service-npm-4.2.2-fad0399727-1.zip/node_modules/@vue/cli-service/bin/vue-cli-service.js ENOENT

I'm willing to create a PR in vue-cli, but don't even know what would be the best way to solve it. Is there any best practice you would recommend when you want to self-reference? Can you guys help me figure out how to make it work in the virtual context ?
Thanks for your help !

[arcanis]

Hello! 👋 I took a quick look, great work! Thanks for helping us out 😊

It should work out of the box, but it doesn't because of two small issues:

• Not entirely sure, but I think the env is overriden instead of extended (so we lose the NODE_OPTIONS variable which setups the loader). A fix would be to spread the process.env variable before setting the VUE_CLI_MODERN_BUILD variable.

• Since the script is spawned, the system shell is looking inside it for its shebang. But since the script is a zipped script, it doesn't know how to access it. Fortunately the fix is very simple: instead of doing spawn(script), we just have to use spawn('node', [script]). Node will load, then will setup the hook, and only then will load the script.

[merceyz]

Not entirely sure, but I think the env is overriden instead of extended (so we lose the NODE_OPTIONS variable which setups the loader). A fix would be to spread the process.env variable before setting the VUE_CLI_MODERN_BUILD variable.

It automatically extends from the existing env https://github.com/sindresorhus/execa#env

---

cc @sodatea

[merceyz]

--modern has been fixed upstream

[RDIL]

Closing as Vue CLI is now in maintenance only.

Vue CLI is in Maintenance Mode!

For new projects, please use create-vue to scaffold Vite-based > projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.