2

I'm trying to use a NPM package which i downloaded from GitHub, but having no luck.

I created a lib folder in my src directory of my create-react-app project.

Then i used wget to download the tarball

wget https://github.com/frontend-collective/react-image-lightbox/tarball/master/master.tar.gz

I then changed the name of the tarball

mv master.tar.gz react-image-lightbox-5.2.0.tar.gz

Then I installed the package using NPM

npm install ./src/lib/react-image-lightbox-5.2.0.tar.gz

In my package.json it shows;

"react-image-lightbox": "file:src/lib/react-image-lightbox-5.2.0.tar.gz",

So that all worked nicely.

But when i try and import the package using;

import Lightbox from 'react-image-lightbox';

i get the following error message when doing a npm run build

Cannot find module: 'react-image-lightbox'. Make sure this package is installed.

You can install this package by running: npm install react-image-lightbox.

Im missing something but I cant figure out what.

Any help would be greatly appreciated.

CodeSauce
  • 255
  • 3
  • 19
  • 39
  • Is there a reason for downloading the source instead of installing via `npm`? - https://www.npmjs.com/package/react-image-lightbox – dance2die Aug 06 '19 at 03:29
  • @SungM.Kim ... Yes, there is a bugfix which has been pulled into the master, but not into the NPM build – CodeSauce Aug 06 '19 at 03:31
  • That's a good reason for sure. I've seen people using [patch-package](https://www.npmjs.com/package/patch-package) to apply fixes in their NPM packages. But as I haven't used it, I won't be able to add it as an answer. – dance2die Aug 06 '19 at 03:35
  • It might just not be resolving the local file properly, from memory the last time I used a local package I didn't use the "file:" prefix but instead gave the full location from the root directory, like "react-image-lightbox": "/Users//projects//src/lib/react-image-lightbox-5.2.0.tar.gz" and after installing all deps I could confirm it's there by checking the node_modules folder – tim545 Aug 06 '19 at 04:38

1 Answers1

2

It is not necessary to get the code from GitHub you want manually by using wget and mv.

You can install the master version of the repository by using its Git clone URL:

npm install --save https://github.com/frontend-collective/react-image-lightbox.git

The resulting package.json file will look something like this:

{
  "name": "hello-world",
  "version": "0.0.1",
  "dependencies": {
    "react-image-lightbox": "git+https://github.com/frontend-collective/react-image-lightbox.git"
  }
}

You can then use the package like you would use the regular one:

import Lightbox from 'react-image-lightbox';
Patrick Hund
  • 19,163
  • 11
  • 66
  • 95
  • What if i want to use different branch other than master – Bahu Aug 24 '20 at 13:43
  • 1
    add the branch name to the URL separated by a pound sign, see: https://stackoverflow.com/questions/39732397/install-specific-branch-from-github-using-npm – Patrick Hund Aug 24 '20 at 15:53