Vue is loaded twice when I use lerna (npm link)

[wizardnet972]

Version

2.5.21

Reproduction link

https://github.com/wizardnet972/vue-lerna.git

Steps to reproduce

clone the repo: https://github.com/wizardnet972/vue-lerna.git

$ install lerna: npm i lerna -g (I think it not necessarily)
$ cd vue-lerna\apps\vue-app-ui
$ npm run serve -- --mode development

What is expected?

You will get this message at console twice:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

What is actually happening?

vue is loading twice or more per the usage of the packages..

package1 -> vue in it
package2. -> vue in it
packageN ...

I think what happends is, webpack try to resolve vue from the package1, from local node_module folder so webpack add vue package to package bundle.
see the sources.

** The packages is connected using npm link by lerna. **

[sqal]

Read about --hoist flag https://github.com/lerna/lerna/tree/master/commands/bootstrap#--hoist-glob

But... I think it won't solve your problem if one of the packages will use different Vue version, because then one Vue version will be hoisted in your project's root node_modules and another in e.g. package1's node_modules. I would just remove vue as dependency for any project in packages directory.

[wizardnet972]

@sqal thank you. it's work. but I think each package should have its own dependencies and webpack should be hoisting existing module base on version and hash or something like that. but anyway it's work this way. so thank you :)

But... I think it won't solve your problem if one of the packages will use different Vue version, because then one Vue version will be hoisted in your project's root node_modules and another in e.g. package1's node_modules.

correct! well, I think because it's monorepo, then all the versions of dependencies should be in the same version. like google does or rxjs...

I would just remove vue as dependency for any project in packages directory.

Well, I'll have another problem: typings and resolve vue from import statements when I use typescript.

Solved, just add postcss to root package.json..

~~ Another problem:

I add to this project vuetify, I using this in package1 <v-app>

I got many errors say, No PostCSS Config found in:

error  in C:/coder/vue-lerna/node_modules/vuetify/src/stylus/components/_toolbar.styl

Module build failed (from C:/coder/vue-lerna/node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: C:\coder\vue-lerna\node_modules\vuetify\src\stylus\components
    at config.load.then (C:\coder\vue-lernanode_modules\postcss-load-config\src\index.js:55:15)

 @ C:/coder/vue-lerna/node_modules/vuetify/src/stylus/components/_toolbar.styl 4:14-206 14:3-18:5 15:22-214
 @ C:/coder/vue-lerna/node_modules/vuetify/lib/components/VToolbar/VToolbar.js
 @ C:/coder/vue-lerna/node_modules/vuetify/lib/components/VToolbar/index.js
 @ C:/coder/vue-lerna/node_modules/vuetify/lib/components/index.js
 @ C:/coder/vue-lerna/node_modules/vuetify/lib/index.js
 @ C:/coder/vue-lerna/packages/package1/src/shell.vue
 @ C:/coder/vue-lerna/packages/package1/src/index.ts
 @ C:/coder/vue-lerna/packages/package1/index.ts
 @ ./src/main.ts 

What is missing here?~~