DEV Community

Cover image for How to test your NPM package locally

How to test your NPM package locally

Chris Bongers on July 29, 2021

We made our very first NPM package, and briefly touched on how to test it locally. However, I felt this needs some more explanation. As I hit this...
Read full post
Collapse
 
iamandrewluca profile image
Andrei L • • Edited

Some things to take into consideration. Let's supose that your npm-calculator also depends on react and your npm-calculator-test also depends on react
you will have react installed in 2 places

npm-calculator/node_modules/react
npm-calculator-test/node_modules/react
Enter fullscreen mode Exit fullscreen mode

Now when you use npm-calculator it will load react from here

npm-calculator/node_modules/react
Enter fullscreen mode Exit fullscreen mode

Instead from here

npm-calculator-test/node_modules/react
Enter fullscreen mode Exit fullscreen mode

because of how modules are resolved. And you may encounter strange errors.

To fix this you will need to tell your bundler to resolve all dependencies from npm-calculator-test/node_modules/** instead of npm-calculator/node_modules/**

webpack.js.org/configuration/resol...

webpack.config.js

module.exports = {
  resolve: {
    alias: {
      react: resolve(__dirname, 'node_modules', 'react'),
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

And now every import of react should be loaded from here npm-calculator-test/node_modules/react

Collapse
 
thesecuritydev profile image
David •

Just use PNPM

Collapse
 
jackmellis profile image
Jack •

This isn't quite true. Npm is smart enough to resolve common versions of packages so if they both depended on the same major version of react, it would be fine.

This is probably a bad example, though, as 99.9% of the time react would be a peer dependency instead (which completely alleviates this problem and gives the version responsibility to the consumer)

Collapse
 
iamandrewluca profile image
Andrei L • • Edited

I have to mention again, that this is a specific use case when you use npm link

Unfortunately that's true. NPM is just a package manager, install/uninstall dependencies. Node is the one who resolves dependencies.

nodejs.org/api/modules.html#module...

Smart enough should be the bundler to know what exactly to load.

github.com/iamandrewluca/example-n...

cd npm-calculator
npm install
cd ../npm-calculator-test
npm install
node index.js
Enter fullscreen mode Exit fullscreen mode 
17.0.2
16.14.0
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jackmellis profile image
Jack •

I mentioned it in another comment but in my experience, npmjs.com/package/yalc solves all of these kind of issues. It's so useful

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thanks Andrew! This is a useful addition actually!
I would have thought NPM would resolve only one of the dependencies based on it's version checks it does.

Collapse
 
iamandrewluca profile image
Andrei L • • Edited

Created a small demo here github.com/iamandrewluca/example-n...

cd npm-calculator
npm install
cd ../npm-calculator-test
npm install
node index.js
Enter fullscreen mode Exit fullscreen mode

Outputs

17.0.2
16.14.0
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yoursunny profile image
Junxiao Shi •

npm link cannot catch errors in package creation, such as missing a necessary file in package.json "files" property.
I test my packages with npm pack as tarball, or by publishing to a private Verdaccio registry.

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Oh thanks for that one, wasn't aware of that option.
But definitely look into testing it like that as well ✨

Collapse
 
waylonwalker profile image
Waylon Walker •

Packaging can be so freaking complicated. I have never built a node package, but this looks quite simple.

Collapse
 
dailydevtips1 profile image
Chris Bongers •

It was my first public package so far the experience was quite good! :D

Collapse
 
jackmellis profile image
Jack •

I use yalc for testing npm packages in development. Working in a team where we actively worked on 100+ packages this was a game changer!

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Oh nice thanks for that tip Jack, haven't heard of yalc, but will look into that as well.

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Awesome Chris,

Looking forward to seeing your package soon.