How to install package with local path by Yarn? It couldn't find package

Question

In my package.json I'm pointing local package my-custom-i18n by its relative path:

package.json

"dependencies": {
 "core-js": "^2.4.1",
 "my-custom-i18n": "./../MyProject.Shared/myproject-i18n",
 "rxjs": "5.0.0-beta.12",
 ...
}

npm install installs packages correctly, but yarn has problem with it and simply cannot find this package:

yarn output

$ yarn
yarn install v0.15.1
info No lockfile found.
[1/4] Resolving packages...
error Couldn't find package "myproject-i18n" on the "npm" registry.
info Visit http://yarnpkg.com/en/docs/cli/install for documentation about this command.

I see that it looks it on the npm registry, where this package doesn't live.

Question

Is there any change to use yarn with local packages? By local packages I mean packages pointed by relative path as my-custom-i18n.

Answer 1

For yarn version < 2.x

Yarn requires prefix file: for local packages.

For relative path:

yarn add file:./../your-project

For absolute path

yarn add file:/dev/your-project

For your example, dependency in package.json would be declared as follows:

 "my-custom-i18n": "file:./../MyProject.Shared/myproject-i18n",

This works both for Yarn and NPM as well.

It is incompatibility with NPM client, Yarn team is aware and declared to support this behavior - reference on GitHub issue.

Update:

Since v0.21.0 release, file: prefix is not needed. See pull-request with fix and changelog.

Answer 2

If you want to simply link to the local package (so changes in the local package are picked up without reinstalling):

yarn add link:./../your-project

See more on yarn docs

Answer 3

For yarn version >= 2.x (Yarn Berry)

To reference local packages, Yarn supports different protocols:

• file: creates a copy of the specified directory. When specifying relative paths (starting with ./ or ../) or absolute paths (starting with /), the file: prefix can also be omitted.
• portal: creates a symbolic link to the specified directory and resolves its transitive dependencies.
• link: creates a symbolic link to the specified directory but does not resolve its transitive dependencies.

To add a dependency, run yarn add your-project@file:../your-project.

Attempting to run yarn add file:../your-project (without the your-project@ prefix) will result in the following error: Usage Error: The file:../your-project string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?.

Answer 4

I tried the file: solution with yarn and never got it to work. I chose a different route of including the package directly. I was able to add a watch to automatically rebuild and update the browser on file change.

My Situation

I had a git repository with two directories: example/ and react-highlight-within-testarea/ (I'll simplify to mylib/ below). The example/ was a react application with a dependency in the example/package.json of: "mylib": "file:../mylib/" (a) and an inclusion in example/src/App.js of import { MyLib } from 'mylib'.

My Solution

1. Remove mylib from the example/package.json.

   yarn remove mylib

2. Make the distribution part of my project.

   (cd example/src && ln -s ../../mylib/dist mylib)

3. Change the inclusion in example/src/App.js.

   import { MyLib } from './mylib'

4. Install watch in mylib.

   (cd mylib ; yarn add watch)

5. Add a watch command in scripts of mylib/package.json (b).

   "watch": "watch 'yarn build' src",

6. I now run this in a terminal (c).

   (cd mylib && yarn install && yarn watch &)
   (cd example && yarn install && yarn start)
   

Success

Now any time I make a change and save it in mylib/src/ or example/src/, it gets rebuilt and pushed to the React page in my browser.

---

Footnotes

(a) These before settings are one of many attempts to use package.json to make this work.

(b) There probably are more correct ways of doing this, but it worked for me.

(c) I probably could have made this into a yarn script too.