Conflict between webpack-dev-server package and http-proxy-middleware, which is also it's subdependency

user_4983840 0
Viewed 378

Some time ago i installed webpack-dev-server v3.11.0 in my project, which - as i recently checked - has http-proxy-middleware v0.19.1 as dependency. It has worked ok until i separately installed http-proxy-middleware package, but in v1.1.1. Now, when i build the TS project, it throws the following errors:

node_modules/@types/webpack-dev-server/index.d.ts:30:53 - error TS2694: Namespace '"E:/Pro
jects/shop/node_modules/http-proxy-middleware/dist/index"' has no exported me
mber 'Config'.

30         [url: string]: string | httpProxyMiddleware.Config;
                                                       ~~~~~~

node_modules/@types/webpack-dev-server/index.d.ts:36:29 - error TS2694: Namespace '"E:/Pro
jects/shop/node_modules/http-proxy-middleware/dist/index"' has no exported me
mber 'Config'.

36     } & httpProxyMiddleware.Config;
                               ~~~~~~

Apparently, webpack-dev-server now uses the standalone http-proxy-middleware v1.1.1, which i installed, instead of it's default subdependent v0.19.1, which differs (at least) in exported things.

$ npm ls http-proxy-middleware
shop@1.0.0 E:\Projects\shop
+-- http-proxy-middleware@1.1.2
`-- webpack-dev-server@3.11.0
  `-- http-proxy-middleware@0.19.1

Is there a way, to force webpack-dev-server to still use it's subdependency v0.19.1 while i will be able to use v1.1.1? Or is there a better way that i could use the newer version without such issues?

I read about shrinkwrap, but it seems to be an overkill for that case with just one conflicting package - but maybe i am wrong.

[update]

As a workaround i removed standalone http-proxy-middleware v1.1.1 package and used webpack-dev-server dependency package in my module. However i don't think this is the solution for problem, so i'd like to know how to do it properly.

webpack-dev-server npm typescript dependencies
2 Answers

When you do npm audit it notifies you of dependencies. You can do npm audit fix and it will temporarily fix them but as soon as you install another dependency or do npm install those fixes can get lost.

To ensure usage of a specific dependency for all npm packages you can use an npm package called - npm-force-resolutions

  1. install npm-force-resolutions
npm i npm-force-resolutions
  1. Add to package.json:
  "scripts": {
    "preinstall": "node ./node_modules/npm-force-resolutions/index.js"
  }
  1. declare which version of the dependencies will be used in your other npm packages: example add to package.json
  "resolutions": {
    "minimist": "1.2.5"
  },
  1. npm install
npm i

done!

user_48314270

webpack-dev-server@4.0.0-beta.2 uses http-proxy-middleware@1.3.0, maybe upgrade to it already?

user_157291960
Related