When trying to extend classes, an error is thrown indicating that the property 'prototype' is undefined

Encountering an issue with extending items, resulting in:

Uncaught TypeError: Cannot read property 'prototype' of undefined

After researching, it seems that items must be defined in a specific order. I have organized them accordingly but still face the error.

This error occurs during runtime in the browser, not at compile time. The files are compiled into one using browserify and tsify.

My entry point main.ts:

import GameSmartWeb from './GameSmartWeb';
window.gs = new GameSmartWeb();

It then references GameSmartWeb.ts which includes a GUI class:

import GUI from './apis/GUI';
export default class GameSmartWeb {
    public get gui(): GUI { return new GUI(); }
}

The GUI class in apis/GUI.ts is structured like this:

export default class GUI extends GameSmartWeb {
    public get rewards(): Rewards { return new Rewards(); }
}

class Rewards extends GUI {
    // Additional methods
}

The browser highlights the error at this line:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); // Error occurs here
};
var GUI = (function (_super) {
    __extends(GUI, _super); // This calls the function
    // More autogenerated code
});

Answer №1

Today, I encountered a similar issue but with a different root cause than what you experienced. Despite this, I will provide an answer for the benefit of future visitors.

The structure of my files was as follows:

item.ts:

export class Item {
    mySpecialFunction() {
        ...
    }
}

index.ts (for smooth reference):


...
export * from './item';
...

other.item.ts:

import { ..., Item, ... } from './index';

export class OtherItem extends Item ... {
    ...
}

Unfortunately, this configuration led to the following error message for me:

Cannot read property 'prototype' of undefined

Resolving the issue required modifying other.item.ts as shown below:

import { ... } from './index';
import { Item } from './item';

export class OtherItem extends Item ... {
    ...
}

Answer №2

Experiencing a similar problem myself, I discovered that the source of the issue lied in the arrangement of class files within the bundle configuration file. By mistakenly placing the derived class file before the base class file, I was able to rectify the issue simply by adjusting their order.

Answer №3

The problem arose due to a mistake in the file order within my compiler. By rearranging the files in the proper sequence, the error was resolved and the JavaScript functions as expected.

Therefore, the correct order in the compiler should be:

'GameSmartWeb',
'GUI'

Answer №4

It was a strange experience for me when attempting to enhance a component that I had imported through webpack from a node_modules package known as angular-dual-listbox. Surprisingly, my initial import using "from 'angular-dual-listbox'" resulted in failure with the error message mentioned above. However, by changing my import statement to 'from 'angular-dual-listbox/index'', everything worked perfectly!

Answer №5

When I encountered this issue, I was utilizing browserify.

  1. The browserify file path was set to browserify/bundle.js
  2. The client.js file path was located at public/js/client.js
  3. The import file path was specified as app.js

As a result, there was a discrepancy in the file paths when importing bundle.js and making changes to client.js before converting it into bundle.js in my case.

Answer №6

I realized that my issue stemmed from forgetting to include the super() method in one of my classes. It's always a good idea to double-check and make sure super is called in every constructor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My SF2 app is experiencing issues with AngularJS integration

I am currently developing a straightforward API using Symfony2 and now I am experimenting with integrating AngularJS into my bundle to visualize the results of my API calls. How can I effectively implement AngularJS? I initiated a bundle via app/console ...

Utilize Material UI's TouchRipple Component to enhance the interactivity of custom elements and components

Within my material-ui application, I have a curated list featuring columns and icon buttons. Upon selecting an item from the list, I desire to incorporate the ripple effect characteristic of Material Design. Although Material UI provides lists with built ...

When you assign the page results from the scrape-it npm to a variable, it will return a Promise with the status of "pending."

I recently downloaded scrape-it from NPM as a dependency and I'm trying to store the results in a variable instead of using a callback function. When I run the code snippet provided in the scrape-it documentation: var myVar = scrapeIt("http://ionicab ...

"Error occurs when passing data back to main thread from a web worker: undefined data received

Hello, I’ve been experimenting with using a web worker to retrieve data and send it back to the main thread. However, I've encountered an issue with my code not working as expected. onmessage = (e) => { console.log(e); if( e.data[0] === &apos ...

Choosing the right option with the GeoPlugin technology

I am implementing the location detection feature using the plugin. I have a dropdown menu of states represented by <select>, and utilizing jQuery, I automatically select the user's detected state. $.getJSON(url, function(data){ var state = ...

Modifying an element within a nested array

I am struggling to create a JavaScript function that can update the "checked" value within an object in an array structured as follows: array:[ { id:1, name:"foo", options: [ {id:"one", checked: false}, {id:"two", checked: true} ] ...

To ascertain whether the mouse is still lingering over the menu

I have a condensed menu construction that unfortunately cannot be changed in HTML, only CSS and JS modifications are possible! $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouse ...

I possess a webpage containing a div element that is loaded dynamically through ajax

One issue I'm facing is with a page containing a div that gets loaded via ajax when a button is clicked. The problem arises when a user tries to refresh the page by pressing F5, as the content of the div gets lost! Is there a way to ensure that when ...

How to target and set focus on dynamically generated input field when the ID is unknown

I am facing an issue with a jQuery/AJAX function that loads HTML form elements from the server. The form fields vary, and I want to set focus on the first available input field after the load is complete. I have tried: $(':input:enabled:visible:firs ...

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

I have a unique service dedicated to managing app configurations class Configuration { get setting() { return dataStore.fetchSetting(); } set setting(value) { dataStore.saveSetting(value); } } This configuration is linked to components t ...

Determine with jQuery whether a URL already contains a query string

When the site is loaded for the first time and a user selects a hospital location from the dropdown menu, the URL should have hos=somelocation as a query string parameter. If the URL already contains other query string parameters like then I need to chec ...

Transforming DayOfYear data in Javascript to utilize with Flot

Attempting to utilize the flot jQuery library for a display, but running into an issue with the X Axis showing dates. The data being received is in DayOfYear format instead: var data = [[192,6.9],[191,49.52],[190,2],[189,0], etc...] Numbers like 192, 19 ...

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

Working with AngularJS, I have a view controller where I initialize a variable called recipesData. Here is the code for the controller: (function() { 'use strict'; angular .module('myApp') .controller('Coo ...

Transferring data from an uploaded excel file to Python using ajax

I currently have a feature that allows users to upload an excel file using the choose file option. Below is the code snippet for this functionality. HTML <div class="col-md-6"> Upload Excel File <input type="file" id="file_upload" class= ...

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

Removing a property from a JSON object when initiating an Ajax request in JavaScript

Looking for guidance on JavaScript and ajax as a beginner. I have a JSON with an output cell that I want to remove: { "cells": [{ "metadata": { "trusted": true, "collapsed": false }, ...

JavaScript function's global variable

My function is not returning the correct value. I suspect it's because the callback is being loaded after the value is returned. This is my code: function hexToBase58(inputNumber) { var output = ""; $.getScript("JavaScript/biginteger.js", f ...

The concept of functions in JavaScript: fact or fiction?

Is there a way to show the message "Yes" or "No" based on the return value of a function without directly using the words true and false, and without utilizing alert? Any suggestions would be greatly appreciated. Thank you. function myFunction { if (Ma ...

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

To dismiss a popup on a map, simply click on any area outside the map

Whenever I interact with a map similar to Google Maps by clicking on various points, a dynamically generated popup appears. However, I am facing an issue where I want to close this popup when clicking outside the map area. Currently, the code I have writte ...