There is a clash between the webpack-dev-server package and its subdependency, the http-proxy-middleware

Awhile back, I integrated webpack-dev-server v3.11.0 into my project, which - upon recent inspection - relies on http-proxy-middleware v0.19.1 as a dependency. Everything was running smoothly until I separately installed the http-proxy-middleware package at version 1.1.1. Now, when I attempt to build the TypeScript 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;
                               ~~~~~~

Evidently, webpack-dev-server is now using the standalone http-proxy-middleware v1.1.1 that I installed instead of its default sub-dependent v0.19.1, which differs in the exported elements.

$ npm ls http-proxy-middleware
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d1cacdd2e2938c928c92">[email protected]</a> E:\Projects\shop
+-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e088949490cd90928f98984b9ad8dbdde88b56ee82fe95">[email protected]</a>
`-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0c1e190b1a1810561f1e0d56081e090d1e093b48554a4a554b">[email protected]</a>
  `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7468686c316c6e736465317175787870796b7d6e795c2c322d25322d">[email protected]</a>

Is there a way to instruct webpack-dev-server to continue using its subdependency v0.19.1 while allowing me to utilize v1.1.1? Or is there a more effective method to incorporate the newer version without encountering such issues?

I came across shrinkwrap as a possible solution, but it feels excessive for just one conflicting package - though I could be mistaken.

[update]

To temporarily resolve the issue, I removed the standalone http-proxy-middleware v1.1.1 package and utilized the webpack- dev-server dependency package within my module. However, I believe this is not the ideal resolution, so I am seeking guidance on how to address the situation properly.

typescriptnpmdependencieswebpack-dev-server

Answer №1

When using npm audit, it alerts you to any dependencies that may have vulnerabilities. If you run npm audit fix, it can temporarily patch these issues. However, these fixes may be lost when installing new dependencies or running npm install again.

To ensure that a specific dependency is used across all npm packages, you can utilize a helpful npm package called npm-force-resolutions.

  1. Begin by installing npm-force-resolutions:
npm i npm-force-resolutions
  1. Add the following to your package.json file:
"scripts": {
"preinstall": "node ./node_modules/npm-force-resolutions/index.js"
}
  1. Specify the version of dependencies to be used in your other npm packages by adding the following example entry to your package.json:
"resolutions": {
"minimist": "1.2.5"
},
  1. Run npm install:
npm i

Your setup is complete!

Answer №2

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13647671637270783e7776653e60766165766153273d233d233e717667723d21">[email protected]</a>
prefers using 
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe7fbfbffa2fffde0f7f6a2e2e6ebebe3eaf8eefdeacfbea1bca1bf">[email protected]</a>
. Perhaps it's time to consider upgrading?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Split the massive array object into more manageable chunks

I have a large array that can range from 1 to 600K records. To work with this big array, I need to break it into smaller chunks to carry out operations. How can I achieve this effectively? Here is my proposed solution: The challenge I am facing is not kn ...

angulartypescript

Is it possible to overlook TypeScript errors when compiling with Angular 2 AoT?

My application is experiencing numerous TypeScript errors, even though it runs correctly. I recently migrated a JavaScript app to TypeScript and am struggling to resolve all the type-related issues. In order to proceed with development, I have configured m ...

angulartypescriptangular2-aot

Angular Http Promise is not returning the expected value

Struggling to update my component property with an HTTP result, but encountering issues. Thank you for your assistance! (currently using a static mock object) Class - Object export class Gallery { name: string; } Service import { Injectable } from ...

angularhttptypescriptundefined

Use npx to reverse the update from React version 18 to version 17

Is there a way to downgrade a project created using "npx create-react-app . --template typescript"? I've tried manually changing dependencies and then running "npm install" as suggested online, but I always encounter errors. How can I adjust the depen ...

javascriptnode.jsreactjsnpm

Utilizing Generics in TypeScript to Expand Abstract Classes

How can I define the property eventList in the class ImplTestClass to be an array with all possible values of AllowedEvents, while extending the class TextClass that accepts T? I'm stuck on this one. If anyone can provide guidance on how to achieve t ...

typescripttypescript-generics

Executing TypeDoc on a Windows system results in zero files being created and no error messages reported

I have been working on generating documentation for a JavaScript application using TypeDoc. Unfortunately, I am facing an issue where TypeDoc is not outputting any files or errors. To get started, I installed TypeDoc within the project folder: npm instal ...

node.jstypescriptnode-modulestypedoc

Error encountered following repo duplication

Recently, I upgraded to a new workstation and decided to clone my Angular4 Project repo onto it. After completing the cloning process, I executed: npm install This command is used to fetch all the required node_modules, leading to a multitude of missing ...

node.jsangularnpm

Zod combinator that accepts a dynamic field name

When converting XML to JSON, my library outputs {MyKey: T} for single-element lists and {MyKey: T[]} for multi-element lists. The equivalent TypeScript type is type XmlJsonArray<T, element extends string> = Record<element, T | T[]>. To implemen ...

typescriptzod

Resolve the "kexec" malfunction obstructing the successful execution of "npm install" for packages like WebPack in the "node_modules" directory following an upgrade to node versions 12, 13, or 14

After upgrading from "node" to "node 14", I attempted an "npm install" but encountered a failure due to the compilation error of "kexec" (also known as "node-kexec") which is a requirement for WebPack. The error messages received were: npm ERR! path /User ...

node.jsnpmwebpacknode-modules

The reason "ng e2e" is failing is likely due to a proxy issue, while "ng serve" and "ng test" are both functioning correctly

I have successfully downloaded the repository from https://github.com/blizzerand/pastebin-angular and can run "ng test" or "npm run test" with no issues. C:\_pocs\ws_vsc\pastebin-angular-master>npm run test > [email protected ...

npmjasmineprotractorkarma-runnerangular-cli

Understanding the appropriate roles and attributes in HTML for a modal backdrop element in a TypeScript React project

Trying to create a Modal component using React and TypeScript with a feature that allows closing by clicking outside. This is being achieved by adding a backdrop element, a greyed out HTML div with an onClick event calling the onClose method. Encountering ...

htmlreactjstypescriptmodal-dialogtypescript-eslint

What is the best way for me to bring in this function?

Currently, I am in the process of developing a point-of-sale (POS) system that needs to communicate with the kitchen. My challenge lies in importing the reducer into my express server. Despite multiple attempts, I have been unable to import it either as a ...

node.jsreactjstypescriptexpress

Troubleshooting the node-expat installation issue on an Ubuntu virtual machine

After exhausting all resources on Google, I still can't find a solution to my installation issues. Has anyone experienced trouble installing this package before? Any help would be greatly appreciated. ubuntu@ubuntu:~/Desktop/nodeEjabberd$ npm cache c ...

node.jsubuntunpmvmware

What is the best way to implement an EventHandler class using TypeScript?

I am in the process of migrating my project from JavaScript to TypeScript and encountering an issue with transitioning a class for managing events. To prevent duplicate option descriptions for adding/removing event listeners, we utilize a wrapper like thi ...

typescriptgenerics

When emitting an event multiple times in Angular, an error may occur where properties of undefined are unable to be read, particularly in relation to the "

I am encountering an issue with my event binding on a button, specifically (click)="onStart()". The problem arises when the event this.numEmitter is emitted for the first time in setInterval, after which I receive the error message ERROR TypeError: Cannot ...

angulartypescriptangular-decorator

The potential weakness that arises during the installation of react-scripts

After installing react-scripts, I discovered a total of 58 vulnerabilities, including 16 moderate, 40 high, and 2 critical threats. Here is a breakdown of my setup: Operating System: Linux Debian 10 Node.js version: v14.18.1 Npm version: 8.1.0 React versi ...

reactjsnpmnpm-scripts

What is the best way to define types for an array of objects with interconnected properties?

I need to define a type for an object called root, which holds a nested array of objects called values. Each object in the array has properties named one (of any type) and all (an array of the same type as one). Below is my attempt at creating this type d ...

typescriptgenerics

When the typeof x is determined to be "string", it does not result in narrowing down to just a string, but rather to T & string

Could someone help me understand why type narrowing does not occur in this specific case, and return typing does not work without using: as NameOrId<T>; Is there a more efficient way to rewrite the given example? Here is the example for reference: ...

typescript

Having difficulties creating a react web application with ESLint; encountering an issue where ESLint is unable to locate the "developit" configuration to extend from

When running npm run build, my React app encounters an issue. During normal operation with npm start, everything works fine. Oops! Something went wrong! :( ESLint: 6.8.0. ESLint couldn't find the config "developit" to extend from. Please verify the ...

node.jsreactjsnpmeslint

The 'fs' module does not seem to have an immediate impact; a server restart may be necessary for the changes to take

This NodeJS project involves starting the server with npm start. The project reads files from a folder called "./mydir/" using 'fs.readdirSync'. It then pushes these files into an array and prints them on the console. var fs = require('fs ...

javascriptnode.jsnpmwebpackfs