How to have npm install a typescript dependency from a GitHub url?

Question

Consider the following scenario:

• There is a code library. The library is written in TypeScript and the typescript code is published in GitHub. The package.json file has a build script which creates JavaScript files based on the TypeScript code and a publish script which then places the resulting JS files on npm.
• I make a fork of the GitHub repo, make some modifications to the typescript files and push those changes to GitHub. (I also open a PR to the original GitHub repo but there is a time lage before these changes can be merged.)
• I wish to consume these code changes in a downstream NPM package so in the downstream packages I change the reference (in the downstream's package.json file) to the modified package to the GitHub URL of my fork and do an npm install.

This doesn't work because:

• The package.json file of the modified package does not list the typescript files in the dist field, only the automatically generated JS files so the TypeScript files are not pulled during the npm install.
• The compiled JS files aren't present since they aren't checked in to GitHub.

How can I solve this? Is there a way that I can modify the behavoir of npm install so that it fetches files in the repo that aren't in dist and then runs the build script during the install?

Answer 1

I had the same problem. Saw a lot of articles about monorepos (links below), but not much about how to split a TypeScript project into separate repositories.

In short, you need to build JS files at one step or the other.

See https://github.com/stared/yarn-adding-pure-typescript-package-example for a working code example.

So, there are a few solutions. Let's say that the repository is someuser/package-to-import

Postinstall

Using yarn you can get the project directly from a GitHub repository:

yarn add someuser/package-to-import#master

(or the same with npm install someuser/package-to-import#master)

If you work on a fork of this repository, you can make your life easier by adding to package.json in package-to-import repo this part:

  "scripts": {
    ...,
    "postinstall": "tsc --outDir ./build"
  }

Now it just works with yarn add/upgrade with no extra scripts. Alternatively, you can do it semi-manually, i.e. create a script in your main repository package.json

  "scripts": {
    ...,
    "upgrade-package-to-import": "yarn upgrade package-to-import && cd node_modules/package-to-import && yarn build"
  }

Link

There is a different approach to clone the repository into a different folder, build the files, and link it.

git clone [email protected]:someuser/package-to-import.git
cd package-to-import
npm run build  # or any other instruction to build
npm link

If you use yarn, the two last lines would be:

yarn build
yarn link

Then, enter the folder of your project and write

npm link package-to-import

or in case of yarn

yarn link package-to-import

These are symlinks, so when you pull from the repo and build files, you will use the updated version.

See also:

• npm link andyarn link official documentations
• The magic behind npm link

Monorepos

An entirely different approach. With mixed advice for using git submodules:

• 4 Ways to Go Monorepo in 2019
• 4 Git Submodules Alternatives You Should Know
• A (multi-) monorepo setup with Git Submodules

Answer 2

The docs for the prepack script suggest that it is run after a dependency is installed from a git repo. Try putting something like this in the package.json of the git dependency:

{
  "scripts": {
    "prepack": "call the build script"
  }
}

This should build the package after you npm install it, which sounds like what you want to do. I'm not sure if there are any other problems you are having beyond that.

Answer 3

Build the files in your fork and commit those to your fork's repo/branch.

I was running into the exact same issue that you were. Amazing that I was able to Google my way onto your StackOverflow question, really, because it's a difficult issue to describe.

In short, I had to fork the react-native-webview library in order to update the kotlinVersion in order to support Gradle Plugin 6.0.0.

I forked it just fine and bumped that version just fine, as you can see here.

I then added this specific fork and branch to my package.json file:

"react-native-webview": "github:cntral/react-native-webview#5_8_2"

I would do npm install after this and would get error Command "tsc" not found.

After much digging, there's a "prepack": "yarn build" script in this library's package.json that will try to run whenever it is included as a git dependency like this. But we're not using TypeScript so it tries to run yarn build which runs yarn tsc and tsc can't be found.

Okay, so I tried to add typescript as a devDependency to my package.json to see if that would fix it. It didn't. I tried using yarn install instead of npm install to see if that would fix it. It would install it just fine but if you looked at the node_modules/react-native-webview directory, the converted JavaScript files that were supposed to be in lib/ weren't there. So that didn't work.

Then I thought, if all this is doing is trying to transpile the TypeScript files into normal JavaScript so it can be consumed by our app, why not do that in our fork and commit those .js files. So I did.

I ran yarn build in my fork of react-native-webview, removed the lib/ directory from .gitignore and then committed those changes, as you can see here.

Then I also had to remove the "prepack": "yarn build" from the package.json of the fork so it wouldn't try to build the library and run tsc again, which was done here.

After that our app was able to consume it just fine, like any other library we consume off of npm or GitHub.

Hope that helps others.