Bether JS-code completion for monorepos (with lerna andor yarn workspaces)


In monorepos via lerna or yarn workspaces, all libraries installed via yarn are stored in node_modules inside the root directory. But Webstorm thinks that dependencies (node_modules) are on the same level as the package.json in which they are defined.

Here is an example file-structure for a monorepo illustrated:

In this example I get no code-completion for material-ui, cause webstorm thinks it is defined in ./packages/workspace-a/node_modules. but cause of the monorepo-structure it lays in ./node_modules .

It would be great if Webstorm would also enable material-ui (in this example) as js-library inside the root-node_modules.


The only way we got it working is to add all our dependencies from each package in the monorepo in the root package json as well. Definitely not an ideal solution.



3 days ago in WebStorm 2018.1.1 yarn workspaces support is added.


Any documentation on how tuo use WebStrom with lerna and yarn workspaces?


@Jos Warmer

Most of it should actually work out of the box.


I am afraid it does not work for me. I might be doing something wrong, but everything works fine if I run from the command line. I am running a build to compile and running webpack. But when running inside WebStorm I have several problems:

  1. Find Usages and Refactoring (rename) will only look in the package that the element is defined in,  it will not look into the other packages.
  2. Compiling inside WebStorm (via TypeScript console) will generate .js and .d.ts. and .map files inside the source folder, instead of in the "dist"  folder as configured in the tsconfig.json.
  3. If I want to navigate to the definition of an element (Ctlr-Click) I get two options, which (interestingly) both go to the same file. So I can get there, but always need to select one of the two identical options.



Please sign in to leave a comment.