"TypeError: Cannot read property 'prototype' of undefined" when extends in typescript

Ionic Framework ionic-v3
1

I am using typescript for a somewhat complex ionic2 project.

I have a BasePage which is the base class for all ionic pages. And I have a BaseTabPage extends BasePage. After I create multiple subclass or BaseTabPage, I start to see this error undeterministically:

“TypeError: Cannot read property ‘prototype’ of undefined” in _extends method.

It seems the TS compiler misordered the subclass before the base class so that the this error happens.

Is there any body saw this already and knows how to reslove it?

Big thanks!

2

It seems that this is a TypeScript issue (find more details in this SO answer) which is currently scheduled for 2.1 (which means that it might take few months to more than half an year until it’s ready/resolved) so you could subscribe/vote for it:

3

Thanks! I verified the generated js code, the subclass is indeed decleared before the base class.

This is a pretty serious issue for TS, it means project will start to fail when the size is growing bigger and bigger.

I end up refactoring the project into a much simpler but ugly structure. Hope it could be resolved by MS asap.

4

Yes, I agree, hopefully it’ll get fixed sooner.

5

I encountered the same problem, but everything was working fine before the last ionic-app-scripts update I made (0.0.36->0.0.44).

1 Like
6

I also have the same issue, anything to help us please?

“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@angular/router": “3.1.0”,
"@ionic/storage": “1.1.6”,
"@types/filesaver": “0.0.30”,
"@types/jquery": “2.0.32”,
"@types/lodash": “4.14.36”,
"@types/moment-timezone": “0.2.32”,
“angular2-signaturepad”: “2.0.1”,
“angulartics2”: “1.1.9”,
“chart.js”: “2.3.0”,
“fullcalendar”: “3.0.1”,
“ionic-angular”: “2.0.0-rc.3”,
“ionic-native”: “2.2.6”,
“ionicons”: “3.0.0”,
“jquery”: “3.1.1”,
“json-loader”: “^0.5.4”,
“lodash”: “4.16.3”,
“moment”: “2.15.1”,
“moment-timezone”: “0.5.9”,
“ng2-bootstrap”: “1.1.13”,
“ng2-table”: “1.3.2”,
“ng2-translate”: “3.1.0”,
“primeng”: “1.0.0-rc.5”,
“primeui”: “4.1.15”,
“rxjs”: “5.0.0-beta.12”,
“webpack”: “2.1.0-beta.25”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.45”,
“typescript”: “2.0.10”
}

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v6.5.0
Xcode version: Xcode 8.1 Build version 8B62

7

It seems like a bulletproof way of avoiding this issue is to put each class in its own file.

8

Hi All,

I am getting the same error:

Runtime Error
Cannot read property 'prototype' of undefined

Does anyone have a solution yet?

Reading above, it could be related to the order in which a subclass and baseclass are declared. I am using a baseclass with a subclass. Where do you change the order in which they are declared, is it in the imports? In what file?

Funny thing is my code was working fine, and suddenly started to get this error, even without me changing the base or sub classes. I did make a change to another tys file, which I have now reverted, but still get the error.

9

If I extend the base class, then I get the error. If I don’t extend it, then the error goes away. How are you supposed to extend objects then?

Funny thing is the code in my super and sub classes have not changed since they were last working.

10

Not that you should have any reason to care about my opinion. but I think inheritance is overused in general and an especially bad idea in JavaScript. Can you achieve your goal with composition instead?

2 Likes
11

I could, other classes also inherit from the super class too (common functionality), but I could make use of composition instead. It only mean I need to refractor quite a lot of code.

Good advise, thank you.

1 Like
12

anyone solved this yet? I want to did same thing in ionViewDidload, without base class, how can do this?

13

Please see this: StackOverflow

14

my code error , solved. thanks.

15

@gulullu how did you fix that error? i am facing the same issue.

16

change this code:

let pageName = this.constructor().name;

to:

let pageName = this.constructor.name;

errors was gone.

17

Ahh its happening because im extending providers.