Nativescript-angular: document.createElement is not a function

[briandilley]

I get the following error when attempting to run my app:
JavaScript error: file:///app/tns_modules/rxjs/util/Immediate.js:56:82: JS ERROR TypeError: document.createElement is not a function. (In 'document.createElement('script')', 'document.createElement' is undefined)

This is an app that has been working great for a while, i just attempting to update the libraries and now this is happening. It seems that Immediate.js in rxjs is attempting to use document.createElement which obviously doesn't work in nativeScript.

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x107f6f7b4 -[TNSRuntime executeModule:referredBy:]
2   0x103f2b4e1 main
3   0x109afed81 start
JavaScript stack trace:
1   canUseReadyStateChange@file:///app/tns_modules/rxjs/util/Immediate.js:56:82
2   ImmediateDefinition@file:///app/tns_modules/rxjs/util/Immediate.js:30:49
3   anonymous@file:///app/tns_modules/rxjs/util/Immediate.js:208:44
4   evaluate@[native code]
5   moduleEvaluation@[native code]
6   @[native code]
7   promiseReactionJob@[native code]
8   require@[native code]
9   anonymous@file:///app/tns_modules/rxjs/scheduler/AsapAction.js:7:26
10  evaluate@[native code]
11  moduleEvaluation@[native code]
12  @[native code]
13  promiseReactionJob@[native code]
14  require@[native code]
15  anonymous@file:///app/tns_modules/rxjs/scheduler/asap.js:2:27
16  evaluate@[native code]
17  moduleEvaluation@[native code]
18  @[native code]
19  promiseReactionJob@[native code]
20  require@[native code]
21  anonymous@file:///app/tns_modules/rxjs/observable/SubscribeOnObservable.js:8:21
22  evaluate@[native code]
23  moduleEvaluation@[native code]
24  @[native code]
25  promiseReactionJob@[native code]
26  require@[native code]
27  anonymous@file:///app/tns_modules/rxjs/operators/subscribeOn.js:2:38
28  evaluate@[native code]
29  moduleEvaluation@[native code]
30  @[native code]
31  promiseReactionJob@[native code]
32  require@[native code]
33  anonymous@file:///app/tns_modules/rxjs/operator/subscribeOn.js:2:28
34  evaluate@[native code]
35  moduleEvaluation@[native code]
36  @[native code]
37  promiseReactionJob@[native code]
38  require@[native code]
39  anonymous@file:///app/tns_modules/rxjs/add/operator/subscribeOn.js:3:28
40  evaluate@[native code]
41  moduleEvaluation@[native code]
42  @[native code]
43  promiseReactionJob@[native code]
44  require@[native code]
45  anonymous@file:///app/tns_modules/rxjs/./Rx.js:121:8
46  evaluate@[native code]
47  moduleEvaluation@[native code]
48  @[native code]
49  promiseReactionJob@[native code]
50  require@[native code]
51  anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/reconnecting.js:3:21
52  evaluate@[native code]
53  moduleEvaluation@[native code]
54  @[native code]
55  promiseReactionJob@[native code]
56  require@[native code]
57  anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/driver-updates.js:14:29
58  evaluate@[native code]
59  moduleEvaluation@[native code]
60  @[native code]
61  promiseReactionJob@[native code]
62  require@[native code]
63  anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/index.js:6:17
64  evaluate@[native code]
65  moduleEvaluation@[native code]
66  @[native code]
67  promiseReactionJob@[native code]
68  require@[native code]
69  anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/index.js:10:17
70  evaluate@[native code]
71  moduleEvaluation@[native code]
72  @[native code]
73  promiseReactionJob@[native code]
74  require@[native code]
75  anonymous@file:///app/app.module.js:7:37
76  evaluate@[native code]
77  moduleEvaluation@[native code]
78  @[native code]
79  promiseReactionJob@[native code]
80  require@[native code]
81  anonymous@file:///app/main.js:8:27
82  evaluate@[native code]
83  moduleEvaluation@[native code]
84  @[native code]
85  promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/rxjs/util/Immediate.js:56:82: JS ERROR TypeError: document.createElement is not a function. (In 'document.createElement('script')', 'document.createElement' is undefined)

[anuragd7]

Check if you have imports from rxjs/rx. I solved this issue by removing/
replacing all imports from rxjs/rx.

On 24 Dec 2017 9:02 a.m., "Brian" [e-mail] wrote:

I get the following error when attempting to run my app:
JavaScript error: file:///app/tns_modules/rxjs/util/Immediate.js:56:82:
JS ERROR TypeError: document.createElement is not a function. (In
'document.createElement('script')', 'document.createElement' is undefined)

This is an app that has been working great for a while, i just attempting
to update the libraries and now this is happening. It seems that
Immediate.js in rxjs is attempting to use document.createElement which
obviously doesn't work in nativeScript.

Fatal JavaScript exception - application has been terminated.
Native stack trace:
1 0x107f6f7b4 -[TNSRuntime executeModule:referredBy:]
2 0x103f2b4e1 main
3 0x109afed81 start
JavaScript stack trace:
1 canUseReadyStateChange@file:///app/tns_modules/rxjs/util/Immediate.js:56:82
2 ImmediateDefinition@file:///app/tns_modules/rxjs/util/Immediate.js:30:49
3 anonymous@file:///app/tns_modules/rxjs/util/Immediate.js:208:44
4 evaluate@[native code]
5 moduleEvaluation@[native code]
6 @[native code]
7 promiseReactionJob@[native code]
8 require@[native code]
9 anonymous@file:///app/tns_modules/rxjs/scheduler/AsapAction.js:7:26
10 evaluate@[native code]
11 moduleEvaluation@[native code]
12 @[native code]
13 promiseReactionJob@[native code]
14 require@[native code]
15 anonymous@file:///app/tns_modules/rxjs/scheduler/asap.js:2:27
16 evaluate@[native code]
17 moduleEvaluation@[native code]
18 @[native code]
19 promiseReactionJob@[native code]
20 require@[native code]
21 anonymous@file:///app/tns_modules/rxjs/observable/SubscribeOnObservable.js:8:21
22 evaluate@[native code]
23 moduleEvaluation@[native code]
24 @[native code]
25 promiseReactionJob@[native code]
26 require@[native code]
27 anonymous@file:///app/tns_modules/rxjs/operators/subscribeOn.js:2:38
28 evaluate@[native code]
29 moduleEvaluation@[native code]
30 @[native code]
31 promiseReactionJob@[native code]
32 require@[native code]
33 anonymous@file:///app/tns_modules/rxjs/operator/subscribeOn.js:2:28
34 evaluate@[native code]
35 moduleEvaluation@[native code]
36 @[native code]
37 promiseReactionJob@[native code]
38 require@[native code]
39 anonymous@file:///app/tns_modules/rxjs/add/operator/subscribeOn.js:3:28
40 evaluate@[native code]
41 moduleEvaluation@[native code]
42 @[native code]
43 promiseReactionJob@[native code]
44 require@[native code]
45 anonymous@file:///app/tns_modules/rxjs/./Rx.js:121:8
46 evaluate@[native code]
47 moduleEvaluation@[native code]
48 @[native code]
49 promiseReactionJob@[native code]
50 require@[native code]
51 anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/reconnecting.js:3:21
52 evaluate@[native code]
53 moduleEvaluation@[native code]
54 @[native code]
55 promiseReactionJob@[native code]
56 require@[native code]
57 anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/driver-updates.js:14:29
58 evaluate@[native code]
59 moduleEvaluation@[native code]
60 @[native code]
61 promiseReactionJob@[native code]
62 require@[native code]
63 anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/socket/index.js:6:17
64 evaluate@[native code]
65 moduleEvaluation@[native code]
66 @[native code]
67 promiseReactionJob@[native code]
68 require@[native code]
69 anonymous@file:///app/tns_modules/@suna/quickride-ts-libcore/src/index.js:10:17
70 evaluate@[native code]
71 moduleEvaluation@[native code]
72 @[native code]
73 promiseReactionJob@[native code]
74 require@[native code]
75 anonymous@file:///app/app.module.js:7:37
76 evaluate@[native code]
77 moduleEvaluation@[native code]
78 @[native code]
79 promiseReactionJob@[native code]
80 require@[native code]
81 anonymous@file:///app/main.js:8:27
82 evaluate@[native code]
83 moduleEvaluation@[native code]
84 @[native code]
85 promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/rxjs/util/Immediate.js:56:82: JS ERROR TypeError: document.createElement is not a function. (In 'document.createElement('script')', 'document.createElement' is undefined)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/1137, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AE2Pttq7AEZsaL6cUaxWt1FxJFFIMN9dks5tDcXUgaJpZM4RL0qi
.

[briandilley]

I fixed this my importing things directly like @anuragd7 mentioned.

ie: instead of this import {Observable} from 'rxjs'; i did: import {Observable} from 'rxjs/Observable';

[mhmo91]

had a similar issue, even with the proposed solution, it didn't work n i had to run
$ tns platform clean android
then
$ tns run android

[Sharique-Hasan]

Even after cleaning my platform. I am unable to run my app.

[netowp]

Hey @Sharique-Hasan, I has a similar issue. All I had to do was to import all Observable from rxjs/Observable (as @briandilley mentioned). I was importing some from rxjs/Rx and rxjs and it was causing this error.

[fhackenb]

I have a similar issue, though I don't believe it is rxjs related in my case. I'm using aws-appsync and when I try to require it I get:

JavaScript error:
file:///app/tns_modules/setimmediate/setImmediate.js:175:64: JS ERROR TypeError: doc.createElement is not a function. (In 'doc.createElement("script")', 'doc.createElement' is undefined)

RXJS is installed, but it is not being referenced anywhere in my app.

Error-causing code:
const AWSAppSyncClient = require('aws-appsync');

[sfaessler]

Fatal JavaScript exception - application has been terminated.
Native stack trace:
1 0x10444e724 -[TNSRuntime executeModule:referredBy:]
2 0x103e74681 main
3 0x10a92dd81 start
4 0x1
JavaScript stack trace:
1 canUseReadyStateChange@file:///app/tns_modules/rxjs/util/Immediate.js:56:82
2 ImmediateDefinition@file:///app/tns_modules/rxjs/util/Immediate.js:30:49
3 anonymous@file:///app/tns_modules/rxjs/util/Immediate.js:208:44
4 evaluate@[native code]
5 moduleEvaluation@[native code]
6 @[native code]
7 promiseReactionJob@[native code]
8 require@[native code]
9 anonymous@file:///app/tns_modules/rxjs/scheduler/AsapAction.js:7:26
10 evaluate@[native code]
11 moduleEvaluation@[native code]
12 @[native code]
13 promiseReactionJob@[native code]
14 require@[native code]
15 anonymous@file:///app/tns_modules/rxjs/scheduler/asap.js:2:27
16 evaluate@[native code]
17 moduleEvaluation@[native code]
18 @[native code]
19 promiseReactionJob@[native code]
20 require@[native code]
21 anonymous@file:///app/tns_modules/rxjs/observable/SubscribeOnObservable.js:8:21
22 evaluate@[native code]
23 moduleEvaluation@[native code]
24 @[native code]
25 promiseReactionJob@[native code]
26 require@[native code]
27 anonymous@file:///app/tns_modules/rxjs/operators/subscribeOn.js:2:38
28 evaluate@[native code]
29 moduleEvaluation@[native code]
30 @[native code]
31 promiseReactionJob@[native code]
32 require@[native code]
33 anonymous@file:///app/tns_modules/rxjs/operator/subscribeOn.js:2:28
34 evaluate@[native code]
35 moduleEvaluation@[native code]
36 @[native code]
37 promiseReactionJob@[native code]
38 require@[native code]
39 anonymous@file:///app/tns_modules/rxjs/add/operator/subscribeOn.js:3:28
40 evaluate@[native code]
41 moduleEvaluation@[native code]
42 @[native code]
43 promiseReactionJob@[native code]
44 require@[native code]
45 anonymous@file:///app/tns_modules/rxjs/Rx.js:121:8
46 evaluate@[native code]
47 moduleEvaluation@[native code]
48 @[native code]
49 promiseReactionJob@[native code]
50 require@[native code]
51 anonymous@file:///app/services/local-data/local-data.service.js:6:8
52 evaluate@[native code]
53 moduleEvaluation@[native code]
54 @[native code]
55 promiseReactionJob@[native code]
56 require@[native code]
57 anonymous@file:///app/components/pages/detail-page/detail-page.component.js:8:35
58 evaluate@[native code]
59 moduleEvaluation@[native code]
60 @[native code]
61 promiseReactionJob@[native code]
62 require@[native code]
63 anonymous@file:///app/app.routing.js:4:38
64 evaluate@[native code]
65 moduleEvaluation@[native code]
66 @[native code]
67 promiseReactionJob@[native code]
68 require@[native code]
69 anonymous@file:///app/app.module.js:5:28
70 evaluate@[native code]
71 moduleEvaluation@[native code]
72 @[native code]
73 promiseReactionJob@[native code]
74 require@[native code]
75 anonymous@file:///app/main.js:5:27
76 evaluate@[native code]
77 moduleEvaluation@[native code]
78 @[native code]
79 promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/rxjs/util/Immediate.js:56:82: JS ERROR TypeError: document.createElement is not a function. (In 'document.createElement('script')', 'document.createElement' is undefined)

Cannot find app/tns_modules/rxjs/... in my project. What am I doing wrong?

Helpful for any help with that!

Thanks!

[ashrafaa]

Hi everyone, just to share that I got the same error as well. Checked all the codes and pretty sure everything already calling from "rxjs/Observable" as suggested. Rebuild the platform produce same result as well :( Appreciate any help.
nativescript-cli: 4.0.0;
tns-core-modules: 4.0.0;
tns-ios: 3.4.1

***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x102aef098 -[TNSRuntime executeModule:referredBy:] 2 0x100ffb260 3 0x182775fc0 <redacted> JavaScript stack trace: 1 canUseReadyStateChange@file:///app/tns_modules/rxjs/util/Immediate.js:56:82 2 ImmediateDefinition@file:///app/tns_modules/rxjs/util/Immediate.js:30:49 3 anonymous@file:///app/tns_modules/rxjs/util/Immediate.js:208:44 4 evaluate@[native code] 5 moduleEvaluation@[native code] 6 @[native code] 7 promiseReactionJob@[native code] 8 require@[native code] 9 anonymous@file:///app/tns_modules/rxjs/scheduler/AsapAction.js:7:26 10 evaluate@[native code] 11 moduleEvaluation@[native code] 12 @[native code] 13 promiseReactionJob@[native code] 14 require@[native code] 15 anonymous@file:///app/tns_modules/rxjs/scheduler/asap.js:2:27 16 evaluate@[native code] 17 moduleEvaluation@[native code] 18 @[native code] 19 promiseReactionJob@[native code] 20 require@[native code] 21 anonymous@file:///app/tns_modules/rxjs/observable/SubscribeOnObservable.js:8:21 22 evaluate@[native code] 23 moduleEvaluation@[native code] 24 @[native code] 25 promiseReactionJob@[native code] 26 require@[native code] 27 anonymous@file:///app/tns_modules/rxjs/operators/subscribeOn.js:2:38 28 evaluate@[native code] 29 moduleEvaluation@[native code] 30 @[native code] 31 promiseReactionJob@[native code] 32 require@[native code] 33 anonymous@file:///app/tns_modules/rxjs/operator/subscribeOn.js:2:28 34 evaluate@[native code] 35 moduleEvaluation@[native code] 36 @[native code] 37 promiseReactionJob@[native code] 38 require@[native code] 39 anonymous@file:///app/tns_modules/rxjs/add/operator/subscribeOn.js:3:28 40 evaluate@[native code] 41 moduleEvaluation@[native code] 42 @[native code] 43 promiseReactionJob@[native code] 44 require@[native code] 45 anonymous@file:///app/tns_modules/rxjs/Rx.js:121:8 46 evaluate@[native code] 47 moduleEvaluation@[native code] 48 @[native code] 49 promiseReactionJob@[native code] 50 require@[native code] 51 anonymous@file:///app/tns_modules/nativescript-ngx-fonticon/services/fonticon.service.js:5:21 52 evaluate@[native code] 53 moduleEvaluation@[native code] 54 @[native code] 55 promiseReactionJob@[native code] 56 require@[native code] 57 anonymous@file:///app/tns_modules/nativescript-ngx-fonticon/pipes/fonticon.pipe.js:4:33 58 evaluate@[native code] 59 moduleEvaluation@[native code] 60 @[native code] 61 promiseReactionJob@[native code] 62 require@[native code] 63 anonymous@file:///app/tns_modules/nativescript-ngx-fonticon/nativescript-ngx-fonticon.js:7:30 64 evaluate@[native code] 65 moduleEvaluation@[native code] 66 @[native code] 67 promiseReactionJob@[native code] 68 require@[native code] 69 anonymous@file:///app/app.module.js:9:44 70 evaluate@[native code] 71 moduleEvaluation@[native code] 72 @[native code] 73 promiseReactionJob@[native code] 74 require@[native code] 75 anonymous@file:///app/main.js:5:29 76 evaluate@[native code] 77 moduleEvaluation@[native code] 78 @[native code] 79 promiseReactionJob@[native code] JavaScript error: file:///app/tns_modules/rxjs/util/Immediate.js:56:82: JS ERROR TypeError: document.createElement isnot a function. (In 'document.createElement('script')', 'document.createElement' is undefined)

[interrobrian]

@ashrafaa I was running into the same error as you, down to it coming from nativescript-ngx-fonticon in the call stack. It turns out, the latest version of that package requires rxjs@>=6.0.0. So, you'll need to either downgrade nativescript-ngx-fonticon or upgrade rxjs. See this issue. Note that upgrading rxjs will likely require some migration on your part, as rxjs 6 requires that you import everything from "rxjs".

[ashrafaa]

thanks @interrobrian I ended up downgrade nativescript-ngx-fonticon and the code runs

[TinusJ]

@ashrafaa To which version?

[francisrod01]

[Solved] using rxjs and rxjs-compat to ^6.2.1

[praveshkhatana]

@fhackenb did you find a solution?

[exeleon]

@TinusJ npm i --save [email protected]

[aaayushsingh]

@fhackenb did you manage to solve it?

[fhackenb]

Nope, I never solved it. I ended up giving up using appsync with NativeScript. But it looks like they have an angular demo now that may be worth checking out. No idea if it works though https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular

[Sharique-Hasan]

I managed to solve it by adding an extra condition if checking if
createElement exists in document object. I made changes in rxjs's library
immediate.js

On Wed, Jul 25, 2018, 7:21 PM fhackenb [e-mail] wrote:

Nope, I never solved it. I ended up giving up using appsync with
NativeScript. But it looks like they have an angular demo now that may be
worth checking out. No idea if it works though
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/1137#issuecomment-407771537,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACYjwa72feUxazpXCfUS3G0Gs6flzFu4ks5uKH7bgaJpZM4RL0qi
.

[aaayushsingh]

I solved this by manually adding the code from here into my nativescript-angular/platform-common.js file. This will be automatically fixed in future versions of NS I guess. Still leaving this here for someone else who comes across this problem.