5.0.0 UIEvent is not defined error with NativeScript

[bufke]

ReferenceError: UIEvent is not defined

Reproduction steps (assumes NativeScript and Angular CLI are installed)

1. ng new my-project
2. npm i @angular-devkit/schematics --save-dev
3. npm i ngrx-forms
4. ng add @ngrx/store
5. Add NgrxFormsModule to app.module
6. tns run android

Looking into how to address this. The error does not show in version 4.1.0.

[MrWolfZ]

Hmm, I have been referencing UIEvent for a long time. Maybe due to the TypeScript version bump the UIEvent was removed from the base lib type definitions? One workaround I can think of is to just declare the interface globally yourself.

declare global {
  interface UIEvent {
    target: any
  }
}

[bufke]

Thanks for the fast response. Unfortunately that doesn't solve it. Here's a full stacktrace.

System.err: ReferenceError: UIEvent is not defined
System.err: File: "file:///data/data/org.nativescript.project/files/app/vendor.js, line: 90838, column: 87
System.err: 
System.err: StackTrace: 
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.project/files/app/vendor.js', line: 90838, column: 88
System.err: 	Frame: function:'../node_modules/ngrx-forms/fesm5/ngrx-forms.js', file:'file:///data/data/org.nativescript.project/files/app/vendor.js', line: 90854, column: 2
System.err: 	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 751, column: 30
System.err: 	Frame: function:'fn', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 121, column: 20
System.err: 	Frame: function:'./app/app.module.ts', file:'file:///data/data/org.nativescript.project/files/app/bundle.js', line: 126, column: 68
System.err: 	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 751, column: 30
System.err: 	Frame: function:'fn', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 121, column: 20
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.project/files/app/bundle.js', line: 314, column: 73
System.err: 	Frame: function:'./main.ts', file:'file:///data/data/org.nativescript.project/files/app/bundle.js', line: 384, column: 30
System.err: 	Frame: function:'__webpack_require__', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 751, column: 30
System.err: 	Frame: function:'checkDeferredModules', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 44, column: 23
System.err: 	Frame: function:'webpackJsonpCallback', file:'file:///data/data/org.nativescript.project/files/app/runtime.js', line: 31, column: 19
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.project/files/app/bundle.js', line: 2, column: 57
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.project/files/app/starter.js', line: 3, column: 1
System.err: 	Frame: function:'require', file:'', line: 1, column: 266

The stacktrace is ugly. We can at least see the line in vendor.js it errors in.

Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
        Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["HostListener"])('change', ['$event']),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Function),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [UIEvent]),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:returntype", void 0)
    ], NgrxCheckboxViewAdapter.prototype, "handleInput", null);

[MrWolfZ]

Ah, sorry, this wasn't a TypeScript error but a runtime error. Hmm, then it seems due to the switch to ng-packagr the UIEvent ends up in the output. Looking at it that seems correct even since UIEvent is a constructor function in DOM environments. However, since that function is never used directly but just used in that decorator code, maybe just defining the function globally would fix it.

// maybe global. instead of window. must be used, I'm not sure about NativeScript
window.UIEvent = () => ({})

This code must be executed before the first import of ngrx-forms happens since UIEvent is referenced statically.

I'll look into how I can fix this.

[MrWolfZ]

Alright, I just released version 5.0.1 which removes any reference to UIEvent. That should fix your issue.

[bufke]

I now get ReferenceError: Event is not defined :(

[bufke]

Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
        Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["HostListener"])('submit', ['$event']),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Function),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Event]),
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:returntype", void 0)
    ], NgrxFormDirective.prototype, "onSubmit", null);

Same issue basically. Presumably from here

[MrWolfZ]

Can you please remove that entry from the array manually and test if it works then? I can easily remove that reference as well, but I don't want to go in circles fixing issue after issue but rather all at once.

[bufke]

Sure thing 👍 Thanks again for the help!

[bufke]

See #154