Linking npm package with equal devDependencies and peerDependencies breaks application in development using webpack

Question

I have the following situation:

Frontend's package.json

{
  "dependencies": {
     "lib" : "1.0.0",
     "foo" : "1.0.0"
  }
}

lib's package.json

{
  "devDependencies": {
     "foo" : "1.0.0"
  },
   peerDependencies": {
     "foo" : "1.0.0"
  }
}

While I am developing with webpack-dev-server some Frontend I am linking the module foo with a npm link leading into this dependency tree of the Frontend:

├── [email protected]  
└─┬ [email protected]                
  └── [email protected]

Rather than having something like this:

├── [email protected]  
└── [email protected]                

I have already found out that webpack finds the module foo in my lib in its node_modules folder, because I defined this package as devDependencies for my unit tests. Now I have the package twice in my bundled source which leads into some bugs.

Question: How can I force webpack or npm to use the module foo of my parent (the Frontend) in my lib like the peerDependencies suggests?

Answer 1

I assume you have frontend and lib checked out locally in two different folders and linked lib to frontend using something like cd frontend && npm link lib. So you goal is to work (change code in two editors) on both packages at the same time, but also want to be able to run your compiler and unit tests in frontend and lib separately.

The answer is: you can't (that easy). That's because dependencies are resolved always first to the folder of the package first. That means, if you have foo installed in lib, it will always pick lib:foo, not root:foo.

The simplest solution for that is to not install lib:foo at all, or just remove it. It's using then root:foo, as you want. If you use npm link however, it installs first all lib's dependencies.

So for a one time build in frontend, you can simply remove that lib:foo package and then build. However, from the point of view of the lib package nothing will work as its dependencies got screwed.

The more robust solution is to install lib in root in a away that only installs the actual dependencies of foo that are not in peer/devDependencies

To do so, you can use npm-local-development at https://github.com/marcj/npm-local-development

It basically does the same thing as npm link, but works around the devDependency limitation by setting up a file watcher and syncs file changes automatically in the background, excluding all devDependencies/peerDependencies.

1. You install npm-local-development: npm i -g npm-local-development
2. You create file called .links.json in your root package.

3. You write every package name with its local relative folder path into it like so

   { "@shared/core": "../../my-library-repo/packages/core" }

4. Open a console and run npm-local-development in that root package. Let it run in the background.

Disclaimer: I'm the author of this free open-source project.