Search code examples
reactjstypescriptgityarnpkgpackage.json

Wrong git branch loaded in node_modules by yarn install command

I have two Typescript projects.

Context: ProjectA depends upon a certain ProjectB branch project

ProjectB git branches:

  1. main
  2. new_branch

ProjectA package.json

"dependencies": {
    "@projectB": "git+https://github.com/projectB.git#new_branch",
}

What I want to achieve? When I execute yarn install to make sure that the dependencies from the new_branch are loaded in node_modules folder of projectA.

What actually happens? When I execute yarn install, the dependencies from main branch are loaded.

What I tried?

  1. I deleted node_modules & build folders and tried to run yarn install again which did not work.
  2. I deleted yarn.lock but the project split another errors that are not related to my changes from the new_branch at all.
  3. I deleted the @projectB: git+https://github.com/projectB.git#new_branch dependency from the package.json file and I added it via yarn add projectB@git+https://github.com/projectB.git#new_branch which did not work.
Solution

  • I'm not sure the ability to have an npm dependency to a git branch. Maybe its possible but normally you would publish that git repo to an npm repository. Or you can reference the 'main' file like this:

    Solution 1 - Import from locally installed npm project

    repo1/package.json

      "files": [
    "dist" // the generated production output from this repo
  ],
  "main": "dist/index.umd.js",

    You would also have to install npm packages in both repos for this to work.

    repo2/package.json

      "dependencies": {
    "@otherrepo": "file:../repo1"
   }

    repo2/index.js

    import otherrepo from '@otherrepo'

// do stuff with other repo

    Note for this solution you would need to configure the the alias @otherrepo in webpack or equivalent.

    Not sure if this is what you are after but this is an example I created using 2 repos (webpack and microbundle) The webpack example loads the output from the microbundle as a dependency

    https://github.com/inspiraller/webpack-and-microbundle

    Solution 2 - publish your git repo to npm

    Once you are happy with your development cycle you can publish repo 1 to the npm repository and then you can just install it like any other npm package.

    Solution 3 - Use git submodules:

    Answered here: How can I have linked dependencies in a git repo?

    I'm sure the technology here has advanced, but when I played with it I discovered too many pitfalls of caching and reinstalling.

    Solution 4 - load shared components via an external managed cdn

    This is for React but there are probably alternatives to other frameworks