CODEWITHSUNDEEP
webpacknode-moduleswebpack-dev-serverhttp-proxy-middleware
Raph117
Raph117

Reputation: 3841

@Types is not using the correct module (Typescript, http-proxy-middleware, webpack, react)

I'm trying to use a similar setup to this repo to try and create a fullstack typescript app using React and Express.

The repo uses tsc-watch like nodemon to keep an eye on the server files, and then webpack-dev-server to host the react static files at port 8085. Meanwhile the server, running on 3000, renders the react app by proxying all static requests to /statics at 8085.

When I clone the repo everything works. However, in my own repo (where I'm trying to learn how to do a similar configuration, the server keeps throwing up this error:

node_modules/@types/webpack-dev-server/index.d.ts

then:

node_modules/http-proxy-middleware/dist/index"' has no exported member 'Config'.

When I go into node_modules, I can see that @types/webpack-dev-server is expecting there to be Config from http-proxy-middleware. In @types/http-proxy-middleware, there is an interface called Config. However, in the normal http-proxy-middleware node module folder, there is not, and this is what is causing the error.

My question is how do I get @types/webpack-dev-server to use @types/http-proxy-middleware, rather than just node_modules/http-proxy-middleware? Or am I missing something else entirely?

I can post code if needed.

Upvotes: 0

Views: 1281

Answers (1)

gilamran
gilamran

Reputation: 7304

Here are few facts that might help:

  • The statics-router.ts is using http-proxy-middleware, version "^1.0.3"
  • webpack-dev-server is dependent on version "0.19.1"
  • The Config on http-proxy-middleware was removed in version 1.
  • The type definitions for version 1 are part of http-proxy-middleware itself (And not under @types like before)
  • If you look into /node_modules/@types/webpack-dev-server/package.json, you will see that on the dependencies it has: "@types/http-proxy-middleware": "*". Notice that it's dependend on the @types version of the .d.ts

It looks like typescript is searching for the type definitions under node_modules/LIBRARY first, and then under @types so it "finds" the .d.ts for version 1, instead of version 0.19.1 like webpack-dev-server requires

To solve this just add: "skipLibCheck": true, to the shared tsconfig.json

Upvotes: 2

Related Questions