monorepo with vue-cli 3 and lerna

Question

I'm trying to create a monorepo using vue-cli 3 and lerna. I now have two packages:

common and app. Both common and app use Vue and import it. common has its main set like this. "main": "dist/common.umd.min.js"

When I import common in app, the process crashes with this error message trying to process common.umd.min.js:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Even running with node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve throws this error.

If I use "main": "src/main.ts", the build process works, but when I use vue-cli-service build, Vue is bundled twice, once for common and once for app.

Answer 1

Like you noticed, you are bundling Vue twice in your app. This is likely because you are including Vue as a dependency of both your common and app packages.

Have the app package be the only package that depends on Vue, and then you can make your common package export a Vue plugin. Your app package can then install the common plugin like so:

// main.js (in the app package)

import Vue from 'vue';
import plugin from 'my-common-package';

Vue.use(plugin);

I'm unsure of what is causing the out of memory error, but only using one Vue instance is a good start.