Global 'document' polyfill causes crashes when used with some node packages #1144

vcooley · 2017-12-29T15:55:38Z

With 5.0.0, a dependency I was using now causes an exception. Switching back to 4.*.* fixes the issue. In my case I'm using fuzzball, whose default module has a dependency tree with node standard modules that are not available in Nativescript. Instead, I'm using the minified umd version which has worked up until nativescript-angular: 5.0.0 and Angular 5. Here is the stack trace for iOS:

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10fce57b4 -[TNSRuntime executeModule:referredBy:]
2   0x10f7dbc71 main
3   0x11377565d start
JavaScript stack trace:
1   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:5:14902
2   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:5:15068
3   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:5:15147
4   s@file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:693
5   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:741
6   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:1893
7   @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:17113
8   s@file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:693
9   e@file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:861
10  @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:877
11  @file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:159
12  anonymous@file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:1:392
13  evaluate@[native code]
14  moduleEvaluation@[native code]
15  @[native code]
16  promiseReactionJob@[native code]
17  require@[native code]
18  anonymous@file:///app/app.component.js:4:23
19  evaluate@[native code]
20  moduleEvaluation@[native code]
21  @[native code]
22  promiseReactionJob@[native code]
23  require@[native code]
24  anonymous@file:///app/app.module.js:6:30
25  evaluate@[native code]
26  moduleEvaluation@[native code]
27  @[native code]
28  promiseReactionJob@[native code]
29  require@[native code]
30  anonymous@file:///app/main.js:5:27
31  evaluate@[native code]
32  moduleEvaluation@[native code]
33  @[native code]
34  promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/fuzzball/dist/fuzzball.umd.min.js:5:14902: JS ERROR TypeError: doc.createElement is not a function. (In 'doc.createElement("script")', 'doc.createElement' is undefined)

I'm including a sample project whose package.json you can change to the following in order to no longer get this error:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.dependencyerror",
    "tns-ios": {
      "version": "3.4.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.6",
    "@angular/common": "~4.4.6",
    "@angular/compiler": "~4.4.6",
    "@angular/core": "~4.4.6",
    "@angular/forms": "~4.4.6",
    "@angular/http": "~4.4.6",
    "@angular/platform-browser": "~4.4.6",
    "@angular/platform-browser-dynamic": "~4.4.6",
    "@angular/router": "~4.4.6",
    "allow-publish": "^1.0.4",
    "fuzzball": "^0.13.6",
    "nativescript-angular": "~4.4.1",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.2",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  }
}

Finally, here is the unminified version of the block that fails:

if ({}.toString.call(global.process) === "[object process]") {
    installNextTickImplementation()
} else if (canUsePostMessage()) {
    installPostMessageImplementation()
} else if (global.MessageChannel) {
    installMessageChannelImplementation()
} else if (doc && "onreadystatechange" in doc.createElement("script")) {
    installReadyStateChangeImplementation()
} else {
    installSetTimeoutImplementation()
}

Edit:
Attaching project. Also, this error can be fixed by changing the line
else if (doc && "onreadystatechange" in doc.createElement("script"))
to
else if (doc && document.createElement && "onreadystatechange" in doc.createElement("script"))
dependency-error.zip

The text was updated successfully, but these errors were encountered:

sis0k0 · 2018-01-02T09:37:26Z

Hey @vcooley,
In v5.0 of nativescript-angular we had to attach a polyfill of the document object to the global object. Code.
That's because of a code inside Angular animations that uses the document object.
We'll work on removing the polyfill for later versions of the plugin as it obviously causes problems with node packages that try to detect a document object.

NickIliev · 2018-01-02T09:40:05Z

related to #1137

david-quadpro · 2018-01-10T10:38:17Z

Is there a solution / work around?

I am getting the stack trace below. This is the first part, it repeats the same TypeError: document.createElement is not a function several times, each time in reference to rxjs/util/Immediate.js

System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: Frame: function:'', System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: System.err: TypeError: document.createElement is not a function File: "file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/util/Immediate.js, line: 56, column: 68 StackTrace: Frame: function:'ImmediateDefinition.canUseReadyStateChange', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/util/Immediate.js', line: 56, column: 69 Frame: function:'ImmediateDefinition', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/util/Immediate.js', line: 30, column: 27 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/util/Immediate.js', line: 208, column: 21 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/scheduler/AsapAction.js', line: 7, column: 19 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/scheduler/asap.js', line: 2, column: 20 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/observable/SubscribeOnObservable.js', line: 8, column: 14 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/operators/subscribeOn.js', line: 2, column: 31 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/operator/subscribeOn.js', line: 2, column: 21 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/add/operator/subscribeOn.js', line: 3, column: 21 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Rx.js', line: 121, column: 1 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/shared/services/navigation.service.js', line: 5, column: 14 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/shared/services/index.js', line: 6, column: 10 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/shared/components/action-bar.component.js', line: 5, column: 18 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/shared/components/index.js', line: 6, column: 10 Frame: function:'require', file:'', line: 1, column: 266 file:'file:///data/data/com.quadpro.qplusrequest/files/app/shared/index.js', line: 8, column: 10 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/navigation/tabstrip/tabstrip.component.js', line: 5, column: 14 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/navigation/tabstrip/tabstrip.routes.js', line: 4, column: 28 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/navigation/tabstrip/tabstrip.module.js', line: 6, column: 25 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/app.module.js', line: 12, column: 25 Frame: function:'require', file:'', line: 1, column: 266 Frame: function:'', file:'file:///data/data/com.quadpro.qplusrequest/files/app/main.js', line: 5, column: 20 Frame: function:'require', file:'', line: 1, column: 266

My package.json is:
{ "description": "Q+ Requests", "nativescript": { "id": "com.quadpro.qplusrequest", "tns-android": { "version": "3.4.0" }, "tns-ios": { "version": "3.4.0" } }, "dependencies": { "@angular/animations": "~5.0.0", "@angular/common": "~5.0.0", "@angular/compiler": "~5.0.0", "@angular/core": "~5.0.0", "@angular/forms": "~5.0.0", "@angular/http": "~5.0.0", "@angular/platform-browser": "~5.0.0", "@angular/platform-browser-dynamic": "~5.0.0", "@angular/router": "~5.0.0", "everlive-sdk": "^1.9.4", "nativescript-angular": "5.0.0", "nativescript-barcodescanner": "^2.7.4", "nativescript-mapbox": "^3.1.3", "nativescript-pro-ui": "^3.3.0", "nativescript-theme-core": "1.0.4", "reflect-metadata": "0.1.10", "rxjs": "^5.5.0", "tns-core-modules": "3.4.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/compiler-cli": "~5.0.0", "@ngtools/webpack": "~1.8.2", "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "codelyzer": "3.2.2", "copy-webpack-plugin": "~4.0.1", "css-loader": "~0.28.7", "extract-text-webpack-plugin": "~3.0.0", "lazy": "1.0.11", "nativescript-css-loader": "~0.26.0", "nativescript-dev-typescript": "^0.6.0", "nativescript-dev-webpack": "^0.9.0", "nativescript-worker-loader": "~0.8.1", "raw-loader": "~0.5.1", "resolve-url-loader": "~2.1.0", "tslint": "5.8.0", "typescript": "~2.4.2", "webpack": "~3.8.1", "webpack-bundle-analyzer": "^2.8.2", "webpack-sources": "~1.0.1" } }

david-quadpro · 2018-01-10T11:33:32Z

Sorry, I found a import { BehaviorSubject } from "rxjs"; that I changed to import { BehaviorSubject } from "rxjs/BehaviorSubject"; and it now launches. Solution found at #1137 and Unable to create application com.tns.NativeScriptApplication #3290

I then had a problem with Observable.fromPromise. I found here that I was missing import 'rxjs/add/observable/fromPromise';

GeorgeKnap · 2018-01-16T10:34:34Z

I'm getting the same error as @david-quadpro
I've double checked and there is no import from 'rxjs'. I've also tried the tns platform remove android & tns platform add android but no luck.

package.json:

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": {
		"id": "org.nativescript.nsgroceries",
		"tns-android": {
			"version": "3.4.1"
		}
	},
	"dependencies": {
		"@angular/animations": "5.1.3",
		"@angular/common": "5.1.3",
		"@angular/compiler": "5.1.3",
		"@angular/core": "5.1.3",
		"@angular/forms": "5.1.3",
		"@angular/http": "5.1.3",
		"@angular/platform-browser": "5.1.3",
		"@angular/platform-browser-dynamic": "5.1.3",
		"@angular/router": "5.1.3",
		"nativescript-angular": "5.1.0",
		"nativescript-theme-core": "1.0.4",
		"reflect-metadata": "0.1.10",
		"rxjs": "5.5.6",
		"tns-core-modules": "3.4.0",
		"zone.js": "0.8.2"
	},
	"devDependencies": {
		"babel-traverse": "6.4.5",
		"babel-types": "6.4.5",
		"babylon": "6.4.5",
		"lazy": "1.0.11",
		"codelyzer": "4.0.1",
		"nativescript-dev-sass": "1.3.5",
		"nativescript-dev-typescript": "0.6.0",
		"typescript": "2.6.2"
	}
}

david-quadpro · 2018-01-16T10:46:39Z

I spoke to someone yesterday on Slack that had Import { Observable } from "rxjs/Rx". When they changed it to import { Observable } from "rxjs/Observable" it worked. Perhaps you have a variation of the direct rxjs import?

GeorgeKnap · 2018-01-16T10:51:34Z

@david-quadpro That's it. The sample-Groceries tutorial app is using following import inside user.service.ts:
import { Observable } from 'rxjs/Rx';
changing to import { Observable } from 'rxjs/Observable'; makes it work. It makes sense because rxjs/Rx imports the whole package including the Immediate.js file.

Problem solved.
Thanks!

tsonevn · 2018-04-10T08:30:57Z

HI all,
The problem is related to the issue #22093 logged in the angular repository. To remove the polyfill, we should wait for #22093 to be resolved.

BREAKING CHANGES: The `document` object is no longer property of the `global` object. This may cause behavioral changes in some plugin that use the `document` object to determine if they're running in browser context. fixes #1144

NickIliev added the question label Jan 2, 2018

sis0k0 added bug and removed question labels Jan 2, 2018

sis0k0 added this to the 5.x (TBD) milestone Jan 2, 2018

finger563 mentioned this issue Jan 8, 2018

Chart does not respond properly to ObservableArray.splice() when using angular ProgressNS/nativescript-ui-feedback#474

Open

tsonevn assigned sis0k0 Feb 6, 2018

sis0k0 mentioned this issue Feb 8, 2018

Use an injected DOCUMENT instead of the global 'document' object angular/angular#22093

Closed

sis0k0 changed the title ~~New error in dependency with 5.0.0~~ Global 'document' polyfill causes crashes when used with fuzzball Feb 8, 2018

sis0k0 changed the title ~~Global 'document' polyfill causes crashes when used with fuzzball~~ Global 'document' polyfill causes crashes when used with some node packages Feb 8, 2018

tsonevn added the backlog label Apr 10, 2018

vakrilov modified the milestones: 5.x (TBD), 6.1 (TBD) May 30, 2018

sis0k0 mentioned this issue Jun 22, 2018

[Tracking] Angular 6.1 #1398

Closed

2 tasks

sis0k0 mentioned this issue Jul 2, 2018

Angular 6.1-beta.3 support #1410

Merged

sis0k0 closed this as completed in #1410 Jul 3, 2018

ghost removed the bug label Jul 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global 'document' polyfill causes crashes when used with some node packages #1144

Global 'document' polyfill causes crashes when used with some node packages #1144

vcooley commented Dec 29, 2017 •

edited

Loading

sis0k0 commented Jan 2, 2018

NickIliev commented Jan 2, 2018

david-quadpro commented Jan 10, 2018

david-quadpro commented Jan 10, 2018 •

edited

Loading

GeorgeKnap commented Jan 16, 2018

david-quadpro commented Jan 16, 2018

GeorgeKnap commented Jan 16, 2018

tsonevn commented Apr 10, 2018

Global 'document' polyfill causes crashes when used with some node packages #1144

Global 'document' polyfill causes crashes when used with some node packages #1144

Comments

vcooley commented Dec 29, 2017 • edited Loading

sis0k0 commented Jan 2, 2018

NickIliev commented Jan 2, 2018

david-quadpro commented Jan 10, 2018

david-quadpro commented Jan 10, 2018 • edited Loading

GeorgeKnap commented Jan 16, 2018

david-quadpro commented Jan 16, 2018

GeorgeKnap commented Jan 16, 2018

tsonevn commented Apr 10, 2018

vcooley commented Dec 29, 2017 •

edited

Loading

david-quadpro commented Jan 10, 2018 •

edited

Loading