Cannot find module 'rxjs-compat/Observable'

Question

I am currently upgrading angular 4 to angular 6 code. I have installed "rxjs": "^6.3.2" and un-installed rxjs-compact as I have migrated the code to use the new rxjs operators. I am still getting the following errors. Dont know the reason why

ERROR in [at-loader] ./node_modules/rxjs/BehaviorSubject.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.

ERROR in [at-loader] ./node_modules/rxjs/Observable.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/Observable'.

ERROR in [at-loader] ./node_modules/rxjs/Observer.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/Observer'.

ERROR in [at-loader] ./node_modules/rxjs/Operator.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/Operator'.

ERROR in [at-loader] ./node_modules/rxjs/Subject.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/Subject'.

ERROR in [at-loader] ./node_modules/rxjs/Subscription.d.ts:1:15
    TS2307: Cannot find module 'rxjs-compat/Subscription'.

Have you accidentally left any `import` statements in your code referencing the `rxjs-compat` package? — Alex Peters, Sep 18 '18 at 14:41
Hi Peter do i really need to install xjs@6 rxjs-compat@6. Shouldn't the new rxjs 6 work without it — Tom, Sep 18 '18 at 14:45
@Tom Try importing modules like this `import { Observable } from 'rxjs';` — Peter Kim, Sep 18 '18 at 15:08

Jandro Rojas · Answer 1 · 2020-08-10T15:15:03.637

125

None of these answers are correct. Installing rxjs-compat is just a workaround. All you have to do is correct the imports. Use:

import { Observable } from 'rxjs';

Instead of:

import { Observable } from 'rxjs/Observable';

This last import is supposed to go away when they finally decide to kill rxjs-compat (hopefully very soon)... so heads up! you need to update your code!!

edited Aug 10 '20 at 15:15

answered Jun 03 '19 at 17:02

Jandro Rojas

1,754
1
11
13

1

Can we use the same in package.json etc? I really dont want to execute this on each developers machine – PAA Oct 04 '19 at 16:17
1

I'm not sure I follow your question. Unfortunately, you have to either update all the imports (a regular search and replace will suffice) or use the compat package (which I don't recommend since it's a temporary workaround). The package.json will only ensure the version of the packages you're using, what you do with them is in the code. – Jandro Rojas Oct 08 '19 at 02:02
2

This answer needs to be upvoted more because it is the best answer – L. Theodore Obonye Aug 09 '20 at 14:21
1

Also see https://rxjs-dev.firebaseapp.com/guide/v6/migration#import-paths for a list of all imports you might have to change – Stefan Blamberg Oct 27 '20 at 14:16
Even angular university can get this wrong: https://blog.angular-university.io/angular-http/ – Deepstop Sep 24 '22 at 14:53
We tried using the `rxjs-compat` and that was a mess and doesn't really set you up to upgrade in the future. If you update the imports, have the correct version in your package.json and use git/github to share the code with fellow developers, if you run `npm i` it should just work on every machine afterwards. – RG3 Apr 28 '23 at 18:24

Hameed Syed · Answer 2 · 2019-10-10T11:45:22.260

109

This will solve the issue:

npm install --save rxjs-compat

See this GitHub issue

Edit : as per 10th October 2019 ,you can use below syntax as the earlier or the above one was a workaround.

import { Observable } from 'rxjs/Observable';

Reference doc: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#dropping-the-compatibility-layer

edited Oct 10 '19 at 11:45

answered Oct 07 '18 at 14:02

Hameed Syed

3,939
2
21
31

1

Do I need to add that as a dependency in the package.json file. I have upgraded all the rxjs operators in the application to use new rxjs 6 functionality. Unfortunately the d.ts files under the observable are referring to rxjs-compat. for e.g export * from 'rxjs-compat/observable/bindNodeCallback';. – Tom Oct 09 '18 at 11:38
@Tom no need to add the dependency manually as cli does for you.So your package.json will have "rxjs-compat": "^6.3.3" as an entry under "dependencies" node. – Hameed Syed Oct 27 '18 at 08:21
6

this shouldn't be the correct answer... using the rxjs-compat is just a temporary solution they created to keep using old imports safely in the new version... what you should do is update your imports. See my answer below – Jandro Rojas Jun 03 '19 at 17:07

score 11 · Answer 3 · answered Nov 19 '19 at 06:45

As, Jandro Rojas, already said, installing rxjs-compat dependency it's only a temporary walkaround. In the future, you still need to fix that. The best solution is to use an Angular update guide https://update.angular.io/ because of some mistakes can be fixed automatically.

From my experience with errors "Cannot find module 'rxjs-compat/Observable'", "Cannot find module 'rxjs-compat'" and etc.

You should fix all the imports. From:

import { Observable } from 'rxjs/Observable'

To:

import { Observable } from 'rxjs'

If you use RxJS observables classes or etc, you need to update your code. Use this guide -> RxJS v5.x to v6 Update Guide
Check carefully your dependencies, it should be updated too to use the newest RxJs. In my case "ngx-bootstrap" was outdated.

score 7 · Answer 4 · edited Feb 23 '20 at 20:37

7

npm install --save rxjs-compat

and run the server again with ng serve

This works for me.

edited Feb 23 '20 at 20:37

Maximouse

4,170
1
14
28

answered Feb 23 '20 at 18:35

Aman Gupta

89
1
2

score 5 · Answer 5 · edited Jan 14 '19 at 07:02

5

Just open command prompt & add below command in to your root folder.

npm i rxjs-compat

Hope it's working ..

edited Jan 14 '19 at 07:02

ray

5,454
1
18
40

answered Jan 14 '19 at 06:02

Yogesh Kumar

1,016
11
10

score 3 · Answer 6 · answered Oct 04 '19 at 09:48

3

import { Observable } from 'rxjs';

this will be enough, there's no need for other imports

answered Oct 04 '19 at 09:48

Feras Darkazanly

31
1

Wissam Al Shohof · Answer 7 · 2021-01-15T14:38:03.830

3

It worked for me just by replacing 'rxjs/Subscription' with 'rxjs'

edited Jan 15 '21 at 14:38

answered Jan 15 '21 at 14:29

Wissam Al Shohof

31
3

score 3 · Answer 8 · answered Feb 19 '23 at 11:51

3

install rxjs if not installed:

npm install --save rxjs-compat

2-import observable:

import {Observable} from "rxjs";

instead of:

import {Observable} from "rxjs/dist/types";

answered Feb 19 '23 at 11:51

Mounir bkr

1,069
6
6

score 1 · Answer 9 · edited Feb 12 '19 at 10:40

1

Both the rxjs and rxjs-compat of the version 6.3.2 worked for me.

npm install rxjs@6.3.2 --save  &&  npm install rxjs-compat@6.3.2 --save

edited Feb 12 '19 at 10:40

Petter Friberg

21,252
9
60
109

answered Feb 12 '19 at 10:27

Nimesh Shah

19
2

Abdullah · Answer 10 · 2019-09-24T05:32:04.340

1

] node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'

I have got same above error, to resolve the issue enter this command in you CLI:

npm install --save rxjs-compat

Then after import: import { Observable } from 'rxjs';

edited Sep 24 '19 at 05:32

answered Mar 19 '19 at 07:01

Abdullah

2,393
1
16
29

score 1 · Answer 11 · edited Dec 17 '19 at 21:44

1

Those who have this error while creating a salesforce project in VSCode, should ensure that the command - npm install rxjs@6.3.2 --save && npm install rxjs-compat@6.3.2 --save

are installed in - C:\Program Files\Salesforce CLI\client\node_modules directory

edited Dec 17 '19 at 21:44

Watercayman

7,970
10
31
49

answered Dec 17 '19 at 20:39

Manoj Bhagwat

11
1

score 1 · Answer 12 · answered Aug 17 '20 at 12:13

1

npm install --save rxjs-compat

import { Observable } from 'rxjs'

run server ng serve worked for Me

answered Aug 17 '20 at 12:13

abhinavsinghvirsen

1,853
16
25

F.Ahmad · Answer 13 · 2021-06-30T05:27:24.767

1

It looks like rxjs-compat is missing. just do

npm i rxjs-compat 

npm install

edited Jun 30 '21 at 05:27

answered Jun 30 '21 at 05:19

F.Ahmad

19
3

score 0 · Answer 14 · answered Aug 30 '21 at 19:43

0

npm uninstall @ngrx/store

npm install @ngrx/store@5.2.0

npm install --save rxjs-compat

answered Aug 30 '21 at 19:43

Mohammad Irshad

139
3
11

Please add further details to expand on your answer, such as working code or documentation citations. – Community Aug 30 '21 at 22:10

score 0 · Answer 15 · answered Sep 27 '21 at 19:03

0

in package.json add dependency "rxjs": "^6.5.4" then yarn install

or yarn add rxjs@^6.5.4

answered Sep 27 '21 at 19:03

Piyush Jindal

81
1
2

score -1 · Answer 16 · edited Sep 10 '20 at 09:21

-1

npm i rxjs-compat

It's working for me.

edited Sep 10 '20 at 09:21

kk.

3,747
12
36
67

answered Jul 12 '19 at 05:48

Paridhi shah

55
5

score -1 · Answer 17 · answered Nov 17 '20 at 00:27

-1

I am using Angular 10,this method works for me.

npm install --save rxjs-compat

you should import observable this way:-

import { Observable } from 'rxjs/Observable';

answered Nov 17 '20 at 00:27

chander lal piter

7
2

Cannot find module 'rxjs-compat/Observable'

17 Answers17

Linked

Related