How can I associate the "npm link" a typescript dependency with peer dependencies?

I have a React / Redux typescript project A. My team decided to separate part of the React components and Redux code in the NPM module, so I created another project B of the React / Redux project.

Initially, when I tried to install B from A, I had errors due to type reevaluations, since both A and B depend on the same type of creatives (reaction, reduction, etc.). So I moved all the B @types dependencies as peer dependencies. This allows me to correctly set B from A.

However, for development purposes, I would like an npm link from B from A, so I do not have to constantly recompile and reinstall B. But since npm link creates a symbolic link, it points to the whole project of B, including type definitions that I need to avoid.

Does anyone know how to solve this riddle?

+12
npm reactjs typescript
source share
1 answer

This issue is not particularly related to typewriting, but it is a common problem on how to bundle two javascript packages together and prevent libraries from loading several times. The decisive factor depends on which assembly / linker you are using. I think this response to stackflow is pretty good if you only care about the deduplication reaction.

Here is an example of a solution to this problem using a web package.

First of all, make sure that any common dependencies in your child package are devDependencies and peerDependencies, and your parent package sets them as necessary dependencies and devDependencies.

A - package.json

 { "dependencies": { "B": "1.0.0", "react": "xxx", }, "devDependencies": { "@types/react": "xxx" } } 

B - package.json

 { "version": "1.0.0", "peerDependencies": { "@types/react": "xxx", "react": "xxx" }, "devDependencies": { "@types/react": "xxx", "react": "xxx" } } 

If you are working with a web package from package A, you must definitely enable node_modules, if applicable only from package A node_modules.

 const path = require('path') module.exports = { // rest of your webpack condig... resolve: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] } } 

Here is another solution using response-app-rewired that does the same

 const path = require('path') module.exports = function override(config) { config.resolve = Object.assign({}, config.resolve, { modules: [path.resolve(__dirname, 'node_modules'), ...config.resolve.modules] }) return config } 
0
source share

All Articles