Vue-cli does not work with symlinked node_modules (using lerna)

vue-cli

#1

I’m trying to create a monorepo using vue-cli 3 and lernajs. Some of the packages are built with target --lib and just provide some basic components that should be encapsulated from the rest of the application (for reusability in other projects).

I’m building the lib components like this: vue-cli-service build --target lib --name property-pane ./src/main.ts --report, with this main in package.json: "main": "dist/property-pane.umd.min.js".

When I try to build the main application, which imports the components lib, there are multiple outcomes I observed:

  1. The build process runs eslint on the imported .umd.min.js file, throwing over 28.000 errors:
20:26954   error  Requires a space before '}'
                                                  block-spacing

After this happens I get a bundle, but the chunk contains the vue library twice, once in the property-pane bundle, and once in the main app’s vendor chunk.

  1. The build process hangs and eventually throws an error:
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Do I have to configure something special to make this work?


#2

You have to set resolve.symlinks to false in the webpack config:

module.exports ={
  configureWebpack: {
    resolve: {
      symlinks: true, 
    },
  },
}

#3

Ah I found something related to symlinks on the forums today but I didn’t know how to disable them. Thanks!