CODEWITHSUNDEEP
yarnpkgyarn-workspaces
neaumusic
neaumusic

Reputation: 10484

How to install a yarn workspace package in sibling for use in a parent app

I have a yarn workspace with standalone, sibling packages

- Yarn Workspace
  - Data Package
  - UI Package

The UI Package depends on the Data Package and both packages need to be installed in a parent app:

- App
  - Data Package
  - UI Package
    - Data Package

I can't seem to pack the UI with its own copy of Data -- when adding UI to the app I get an error that the dependency cannot be found / the data package wasn't included.

// doesn't work: packages/ui-package/index.ts
import { DataService } from "../../data-package";
import { DataService } from "@scope/data-package";

// doesn't work: packages/ui-package/package.json
"@scope/data-package": "./data-package.tgz",
"@scope/data-package": "workspace:packages/data-package",

I feel that an option may be to copy the data tgz to the dist folder before packing (though after the prepack command which wipes the dist folder), but this seems like a hack, and that there's probably a simple yarn config to pack correctly. I feel that possibly a root tsconfig could potentially handle this, but again these packages should be mostly independent, and adding build processes for something simple makes no sense.

Hopefully the problem makes sense, I'm curious how I can install Data into UI, bundle that, and include it alongside the Data package in a parent app.

Upvotes: 3

Views: 12999

Answers (1)

neaumusic
neaumusic

Reputation: 10484

Because this question now has 10k+ views I just want to update it to say that Yalc made this process very seamless, though I don't have the exact steps since this was a long time ago. The TLDR of how yalc works is that you yalc publish (to the local directory ~/.yalc) Then you just yalc install package_name and it all just works.

Old answer (reversed since Yalc is the better solution):

Using Yalc

I've seen a lot of people using yalc for package management, specifically due to caching issues around tgz files eg

  • dependencies: rm ~/.yarn/berry/cache/@scope-ui-package__PRESS_TAB_HERE__

  • resolutions: rm .yarn/cache/@scope-ui-package__PRESS_TAB_HERE__

yalc will apparently 'publish' a package to a global folder, and install as if it were through artifactory or some npm hub

I have not used yalc yet, but plan to

Hack Solution

The hack solution I found was to install via the workspace command, then manually change the package.json entry to an absolute path (may be a different path on destination server):

  1. add via local workspace: yarn workspace @scope/ui-package add @scope/data-package
  2. change package.json to absolute path: "@scope/data-package": "/absolute/path/to/data-package.tgz"
  3. pack tgz: yarn workspace @scope/ui-package pack --filename ui-package.tgz
  4. copy to app directory, yarn remove @scope/ui-package, delete cached files (see yalc answer; two cached 'dependencies' install via this method), yarn add ./ui-package.tgz

Upvotes: 1

Related Questions