Rxjs: TypeScript complains about DOM types when compiling for Node

[pleerock]

rxjs version: ^5.0.0-beta.12
typescript version: 2.0.2

I have such errors:

node_modules/rxjs/observable/FromEventObservable.d.ts(11,39): error TS2304: Cannot find name 'EventTarget'.
node_modules/rxjs/observable/FromEventObservable.d.ts(11,104): error TS2304: Cannot find name 'NodeList'.
node_modules/rxjs/observable/FromEventObservable.d.ts(11,115): error TS2304: Cannot find name 'HTMLCollection'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(16,23): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(75,59): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(80,13): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(95,20): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(96,10): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(106,32): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(106,44): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(117,10): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(122,39): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(130,22): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(10,29): error TS2304: Cannot find name 'MessageEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(11,33): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(12,34): error TS2304: Cannot find name 'CloseEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(15,63): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(26,13): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(27,32): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(28,33): error TS2304: Cannot find name 'CloseEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(31,63): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(34,23): error TS2304: Cannot find name 'MessageEvent'.

Why do I have this error? Because I haven't added "dom" to the "lib" section of the "compilerOptions". Why I haven't added it? Because I don't need dom, Im using rxjs in the backend, I don't need browser stuff.

[benlesh]

This issue should note this is a TypeScript compilation error, and not an actual bug with the JavaScript.

[DanielJoyce]

Actually no. DOM doesn't exist in Node, so the referenced types don't exist either. But the supplied RxJS artifacts refer to dom types that don't exist on Node.

RxJS should provide two libs, one with dom dependencies and one without. My own solution has to been rip references to Ajax/Event/Element out of the supplied Rx.d.ts and Rx.js and check these into version control.

But its a pain.

[david-driscoll]

This is because until TypeScript 2.0 the dom definitions were included regardless of the actual runtime environment. Now that the standard library can slimmed down, this is why we're seeing this issue today.

It may be make sense to reinvestigate an rx-dom or similar library when we move over to TS2.0, but we have not yet moved over to TS 2.0, so the easiest way to interop is either...

• include the dom types
• create a local set of interfaces that match the interfaces being requested.

[benlesh]

@david-driscoll is there a resolution for this issue?

[benlesh]

NOTE: This does add fuel to the fire for moving the DOM stuff to a different package.

[pleerock]

One solution may be as @david-driscoll said include dom types within rxjs. It seems already to be a commonly used practice, for example in sinon and node definitions

[DanielJoyce]

But then you can accidentally use Dom types in code where they don't exist
in the environment running the code. Then your code blows up.

On Mon, Oct 3, 2016, 22:42 Umed Khudoiberdiev [email protected]
wrote:

One solution may be as @david-driscoll https://github.com/david-driscoll
said include dom types within rxjs. It seems already to be a commonly used
practice, for example in sinon and node definitions
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11351

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ReactiveX/rxjs/issues/1986#issuecomment-251301083,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA50ltgwrM5qQffT5sB38UuVHOINzIQtks5qwedcgaJpZM4KIG5Z
.

Daniel Joyce

The meek shall inherit the Earth, for the brave will be among the stars.

[pleerock]

Nobody need to use browser-specific functions in non-browser environments. For those who used it accidentally probably need to add platform-support check and throw exception in the case of it (using document or something else?)

[david-driscoll]

@blesh

1. We could exclude the dom types, and instead create our own that mirror those.
   This limits our ability to expand on the types such as offering string typing based on the event string, such as mapping mouseover -> MouseEvent automatically.
2. We could exclude the dom types from the default export Rx.ts and instead create another dom.ts, which then exports the defaults from Rx. This is very similar to what we had before with Rx.Dom.ts. This would allow a user that needs the dom methods to do import * as Rx from 'rxjs/dom' / require('rxjs/dom').
3. Create a separate rxjs-dom package which is basically like #2 except an explict new dependency.

I'm thinking #2 is a good compromise for the time being.

[born2net]

any solution to the issue as I am also having the problem of:

C:\msweb\studioDashboard\node_modules\rxjs\observable\dom\AjaxObservable.d.ts
Error:(1, 1) TS2688:Cannot find type definition file for 'chai'.
Error:(15, 26) TS2304:Cannot find name 'Subscriber'.
Error:(19, 43) TS2304:Cannot find name 'Observable'.
Error:(20, 41) TS2304:Cannot find name 'Observable'.
Error:(21, 54) TS2304:Cannot find name 'Observable'.
Error:(22, 53) TS2304:Cannot find name 'Observable'.
...

[born2net]

solved it by upg to rxjs 5.0 rc

[caffeinelogic]

Upgrading to 5.0.1 did not fix this for me. Unless I am missing something.

Version: [email protected]
Typescript: 2.0.3

[staltz]

Please everyone who found this issue, report which version of TypeScript you are using.

[shura-v]

2.1.4

[stephanos]

TS 2.1.1 (with "rxjs": "^5.0.1",)

[junosuarez]

tsc 2.1.4, rxjs 5.0.1

node_modules/rxjs/observable/FromEventObservable.d.ts(11,39): error TS2304: Cannot find name 'EventTarget'.
node_modules/rxjs/observable/FromEventObservable.d.ts(11,104): error TS2304: Cannot find name 'NodeList'.
node_modules/rxjs/observable/FromEventObservable.d.ts(11,115): error TS2304: Cannot find name 'HTMLCollection'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(16,23): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(75,59): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(80,13): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(95,20): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(96,10): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(106,32): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(106,44): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(117,10): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(122,39): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/AjaxObservable.d.ts(130,22): error TS2304: Cannot find name 'XMLHttpRequest'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(10,29): error TS2304: Cannot find name 'MessageEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(11,33): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(12,34): error TS2304: Cannot find name 'CloseEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(15,63): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(26,13): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(27,32): error TS2304: Cannot find name 'Event'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(28,33): error TS2304: Cannot find name 'CloseEvent'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(31,63): error TS2304: Cannot find name 'WebSocket'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(34,23): error TS2304: Cannot find name 'MessageEvent'.

workaround

add --lib dom to command line args or {"compilerOptions": {"lib": ["dom"]}} to tsconfig.json project file.

ideal solution

I'd like to be able to npm install a package of rxjs which does not use any DOM types so I don't need to include the dom lib in my typescript flags.

Thanks!

[caffeinelogic]

@jsdnxx

This work around doesn't work in a web worker environment. The lib for dom and worker conflict.

I know the OP stated Node, but it's an issue with web workers.

[prolink007]

[email protected]
[email protected]

Still seeing the same issue.

The below worked for me as a work around. Still not an ideal solution.

add --lib dom to command line args or {"compilerOptions": {"lib": ["dom"]}} to tsconfig.json project file.

[masonk]

@david-driscoll

Something approaching #2ish would be nice to have. It's very unfortunate that I have to put on the 'dom' lib and confuse the hell out of my developers if I want to use RxJS on node.

I would like to see a patch approach, similar to how we can patch lite.

import * as Rx from 'rxjs' // Gets me the platform-agnostic bit of lite.
import 'rxjs/add/dom' // Patch lite with dom stuff.

Or:

import * as Rx from 'rxjs/Rx' // Gets me everything that's platform agnostic
import 'rxjs/Rx/add/dom' // Patch on things that work in the browser alone.

If you want to keep the whole enchilada as a one line export, you can add a simple convenience module:

import * as Rx from 'rxjs/RxDom'

which just re-exports the above two lines.

I like this approach because it already goes with the flow of RxJS deployment. We are used to patching stuff. Another advantage is that it's extensible. If RxJS wants to add node-only functionality you can make another patch for it. Another advantage is that it's granular. Maybe I don't want all the dom stuff. Maybe there are logically smaller units of dom stuff and I just need one of them.

[david-driscoll]

cc @benlesh @kwonoj @staltz we should probably discuss this at the next meeting.

[warnersean]

Has there been any update on this?

I'm still having this issue.
[email protected]
[email protected]

[YLivay]

Experiencing the same issues as @warnersean.
For now @jsdnxx 's workaround works, but as everyone said, splitting the typings would be the best solution.

[dooreelko]

I just had a nasty bug while I referenced the dom types to fix the compilation and ridiculously enough there's a constant called 'name' in there. Meaning if you type name as a function parameter, the compiler will swallow it and there will be a runtime error. So the workaround is a time bomb.

[dooreelko]

So what I did is to create a file dom.workaround.d.ts in the project root with following content:

/**
 * These are fake dom type definitions that rxjs depends on
 */
interface EventTarget { }
interface NodeList { }
interface HTMLCollection { }
interface XMLHttpRequest { }
interface Event { }
interface MessageEvent { }
interface CloseEvent { }
interface WebSocket { }

[ebeloded]

My workaround was to set skipLibCheck to true in compilerOptions. Is there a good reason for me not to do that?

[soncodi]

--skipLibCheck needed with --strictFunctionTypes see https://github.com/ReactiveX/rxjs/issues/3031

[subramn]

I still face this issue. any work arounds?

[xogeny]

I'm still having this issue with 5.5.10.

Are we just supposed to include "dom" in compilerOptions.lib? Is that the accepted "solution"?

[kwonoj]

I tried this with v6 and compiler (tsc3) so far only complains if actually try to import some of dom-related (ajax mostly), which is expected. Does anyone still experiences this compilation error

1. did not import any ajax related
2. compiler still complains dom type is not provided?

[dooreelko]

Can confirm, 6.3.2 is clean from this.

[kwonoj]

Thanks, let me close this issue. If anyone still experiences with lib type issues

• did not import any ajax related
• compiler still complains dom type is not provided

please feel freely create new issue with some repro steps.