Vue-cli: use vue-cli with lerna and got Error: Cannot find module '@vue/cli-plugin-eslint'

[jkhhuse]

Version

4.1.1

Reproduction link

https://github.com/jkhhuse/vue-cli-with-lerna

Environment info

lerna: v3.18.1
vue-cli: 4.1.1

Steps to reproduce

step1: lerna init and lerna.json config:

{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "0.0.1"
}

step2:
use vue-cli create vue project, named vue-based.
step3:
in vue-based directory, execute " yarn run sere", and got error.

What is expected?

run sucess

What is actually happening?

$ yarn run serve

yarn run v1.13.0
$ vue-cli-service serve
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module '@vue/cli-plugin-eslint'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at idToPlugin (/Users/jk/工程/cmss-project/dm2/node_modules/@vue/cli-service/lib/Service.js:150:14)
    at Object.keys.concat.filter.map.id (/Users/jk/工程/cmss-project/dm2/node_modules/@vue/cli-service/lib/Service.js:189:20)
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/Users/jk/工程/cmss-project/dm2/node_modules/@vue/cli-service/lib/Service.js:175:10)
    at new Service (/Users/jk/工程/cmss-project/dm2/node_modules/@vue/cli-service/lib/Service.js:34:25)
    at Object.<anonymous> (/Users/jk/工程/cmss-project/dm2/node_modules/@vue/cli-service/bin/vue-cli-service.js:16:17)
error Command failed with exit code 1.

OR

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module '@vue/cli-plugin-typescript'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at idToPlugin (/Users/jk/工程/learn/vue-cli-with-lerna/node_modules/@vue/cli-service/lib/Service.js:150:14)
    at Object.keys.concat.filter.map.id (/Users/jk/工程/learn/vue-cli-with-lerna/node_modules/@vue/cli-service/lib/Service.js:189:20)
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/Users/jk/工程/learn/vue-cli-with-lerna/node_modules/@vue/cli-service/lib/Service.js:175:10)
    at new Service (/Users/jk/工程/learn/vue-cli-with-lerna/node_modules/@vue/cli-service/lib/Service.js:34:25)
    at Object.<anonymous> (/Users/jk/工程/learn/vue-cli-with-lerna/node_modules/@vue/cli-service/bin/vue-cli-service.js:16:17)

---

when copy this vue-cli based project outer of lerna dir, and reinstall node_modules, it can run success. however in lerna packages/vue-based it not work. when copy node_modules in lerna packages/vue-based to lerna root node_modules, yarn run serve run sucess.

[sodatea]

This problem is a little bit tricky…
For now, the workaround is to use the same semver range of typescript in the workspace root and the vue-based package (that is, ~3.5.3), so that @vue/cli-plugin-typescript and @vue/cli-service can be hoisted to the same level of node_modules.

[jkhhuse]

Thanks for your reply. my solution is：in lerna dir, when use vue-cli to create vue project, don't select eslint item, and add eslint later. this works but still hope to get an official solution.

[Gehbrial]

This problem is a little bit tricky…
For now, the workaround is to use the same semver range of typescript in the workspace root and the vue-based package (that is, ~3.5.3), so that @vue/cli-plugin-typescript and @vue/cli-service can be hoisted to the same level of node_modules.

This solved my issue. Thank you! :D

[paschalidi]

Thanks for your reply. my solution is：in lerna dir, when use vue-cli to create vue project, don't select eslint item, and add eslint later. this works but still hope to get an official solution.

This also can work

[Akryum]

Here is an error I got with @vue/cli-service: 4.2.3 in a yarn workspace:

> [email protected] serve /home/akryum/Projects/vue-devtools/packages/shell-dev-vue3
> vue-cli-service serve

internal/modules/cjs/loader.js:984
  throw err;
  ^

Error: Cannot find module '@vue/cli-plugin-eslint'
Require stack:
- /home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js
- /home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:981:15)
    at Function.Module._load (internal/modules/cjs/loader.js:863:27)
    at Module.require (internal/modules/cjs/loader.js:1043:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at idToPlugin (/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js:145:14)
    at /home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js:184:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js:170:10)
    at new Service (/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js:32:25)
    at Object.<anonymous> (/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/lib/Service.js',
    '/home/akryum/Projects/vue-devtools/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/akryum/.npm/_logs/2020-03-11T16_25_08_036Z-debug.log

[zipme]

Might be related https://github.com/yarnpkg/yarn/issues/7572

[realkimmy]

same issue

[JessicaSachs]

Same issue. The solution is still to sync your root level package.json with your package-level package.json and re-install dependencies.

[johnleider]

A workaround that I use is to create a new package named shared within the monorepo packages and move @vue/cli + eslint to packages/shared/package.json under dependencies. Then remove duplicates from other packages.

3 packages that I haven't been able to move to a shared level involve sass-loader, vue-cli-plugin-vuetify, and vuetify-loader; which is a Vuetify specific issue.

[oualidsellal]

To get rid of this issue just move the "@vue/cli-plugin-eslint" package from the Vue project package to the root package.json.

[magpiedigital]

The way I fixed this in yarn workspaces was using workspaces nohoist in the root package.json

"nohoist": [
  "**/@vue/cli-plugin-eslint", "**/@vue/cli-plugin-eslint/**"
]