[superagent] silently includes DOM typings in Node.js projects

[alecgibson]

This is a reopening of #41425 after being closed in the transition to GH Discussions.

I think this is still a valid issue, since importing DOM typings into a Node.js project is highly surprising (especially just by installing a dev testing library like @types/supertest!)

[typescript-bot]

Thanks for the discussion about "superagent", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @NicoZelaya, @mxl, @paplorinc, @shreyjain1994, @zopf, @BeeeQueue, @lukaselmer, @theQuazz, @carnesen, @ghostganz, @LuckyWindsck.

[hcaw]

I agree that this is a problem, I've been stuck on a problem for a good few hours before I found out superagent was declaring global DOM types! Are there any proposed solutions?

[thw0rted]

I've been experimenting with rewriting isomorphic library typings to remove triple-slash references and instead explicitly import individual types from the relevant modules using import type { ... } from "module" syntax, with a @ts-ignore comment on the preceding line. This has the effect of importing the type correctly when "module" is installed, and creating a type with the same name that's just an alias for any if it isn't. You can then do conditional type operations on it to expose different types depending on what's actually installed. If the TS DOM lib were available as a module -- something like @types/dom -- you could import type {Element} from "dom", and use an ignore-comment to fall back on any.

[ab-pm]

@types/dom to import, not to reference, would really be a nice solution. I wonder if this is something that DefinitelyTyped should deal with, or whether it could be made a feature of TypeScript itself?

Oh wait, I just saw you already did open microsoft/TypeScript-DOM-lib-generator#1207 - have a 👍 there!

[ab-pm]

I just found that graphql-request had the same issue (jasonkuhrt/graphql-request#15, jasonkuhrt/graphql-request#26):

I tried to look for proper isomorphic Fetch API type definitions, but couldn't find any. @types/isomorphic-fetch has been changed to also require the global fetch definitions from the dom lib, which is surprising to me and seems incorrect. If we want to fix this, I think we'll have to extract the Fetch API type definitions from lib.dom.d.ts and publish those as @types/isomorphic-fetch.

They solved it by copying the required DOM lib types into their package :-/ Regarding this discussion, the same solution will need to be applied to isomorphic-fetch, should we add that to the issue title?

[alecgibson]

I've raised a PR to try and promote discussion on the repo itself: #57641

[stu43005]

Hello, @alecgibson

After #57641 merge, my pipeline is broken.
Can you help me check the problem?

tsc output:

Found 1 error(s).
node_modules/@types/superagent/index.d.ts:34:29 - error TS2304: Cannot find name 'Blob'.
34 type MultipartValueSingle = Blob | Buffer | fs.ReadStream | string | boolean | number;
                               ~~~~

[thw0rted]

Can we see your project, or maybe a minimal repro of the issue? After the PR, the types for Superagent should still include /// <reference types="node" /> which will include @types/node, which (eventually) should get down to @types/node/stream/consumers.d.ts, which defines a Blob interface.

(I did just notice that it's preceded by the comment "This interface is not, and should not be, exported.", but I don't think that's how ambient modules work.)

[alecgibson]

Also make sure @types/node is up-to-date for your Node version. Blob was only added in v15.7.0, v14.18.0

[stu43005]

Also make sure @types/node is up-to-date for your Node version. Blob was only added in v15.7.0, v14.18.0

So that is problem here.
My @types/node version is v13.11.1, I updated to v16.11.17 and it was fixed!!
thanks

[thw0rted]

Anybody watching this discussion will probably be interested in #59905, I'm struggling a bit but trying to rectify this. It's getting hairy because I think the Node "DOM-like" APIs are not 100% compatible with the actual DOM. I'm not quite sure how to have e.g. a global Event that exists in both Node and DOM without breaking the project when both libs (@types/node and lib.dom.d.ts) are included at once.