Ionic2: Runtime Error Cannot read property 'prototype' of undefined

Question

I am using Ionic2 and am getting this error:

Runtime Error
Cannot read property 'prototype' of undefined

Reading here and here, it suggests 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 file, which I have now reverted, but still get the error.

More details:

Error:

main.js:24046Uncaught TypeError: Cannot read property 'prototype' of undefined
    at __extends (main.js:24046)
    at job.ts:26
    at Object.<anonymous> (job.ts:24)
    at __webpack_require__ (bootstrap cdd11c2…:19)
    at Object.<anonymous> (main.js:46012)
    at __webpack_require__ (bootstrap cdd11c2…:19)
    at Object.<anonymous> (personModel.ts:21)
    at __webpack_require__ (bootstrap cdd11c2…:19)
    at Object.<anonymous> (locationModel.ts:11)

Code:

job.ts

import { Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { NavController, NavParams, InfiniteScroll, Content, Platform, Events, AlertController, LoadingController, ViewController, PopoverController } from 'ionic-angular';
import { JobModel } from '../model/jobModel';
import { PersonModel } from '../model/personModel';
import { SubCategoryModel } from '../model/subCategoryModel';
import { LocationModel } from '../model/locationModel';
import { RatingModel } from '../model/ratingModel';
import { ReviewPage } from '../review/review';
import { ChatsPage } from '../chats/chats';
import { CategoryPage } from '../category/category';
import { PersonPage } from '../person/person';
import { MyCameraPage } from '../mycamera/mycamera';
import { JobService } from '../service/jobService';
import { PersonService } from '../service/personService';
import { RatingService } from '../service/ratingService';
import { UtilityService } from '../utils/utilityService';
import { SearchJobsParent } from '../searchjobs/searchjobsParent';
import { MapRangeService } from '../service/mapRangeService';

@Component({
  selector: 'job',
  templateUrl: 'job.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class JobPage extends SearchJobsParent {
  @ViewChild(Content) content: Content;
.....

searchJobsParent.ts

...
@Component({
})
export class SearchJobsParent {
...

ionic info

Your system information:

Cordova CLI:  You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.4.0

Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Not installed

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? — Richard
– Richard, Commented Jan 24, 2017 at 6:07

Richard · Accepted Answer · 2017-04-03 14:07:18Z

1

I solved this by using Composition instead of Inheritance.

You create an instance of the class you have the common functionality in:

myClas.ts

private someCommonClass: SomeCommonClass = null;
    ...
    this.someCommonClass = new SomeCommonClass(platform, ref);

someCommonClass.ts

constructor(platform: Platform)

edited Apr 3, 2017 at 14:07

answered Jan 24, 2017 at 9:15

Richard

8,99534 gold badges128 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Osify Over a year ago

I think, it's just a workaround but we should find the way to use abstraction in typescript...

Mankeomorakort Over a year ago

I have the same issue, but i don't fine the way to use typescript abstraction. any idea please?

Sampath Over a year ago

Can you please tell me how did you solve this issue? may be small code snippet?

Richard Over a year ago

Do not use an extends SomeClass. But rather import SomeClass and call this.someClass.someFunction();

Sampath Over a year ago

Do I need to inject it into the constructor of the subclass or what?

|

Rip Ryness · Accepted Answer · 2017-05-05 12:52:12Z

1

The very first comment here got me thinking right and led me to a solution. My problem was I was trying to import a class into my base class. The imported class wasn't being bundled in the right order. By switching the order of my import statements in app.component.ts I was able to solve the problem.

In app.component.ts:

Wrong

import { ListPage } from '../pages/list/list';
import { LoginPage } from "../pages/login/login";

This was wrong because ListPage extended AppPage (not listed here) which imported LoginPage.

Right

import { LoginPage } from "../pages/login/login";    
import { ListPage } from '../pages/list/list';

answered May 5, 2017 at 12:52

Rip Ryness

6411 gold badge7 silver badges14 bronze badges

Comments

perror · Accepted Answer · 2017-05-05 14:07:11Z

this problem happen because you install Native plugin and this plugin extends from IonicNativePlugin for Example (Base64ToGallery, TextToSpeech, ...). So, this caused in conflict, Iremoved this extends and it is work...

Following this steps for Example to TextToSpeech Plugin:

in this Path YourProjectFolder\node_modules\@ionic-native\text-to-speech
open file index.d.ts

go to declaration to class:

export declare class TextToSpeech  extends IonicNativePlugin{
/**
 * This function speaks
 * @param options {string | TTSOptions} Text to speak or TTSOptions
 * @return {Promise<any>} Returns a promise that resolves when the speaking finishes
 */
speak(options: string | TTSOptions): Promise<any>;
/**
 * Stop any current TTS playback
 * @return {Promise<any>}
 */
stop(): Promise<any>;
}

Delete extends IonicNativePlugin and save.

That is all!

Pang · Accepted Answer · 2019-08-29 06:42:26Z

0

Did anybody try to provide a reference file with the correct order like this:

/// <reference path='SomeCommonClass.ts' />
/// <reference path='TheExtendingClass.ts' />

edited Aug 29, 2019 at 6:42

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Aug 20, 2019 at 12:22

r-hold

1,1309 silver badges30 bronze badges

Collectives™ on Stack Overflow

Ionic2: Runtime Error Cannot read property 'prototype' of undefined

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related