NPM Linking And Unlinking - DEV Community ‍ ‍

Forem Logo DEV Community Logo DEV Community Main Image

DEV Community

Follow

A space to discuss and keep up software development and manage your software career

Future Logo Future Main Image

Future

Follow

News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.

Open Forem Logo Open Forem Main Image

Open Forem

Follow

A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here

Gamers Forem Logo Gamers Forem Main Image

Gamers Forem

Follow

An inclusive community for gaming enthusiasts

Music Forem Logo Music Forem Main Image

Music Forem

Follow

From composing and gigging to gear, hot music takes, and everything in between.

Vibe Coding Forem Logo Vibe Coding Forem Main Image

Vibe Coding Forem

Follow

Discussing AI software development, and showing off what we're building.

Popcorn Movies and TV Logo Popcorn Movies and TV Main Image

Popcorn Movies and TV

Follow

Movie and TV enthusiasm, criticism and everything in-between.

DUMB DEV Community Logo DUMB DEV Community Main Image

DUMB DEV Community

Follow

Memes and software development shitposting

Design Community Logo Design Community Main Image

Design Community

Follow

Web design, graphic design and everything in-between

Security Forem Logo Security Forem Main Image

Security Forem

Follow

Your central hub for all things security. From ethical hacking and CTFs to GRC and career development, for beginners and pros alike

Golf Forem Logo Golf Forem Main Image

Golf Forem

Follow

A community of golfers and golfing enthusiasts

Crypto Forem Logo Crypto Forem Main Image

Crypto Forem

Follow

A collaborative community for all things Crypto—from Bitcoin to protocol development and DeFi to NFTs and market analysis.

Forem Core Logo Forem Core Main Image

Forem Core

Follow

Discussing the core forem open source software project — features, bugs, performance, self-hosting.

Parenting Logo Parenting Main Image

Parenting

Follow

A place for parents to the share the joys, challenges, and wisdom that come from raising kids. We're here for them and for each other.

Maker Forem Logo Maker Forem Main Image

Maker Forem

Follow

A community for makers, hobbyists, and professionals to discuss Arduino, Raspberry Pi, 3D printing, and much more.

HMPL.js Forem Logo HMPL.js Forem Main Image

HMPL.js Forem

Follow

For developers using HMPL.js to build fast, lightweight web apps. A space to share projects, ask questions, and discuss server-driven templating

Dropdown menu Dropdown menu Add reaction Like Unicorn Exploding Head Raised Hands Fire Jump to Comments Save Boost More... Copy link Copy link Copied to Clipboard Share to X Share to LinkedIn Share to Facebook Share to Mastodon Share Post via... Report Abuse

At work, we have our own npm packages that we manage and maintain. As part of the dev process its crucial to test out the package in the context of a larger project to ensure it functions as expected and meets all our criteria. A handy trick that I've been using is linking local npm packages using npm link.

However, as a result of having multiple tasks on the go on any given day, I kept getting myself into weird situations with permission issues where I would have the package not available anymore, which TBH was v annoying. The result of constant branch switching and not cleaning up my local environment before doing so.

Here are the exact steps for both linking and unlinking so you can avoid the #struggle I went through.

Lets say we have an npm package that we are working on locally, lets call it cowabunga. Our project structure looks something like this:

cowabunga package folder structure

And it’s package.json file looks something like this:

You’ll notice that this package has its own node_modules folder - this is where I kept getting tripped up. I would switch branches in the repo where my package lives and the node_modules folder would disappear as a result of building other components that don't live in both branches. When I would go to unlink, npm was throwing permissions errors that went something like this:

npm ERR! enoent ENOENT: no such file or directory, access ‘my_project/node_modules/cowabunga/node_modules/some-package’ Enter fullscreen mode Exit fullscreen mode

In order to avoid this, you have to follow the linking/unlinking order otherwise npm will try to unlink folders that no longer exist. Seems pretty basic but it was surprisingly tedious to figure out.

Linking:

First, in the cowabunga folder (where package.json is):

npm link Enter fullscreen mode Exit fullscreen mode

Then in the project you want to include cowabunga in:

npm link cowabunga Enter fullscreen mode Exit fullscreen mode

Unlinking:

Before switching branches and/or removing any node modules from the package itself (in my project, this includes running learn clean which removed the node_modules folders)

First, in the project:

npm unlink --no-save cowabunga Enter fullscreen mode Exit fullscreen mode

Second, in the package:

npm unlink Enter fullscreen mode Exit fullscreen mode

Note: order is important!

Where I kept running into issues is switching branches and then the symlink couldn’t find the package anymore so you were stuck in this weird state where you couldn’t link anything or unlink anything because the folders don’t exist. When this happens, check out your original branch and start from the beginning with linking the package and the project.

🤙

Bonus: You can also run

npm install -g i . Enter fullscreen mode Exit fullscreen mode

in your package folder to install it globally and avoid some of the linking mess 🎉

pic Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Submit Preview Dismiss Collapse Expand peterwiebe profile image Peter Wiebe Peter Wiebe Peter Wiebe Follow Full Stack Engineer @ EquitySim - I work with all things JS.
  • Location Vancouver
  • Work Full Stack Engineer at EquitySim
  • Joined Oct 2, 2019
Jun 4 '20 Dropdown menu
  • Copy link
  • Hide

Came across a similar linking issue and I wasn't able to fix it via unlinking, I had to resort to deleting the package-lock.json :(

Also, in case you weren't aware another way to npm link is to be in the directory of the project and then npm link ../../package-directory. I like it for saving me a step

Collapse Expand stephencweiss profile image Stephen Charles Weiss Stephen Charles Weiss Stephen Charles Weiss Follow Engineer | Lover of dogs, books, and learning | Dos XX can be most interesting man in the world, I'm happy being the luckiest. | I write about what I learn @ code-comments.com
  • Location Chicago, IL
  • Work Software Engineer at Olo
  • Joined Aug 28, 2018
Mar 15 '19 Dropdown menu
  • Copy link
  • Hide

Thanks Erin! This is exactly the situation I found myself in. Appreciate the write up!

Collapse Expand stephencweiss profile image Stephen Charles Weiss Stephen Charles Weiss Stephen Charles Weiss Follow Engineer | Lover of dogs, books, and learning | Dos XX can be most interesting man in the world, I'm happy being the luckiest. | I write about what I learn @ code-comments.com
  • Location Chicago, IL
  • Work Software Engineer at Olo
  • Joined Aug 28, 2018
Mar 15 '19 Dropdown menu
  • Copy link
  • Hide

Out of curiosity though -- why is the --no-save flag important?

Looks like unlink is an alias for uninstall, so the --no-save means uninstall, but don't remove from node_modules?

Collapse Expand erinbush profile image Erin Bush Erin Bush Erin Bush Follow Frontend Engineer who likes fixing all the weird bugs
  • Email [email protected]
  • Location Vancouver
  • Education Computer Engineering BASc, University of British Columbia
  • Work Frontend Developer at Thinkific
  • Joined Jan 6, 2019
Mar 25 '19 Dropdown menu
  • Copy link
  • Hide

Yep! If you don't include --no-save you'll end up removing that package from your package.json file. Of course, if you don't want to include the unlinked package in your package.json file, you can exclude the --no-save

Collapse Expand stephencweiss profile image Stephen Charles Weiss Stephen Charles Weiss Stephen Charles Weiss Follow Engineer | Lover of dogs, books, and learning | Dos XX can be most interesting man in the world, I'm happy being the luckiest. | I write about what I learn @ code-comments.com
  • Location Chicago, IL
  • Work Software Engineer at Olo
  • Joined Aug 28, 2018
Mar 15 '19 Dropdown menu
  • Copy link
  • Hide

Also... let's say you do goof and get the ENOENT: no such file or directory, access '/... error... then what?

erinbush profile image Erin Bush Erin Bush Erin Bush Follow Frontend Engineer who likes fixing all the weird bugs
  • Email [email protected]
  • Location Vancouver
  • Education Computer Engineering BASc, University of British Columbia
  • Work Frontend Developer at Thinkific
  • Joined Jan 6, 2019
Mar 25 '19 Dropdown menu
  • Copy link
  • Hide

What I've had to do is go back to whatever state has the files/folders that npm is looking for. So let's say you have a package that is on one branch and not on another, you'd have to go back to your other branch and run npm link again for that package before running npm unlink my-package-name in your main project

menocomp profile image Mina Luke Mina Luke Mina Luke Follow I am a software engineer and I like my job
  • Location Adelaide
  • Work Full stack Javascript developer at Sine
  • Joined Feb 10, 2019
May 26 '19 Dropdown menu
  • Copy link
  • Hide

You may also go to the folder where the symbolic link library is installed and deleted the folder.

Collapse Expand stephencweiss profile image Stephen Charles Weiss Stephen Charles Weiss Stephen Charles Weiss Follow Engineer | Lover of dogs, books, and learning | Dos XX can be most interesting man in the world, I'm happy being the luckiest. | I write about what I learn @ code-comments.com
  • Location Chicago, IL
  • Work Software Engineer at Olo
  • Joined Aug 28, 2018
Mar 20 '19 Dropdown menu
  • Copy link
  • Hide

Found this helpful - medium.com/dailyjs/how-to-use-npm-...

Collapse Expand johngellert profile image John Gellert John Gellert John Gellert Follow
  • Joined Apr 8, 2021
Apr 8 '21 Dropdown menu
  • Copy link
  • Hide

Hi Erin! Thanks for explaining this topic more.

What is npm install -g i . doing? I understand that it is installing the package globally with the -g and the . is taking all the files from the current directory. Specifically, what is i? Is this an alias? And why do you add it here?

Collapse Expand johngellert profile image John Gellert John Gellert John Gellert Follow
  • Joined Apr 8, 2021
Apr 8 '21 Dropdown menu
  • Copy link
  • Hide

Is the i referring to the NPM at this link npmjs.com/package/i

Is there a reason to install i along with the folder where package.json is located?

Collapse Expand jashgopani profile image Jash Gopani Jash Gopani Jash Gopani Follow Self taught developer
  • Location Raleigh, North Carolina, USA
  • Education North Carolina State University
  • Pronouns He/Him
  • Work Student Research Assistant @ NC State University
  • Joined May 25, 2020
May 6 '21 Dropdown menu
  • Copy link
  • Hide

Whenever I run npm unlink in my package folder, it removes a lot of global node modules...I am not able to understand what exactly is happening

Collapse Expand jimlynchcodes profile image Jim Lynch Jim Lynch Jim Lynch Follow A special person. 🤗
  • Location New Yoek, NY
  • Work Software Engine Here at Evaluates2
  • Joined Apr 7, 2020
Apr 8 '20 Dropdown menu
  • Copy link
  • Hide

Awesome post! I also dislike the fact that the --no-save option is needed. I ran npm unlink without it and now I can't use the original package anymore... 😢

Collapse Expand bigclown profile image Alejandro Ariel Serra Alejandro Ariel Serra Alejandro Ariel Serra Follow
  • Joined Sep 9, 2020
Sep 9 '20 Dropdown menu
  • Copy link
  • Hide

Hey Erin, i found this really helpfull. But i broke the pipeline by sending the push with the linked custom package. So i hope no one did that

Collapse Expand xargr profile image greg 💻 greg 💻 greg 💻 Follow Curious | more console logger | bad humor
  • Location Zurich
  • Work Front-end developer
  • Joined Nov 27, 2018
Oct 8 '19 Dropdown menu
  • Copy link
  • Hide

if I delete link package how to delete symbolic link?

View full discussion (15 comments) Code of Conduct Report abuse

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

Hide child comments as well

Confirm

For further actions, you may consider blocking this person and/or reporting abuse

Erin Bush Follow Frontend Engineer who likes fixing all the weird bugs
  • Location Vancouver
  • Education Computer Engineering BASc, University of British Columbia
  • Work Frontend Developer at Thinkific
  • Joined Jan 6, 2019
TIL about automatically bumping NPM versions #npm #productivity #todayilearned
DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

Tag » How To Remove Npm Link