TypeError: Observable.of is not a function since rxjs 6.3.0

[FrancescoBorzi]

After updating rxjs from version 6.2.x to version 6.3.0, the following:

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

Observable.of(...)

Are not working anymore. The only way to make it work now is by using:

import { of } from 'rxjs/observable/of';

of(...)

is this a bug or the intended behaviour? It looks a breaking change to me :(

[blakecallens]

Confirmed. rxjs-compat isn't shimming this either. Forcing rxjs and rxjs-compat to 6.0.0 solved the issue for me.

[FrancescoBorzi]

for me switching back to 6.2.1 solves the issue

[maroy1986]

We also hit that issue this afternoon when some coworker restarted their node_modules from scratch. Setting the version in package.json to force the usage of 6.2.2 fixed the issue. Unfortunately, we cannot drop usage of rxjs-compat package because we have external dependencies relying on it. otherwise, it would have fixed the issue. So basically anybody hitting this have 2 options :

1. Force the previous version which is 6.2.2
2. Drop rxjs-compat and do the full migration to 6.x.y according you don't have any external dependencies that rely on it by following this page: https://rxjs-dev.firebaseapp.com/guide/v6/migration

[alignsoft]

I had the same problem - I use Observable.of in a browser network monitoring service that's pervasive in my app. Nothing failed with an error, just silently stopped resolving router.navigate instructions. Trial and error round that rolling back rxjs/rxjs-compat from 6.3 to 6.2.2 resolved the issue. I'm noticing now that the rxjs-compat 6.3 package is no longer available.

[benlesh]

Do you have a minimal reproduction? It seems to be working fine for me.

https://stackblitz.com/edit/typescript-5bgqvb

[Vienyame]

Force or reinstall exact version of rxjs@6.2.2 and rxjs-compat@6.2.2.

[pertrai1]

I got the same result as @benlesh with rxjs@6.2.2 and rxjs-compat@6.2.2

https://stackblitz.com/edit/typescript-ihwwpn - note it changes the packages to 6.3 but you can fork and delete those packages and install the exact versions of 6.2.2

[jtsom]

Also tried updating a large-ish project to 6.3 and got the same errors - had to back down to 6.2.2.

[benlesh]

Hey everyone, I'm still having a hard time creating even a minimal reproduction of this issue. Does anyone have a repository I can look at?

[benlesh]

So far, creating a new project:

npm i rxjs rxjs-compat

app.js

const { Observable } = require('rxjs/Observable');

require('rxjs/add/observable/of');

Observable.of('test').subscribe(x => console.log(x));

node app.js

Outputs "test", just fine.

[benlesh]

can everyone check to make sure they have rxjs-compat 6.3.0 as well?

[alignsoft]

I updated both rxjs and rxjs-compat from 6.2.2 to 6.3 and then noticed that router.navigate stopped firing. There was no error, and I logged the entire code process to confirm that everything worked right up to where the component should have navigated to the next component, and it just silently failed to do so. Reverting to 6.2.2 for both solved the issue.

Unfortunately my project is massive, and I can't easily create a minimal repo of the issue. Also, my issue may not actually be a result of the Observable.of issue, however I am making use of that extensively in the project, and this was the only issue that mirrored the symptom I was seeing.

I'm importing like this:

import { Observable, of, Subject, Subscription, forkJoin } from 'rxjs';

[williamzhao87]

I got a similar error on update from 6.2.2 to 6.3 after running ng update rxjs

$ ng serve
...\node_modules\rxjs\internal\Observable.js:27
sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
^

TypeError: sink._addParentTeardownLogic is not a function
at Observable.subscribe (...\node_modules\rxjs\internal\Observable.js:27:18)
at MergeMapOperator.call
...

[aubweb9]

Hi,

I recently upgraded an app to angular-cli 6 and I've got the following error when I try to start the project :
node_modules@angular\cli\node_modules\rxjs\internal\Observable.js:27
sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
^

TypeError: sink._addParentTeardownLogic is not a function
at Observable.subscribe

(EDIT by @benlesh: Removed large package.json and error message copy paste to keep the thread clean, since this was off-topic.)

Is there any fix/solution for this issue right now ?

Thanks.

[alignsoft]

Anyone tested this with rxjs/rxjs-compat 6.3.1?

[benlesh]

@aubweb9 Thiat's a different issue than what was reported in this issue, but it should be resolved with: #4078

There will be a patch as soon as that passes CI and lands

[jtsom]

Just updated to 6.3.2 of rxjs and rxjs-compat, and still seeing tons of errors of the kind:
TypeError: Observable_1.Observable.throw is not a function
TypeError: Observable_1.Observable.of is not a function

All that is imported at the top is:

import { Observable } from 'rxjs/Observable';

(The errors are in .spec files, btw)

...Back to 6.2.2

[maroy1986]

@jtsom Your import is wrong, should be :
import { Observable } from 'rxjs';

If ever the linter whines that you have an illegal import, you need to remove this from your tslint as this is the new way to go.

[jtsom]

But isn't the fact that we're using rxjs-compat mean that we don't have to change our imports (as in the sample in the original issue description)? I shouldn't have to change all the imports until we migrate and don't need rxjs-compat (?)

[maroy1986]

@jtsom Right, I skipped the part where you said you were still using rxjs-compat, sorry. In that case, I agree with you that there's something wrong.

But still, you might want to consider the full migration although I can understand this is a pain if your app has grown a lot.

[jtsom]

Agreed. Full migration would be the answer... but since we're just making the upgrade to latest Angular v6 and getting everything working (including fixing unit tests that are breaking after the update), adding that just yet isn't in the cards.

[deneboulton]

I too have encountered this issue using 6.3.2 where all patch imports were seemingly doing nothing; for me this specifically surfaced as errors for .of and .filter due them being used at app startup.

After installing 6.2.2, due to reading this issue, these errors no longer occur.

[JorgeJoseAbad]

Same or similar error doing ng serve.. but with Angular 6 (updated from 5), in console:

(etc)../node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Observable.js:27
sink._addParentTeardownLogic(this.source || (config_1.config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
^

TypeError: sink._addParentTeardownLogic is not a function

(resumed for clarity...)

at Observable.subscribe...
at MergeMapOperator.call..
at Object.subscribeToResult..

(and and more lines, all seem related to rxjs package, this rxjs was updated to 6.3.1, and the error arised, then downgraded to 6.2.2 and rxjs-compat also to 6.2.2 but the error remain.

node_modules deleted ad re-installed from package.json:
"dependencies": {
"@angular/animations": "^6.1.6",
"@angular/common": "^6.1.6",
"@angular/compiler": "^6.1.6",
"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",
"@angular/http": "^6.1.6",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"@ng-bootstrap/ng-bootstrap": "^3.2.0",
"bootstrap": "^4.1.3",
"chart.js": "^2.7.2",
"core-js": "^2.4.1",
"jquery": "^3.3.1",
"ng2-charts": "^1.6.0",
"popper.js": "^1.14.4",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2"
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.7.0-rc.3",
"@angular/cli": "6.1.5",
"@angular/compiler-cli": "^6.1.6",
"@angular/language-service": "^6.1.6",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^2.0.4",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.0",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.9.2"
}

;-(

[whyvrafvr]

Hi folks.
Same issue with rxjs 6.3.2 and rxjs-compat 6.3.2 even after having removed node_modules or cleaned the npm's cache...
Updating angular, uninstalling rxjs/rxjs-compat 6.3.2 and re-installing rxjs/rxjs-compat 6.2.2 solves the problem... definitely on rxjs side.

[JorgeJoseAbad]

Hi skonx
not for
sink._addParentTeardownLogic
I've tried
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2"
without success..

[whyvrafvr]

Hi @JorgeJoseAbad.
Did you remove rxjs 6.3.2 and rxjs 6.3.2 and replaced them with the 6.2.2 version?
How did you do that?

[JorgeJoseAbad]

Yes. maybe not literally but I've tried:
npm install --save rxjs/rxjs-compat@6.2.2 --force
npm cache clean --force
delete node_module and npm install....

I have tried several things, also reinstalling 6.3.2..maybe I have not done something completely correctly, I am a beginner

[whyvrafvr]

This is what I did:

• ng update

• ng update @angular/core -> reiterate with the different modules that the previous command shows

• npm update --save (in order to update the modules which are not managed through ng update)

• npm list rxjs (in order to see the rxjs dependencies, you should have rxjs 6.3.2 on all core modules and this is what we expect to change)

• npm un --save rxjs

• npm un --save rxjs-compat

• npm list --depth=0 (in order to check that rxjs is removed, you should have a warning or an error at the end of the list)

• npm i --save rxjs@6.2.2

• npm i --save rxjs-compat@6.2.2

• npm list rxjs (check that the previous dependencies have been changed with 6.2.2)

That's all for me.
Of course, if you perform a

rm -rf node_modules

and then a

npm i --unsafe-perm

==> you will reinstall rxjs 6.3.2 due to the angular current dependencies...

[whyvrafvr]

... and I've read on a different thread that they "should talk about the issue during the next meeting" instead of changing the dependencies right now.
Anyway, when the issue will be fixed ng update will update it as cooler as it is :)

[pertrai1]

Has anyone been able to fix this and can share what the exact version of angular is being used as well as the version of rxjs?

[arlowhite]

@angular-devkit/build-angular@0.8.1 did not fix the issue for me. Also tried 0.8.3
The package.json "resolutions": { "**/rxjs": "6.3.2" } trick did not seem to change the resolved rxjs transitive versions in package-lock.json Many sub-dependencies still use "rxjs": "~6.2.0"

So downgrading to rxjs@6.2.2 is the only solution that works for me.

Sidenote:
ng update @angular/core does bump RxJS to 6.3.2
So IMO this issue is fairly important to fix

[stefan-schweiger]

I had to force everything to version 6.2.2 and now it works with the current angular version.

"dependencies" : {
  ...
  "rxjs" : "6.2.2",
  "rxjs-compat": "6.2.2",
  ...
},
"resolutions": { "**/rxjs": "6.2.2" }

But the issue still isn't resolved with version 6.3.3

[msegers]

We are also stuck on 6.2.2 for now, higher versions will cause the error stated above.
We are however still on devkit 0.6.x since higher versions of that lib cause our build to run out of memory :-)

[Ristaaf]

@benlesh: Minimal reproduction:

with angular cli 6.2.4

1. ng new reproduction
2. cd reproduction
3. edit package.json to add rxjs: "6.3.3" and rxjs-compat "6.3.3"
4. npm install
5. edit main.ts to add:

import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";

Observable.of(null);

6. ng serve
7. localhost:4200 check devtools console

Uncaught TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.of is not a function

[Ristaaf]

@benlesh
And the reason has to do with this change:3f75564

rxjs-compat 6.2.2

Observable.js

export { Observable } from 'rxjs';

add/observable/of.js

import { Observable, of as staticOf } from 'rxjs';
Observable.of = staticOf;

rxjs-compat 6.3.3

Observable.js

export { Observable } from 'rxjs/internal/Observable';

add/observable/of.js

import { Observable, of as staticOf } from 'rxjs';
Observable.of = staticOf;

add/observable.of.js is the same as in 6.2.2. So there is a mismatch in 6.3.3 the of is not applied to the Observable imported in typscript with import {Observable} from "rxjs/Observable";

I do not know enough about this solution to know why this is, since the observable exported from Observable.js is also the "internal" one...

[Ristaaf]

Also tried this with angular 7 rc, the reason being that I then got a clean use of rxjs versions, all dependencies are using 6.3.3. But the problem is still there.

And also, by modifying node_modules/rxjs-compat/_esm5/Observable.js so that it imports from 'rxjs' everything works fine, however that reverts the mentioned commit which if I understand correctly fixes a problem with to much getting imported and packaged when tree shaking.

[Ristaaf]

And finally, this is as far as I can get I think, the following code (in typescript compiled with angular cli):

import { Observable } from 'rxjs/Observable';
import { Observable as Observable2 } from 'rxjs';
import { Observable as Observable3 } from 'rxjs/internal/Observable';
console.log(Observable === Observable2);
console.log(Observable === Observable3);
console.log(Observable3 === Observable2);

Will output true, false, false in rxjs 6.2 but false, true, false in rxjs 6.3

This indicates that normally (in 6.2 and before) when importing or adding to an Observable you are not getting the internal/Observable but something else. But after 6.3 importing from rxjs/Observable suddenly gets you the internal/Observable which is not the one that is added to (with of for example)

And these different imports will actually resolve to different files in 6.3 if looking at the build vendor.js file. so the import from rxjs/Observable will finally resolve to:
"node_modules/rxjs/internal/Observable.js"
but the import from rxjs will resolve to
"node_modules/rxjs/_esm5/internal/Observable.js"

In 6.2 they will both refer to the _esm5 internal Observable.

So that is my limit, I have no idea how/why webpack/typescript/angular-cli decides to use the _esm5 folder or even what it is, so someone take it from there.

And by the way, this issue might seem small right now, but once Angular 7 is out and everyone starts to use rxjs 6.3 this will become a big problem because there are still a lot of third party dependencies that rely on rxjs-compat and they will not work in that configuration (the three I know of that we use right now is kendo, microsoft bot framework and even the rxjs patch on zone.js)

[s25g5d4]

import Observable from rxjs instead of rxjs/Observable. Also for static methods like of, zip, import static function from rxjs with the method name. It's more like rxjs-6 way.

✓ import { Observable } from 'rxjs';
✓ import { zip } from 'rxjs';
✓ import { zip as observableZip } from 'rxjs';
✗ import { Observable } from 'rxjs/Observable';

Analysis of Cause

Angular-cli uses a resolve alias for module rxjs/Observable internally while building, mapping it to rxjs-compat/_esm5/Observable. This mapping is provided by rxjs itself. see Build and Treeshaking for more information. Find angular-cli including the path-mapping here.

Prior to v6.3.0, rxjs-compact/_esm5/Observable exports Observable from rxjs, and when webpack resolves rxjs, it takes the value of key module in rxjs' package.json as entry point. See resolve.mainFields for more information. For v6.2.2 the module value is rxjs/_esm5/index.js, so the exported Observable object is from rxjs/_esm5/index.js. But, released in v6.3.0, commit 3f75564 changed the import path of Observable from rxjs to rxjs/internal/Observable, causing webpack not to honor the module value in package.json anymore and directly import Observable from rxjs/internal/Observable. The correct resolved path should be rxjs/_esm5/internal/Observable.

Possible solutions for rxjs project itself, would be to add rxjs/internal/Observable to its path-mapping file, mapping it to rxjs/_esm5/internal/Observable, or revert 3f75564 . For users please consider migrate your pre-rxjs6 code to latest. For angular users, if you insist, I have a workaround for you. Add the following snippet to your src/tsconfig.app.json:

{
    "compilerOptions": {
        "paths": {
            "rxjs/internal/Observable": [
                "../node_modules/rxjs/_esm5/internal/Observable"
            ]
        }
    }
}

Please remove this workaround after you finish rxjs 6 migration on your project. It may not work for future versions.

[s25g5d4]

Please find sample code here: https://github.com/s25g5d4/rxjs-path-mapping-issue

[Ristaaf]

@s25g5d4 Great information, thanks!

As for the first solution/workaround it actually means migrating halfway to rxjs 6, this problem is mainly about code that needs to work both with rxjs 5 and 6, typically in existing libraries you use, Kendo as an example has clearly stated that as long as they support rxjs 5 (which will be at least for another year), they will use the rxjs 5 syntax and require you to use rxjs-compat if using rxjs 6.

The workaround for Angular CLI is great (even if of course we would like to avoid workarounds as much as possible), did not know it was possible to solve that way thanks for the information and education on the matter!

[rajkumarm-iprogrammer]

Force or reinstall exact version of rxjs@6.2.2 and rxjs-compat@6.2.2.

This one is worked for me as well.
Thanks 👍 :

[KevinKelchen]

I updated to Ionic 4 Beta 17 (Angular 7) which resulted in going from RxJS 6.2.2 to 6.3.3. Editing the tsconfig.app.json file with the paths workaround was to no avail for me.

Instead, I am sticking with RxJS 6.3.3 but am leaving rxjs-compat at 6.2.2. Due to this issue, I will probably need to just bite the bullet and do the full upgrade to RxJS 6 before we release our app.

[ashraf-cslsoft]

Instead of
import 'rxjs/add/observable/of';

Below works for me
import { of } from 'rxjs';

[monelseZA]

Import : import { of as observableOf} from 'rxjs';

and Change Observable.of to observableOf