Install package from package registry instead of local when using NPM workspaces

Question

I'm working on a design system and we are moving from a simple project with all dependencies on the same build step, to a one with a more granular approach, where tokens and icons are separated packages (this allow us to move quickly if we need to add icons or change some tokens without needing to publish new library version). To do that, we started to use NPM workspaces. In general they work fine, but we are having issues with dependencies present on the same repo.

The structure of the project is something like this:

- root
  - icons
    - icons-folder
    package.json
  - tokens
    - tokens.json
    package.json
  - library
    package.json
  package.json

Icons and tokens are dependencies on library. When I run npm ci looks like it's installing the "local" version of the packages prior to the build step, so there are some files not present yet. For instance we are using Style Dictionary to build tokens to css, scss and js files, but the tokens definition is on a JSON file.

The problem is when I try this:

➜ npm ci
➜ npm run storybook:build

If I run this (locally oo inside Gitlab CI), I get an error because is not possible to resolve tokens.css on preview.js from storybook.

If I run npm run tokens:build and npm run icons:build prior to npm run storybook:build it works fine.

➜ npm run tokens:build
➜ npm run icons:build
➜ npm run storybook:build

AFAIK, the issue arises because NPM finds a package.json that meets package name and version declared on the package.json inside library and install the content of that folder, but after reading docs, I couldn't find a way to force installation from npm registry instead of the local version.

Is there a way to force installation from NPM package registry? Thanks!

Answer 1

If you are using yarn. You can add enableTransparentWorkspaces: false to .yarnrc.yml. This will switch the order of lookup to look first to npm and then to the workspaces.

Reference