Using a local NPM package

Question

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.

Is there a reason for downloading the source instead of installing via npm? - npmjs.com/package/react-image-lightbox — dance2die
– dance2die, Commented Aug 6, 2019 at 3:29
@SungM.Kim ... Yes, there is a bugfix which has been pulled into the master, but not into the NPM build — BigJobbies
– BigJobbies, Commented Aug 6, 2019 at 3:31
That's a good reason for sure. I've seen people using 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
– dance2die, Commented Aug 6, 2019 at 3: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/<user>/projects/<project>/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
– tim545, Commented Aug 6, 2019 at 4:38

Patrick Hund · Accepted Answer · 2019-08-06 06:25:32Z

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';

answered Aug 6, 2019 at 6:25

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bahu Over a year ago

What if i want to use different branch other than master

Patrick Hund Over a year ago

add the branch name to the URL separated by a pound sign, see: stackoverflow.com/questions/39732397/…

Collectives™ on Stack Overflow

Using a local NPM package

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related