CODEWITHSUNDEEP
typescriptrxjsrxjs5
Alejandro Nanez
Alejandro Nanez

Reputation: 345

RxJs and Typescript. TS2307: Cannot find module '@reactivex/rxjs'

I got a problem with typescript and RxJs v5.

Please Look the UPDATE sections.

I did yarn add @reactivex/rxjs (also yarn add rxjs) and on my index.ts did import Rx from '@reactivex/rxjs'; and got this error: VSCode Error

Also, if I run node ./node_modules/.bin/tsc I got this error back too error TS2307: Cannot find module '@reactivex/rxjs'.

UPDATE

Also doing

import { Observable } from 'rxjs/Observable'

throws the same error enter image description here.

UPDATE 2

Well this seems to be more related to TS itself than to RxJS.

"compilerOptions": {
    "module": "commonjs",
    "allowJs": true,
    "outDir": "dist",
    "target": "es2015",
    "noImplicitAny": true,
    "noEmit": true,
    "strictNullChecks": true,
    "suppressExcessPropertyErrors": false,
    "suppressImplicitAnyIndexErrors": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "lib": [
        "es2015",
        "dom"
    ]
}

Having this ^ configuration seems to fix the VSCode issues, but running tsc against src/index.ts doesn't work

node_modules/rxjs/Observable.d.ts(69,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

Upvotes: 13

Views: 28472

Answers (8)

Aveek
Aveek

Reputation: 3

This issue came for me when I installed UUID package using npm, then I installed using yarn and it worked fine for me.

Upvotes: 0

Pedram A. Keyvani
Pedram A. Keyvani

Reputation: 812

Let's imagine the following scenario:

my-app
  |__ app.ts

app.ts file contains import { Observable } from 'rxjs/Observable' according to martin's comment.

I want to compile my app.ts to app.js

step 1: npm install rxjs

  • node_modules directory is added
my-app
  |__ app.ts
  |__ node_modules
          |__ rxjs
          |__ ...

step 2:

  • without tsconfig.json:
    • step 2-1: run tsc --target es2015 --module commonjs app
  • with tsconfig.json:
    • step 2-1: add tsconfig.json to my-app folder.
my-app
  |__ app.ts
  |__ tsconfig.json
  |__ node_modules
          |__ rxjs
          |__ ...
    • step 2-2: set following configurations to tsconfig.json file:
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015"
  },
  "files": ["app.ts"]
}
    • step 2-3: run tsc not tsc app

step 3: for run compiled file, node app.js

Upvotes: 0

Aman
Aman

Reputation: 177

For me I had the error below:
error TS2307: Cannot find module 'rxjs-compat/Observable'.

Solution: instead of importing: 

import { Observable } from 'rxjs/Observable';

use: 

import { Observable } from 'rxjs';

and you can put to the observable you want to import by separating all by comma like: 

import { Observable, of } from 'rxjs';

Upvotes: 4

martin
martin

Reputation: 96979

For RxJS 5 you're supposed to use:

import * as Rx from 'rxjs';

Or import only a specific part of the library:

import { Observable } from 'rxjs/Observable';

For more info see: https://github.com/ReactiveX/rxjs/#installation-and-usage

Upvotes: 2

cfphpflex
cfphpflex

Reputation: 603

This is a hard nut to crack: my fix

 in package.json  dependencies confirm this code exists:

     "rxjs": "^5.5.2",


In file /node_modules/@angular/core/src/application_ref.d.ts

//import { Observable } from 'rxjs/Observable';
// yeah, sure, I'm not supposed to, but I did and i worked
   import { Observable } from 'rxjs/Rx';


in file node_modules/rxjs/src/tsconfig.json

    {
      "compilerOptions": {
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": true,
        "declaration": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "suppressImplicitAnyIndexErrors": true,
        "moduleResolution": "node",
        "target": "es6",
        "outDir": "dist/es6",
        "lib": [ "es2016.array.include" ]
      },
      "formatCodeOptions": {
        "indentSize": 2,
        "tabSize": 2
      },
      "bazelOptions": {
        "suppressTsconfigOverrideWarnings": true
      },
      "files": [
        "src/Rx.ts"
      ]
    }

for this ng --version

    Angular CLI: 1.6.7
    Node: 8.11.1
    OS: darwin x64
    Angular: 5.2.10
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    @angular/cli: 1.6.7
    @angular-devkit/build-optimizer: 0.0.42
    @angular-devkit/core: 0.0.29
    @angular-devkit/schematics: 0.2.0
    @ngtools/json-schema: 1.1.0
    @ngtools/webpack: 1.9.7
    @schematics/angular: 0.1.17
    typescript: 2.4.2
    webpack-dev-server: 2.11.2
    webpack: 3.10.0

Upvotes: 0

sboisse
sboisse

Reputation: 5548

I had the same problem in a brand new 'Hello World' project in Visual Studio 2017, for which I had executed npm install rxjs.

Basically just had this in my server.ts file:

import { Observable } from 'rxjs/Observable'
import * as http from 'http';

var port = process.env.port || 1337
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

Depending on the values set for compile options module and lib, this generated the error: 

server.ts(1,28): error TS2307: Build:Cannot find module 'rxjs/Observable'.

or:

node_modules\rxjs\Observable.d.ts(73,59): error TS2693: Build:'Promise' only refers to a type, but is being used as a value here.

The winning combination of compile options that worked for me were:

"compilerOptions": {
    "module": "commonjs",
    "lib": [ "es2015" ]
  }

This made both errors to go away.

Upvotes: 2

Abhishek Chadha
Abhishek Chadha

Reputation: 440

Try setting the "moduleResolution": "node" inside your compileOptions to specify module resolution strategy for TS.

npm install rxjs --save

and in your Typescript

import { Observable } from 'rxjs/Rx';

That fixed it for me.

Upvotes: 16

smac89
smac89

Reputation: 43234

Use this syntax:

import { Observable } from 'rxjs/Rx'

Or

import Rx from 'rxjs/Rx';
Rx.Observable.of(1,2,3)

Or

import { Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

Observable.of(1,2,3).map(x => x + '!!!'); // etc

All these examples can be found on the website: http://reactivex.io/rxjs/manual/installation.html

Upvotes: 0

Related Questions