Issue at runtime: The super expression should be either null or a function, not undefined

Currently diving into ES6 and encountered this error right at the beginning:

Super expression must either be null or a function, not undefined.
I'm puzzled about where my mistake lies, any assistance would be highly appreciated.

main.js

'use strict'

import Backbone from 'exoskeleton';
import App from './views/App';


var onDOMReady = () => {
    console.log('inside dom ready');
    window.app = new App();
}

if(document.readyState === 'complete' || document.readyState === 'interactive' || document.readyState === 'loaded' ) {
    onDOMReady();
} else {
    document.addEventListener('DOMContentLoaded', onDOMReady);
}

App.js

'use strict'

import Backbone from 'exoskeleton';

class App extends Backbone.View {

    initialize () {
        console.log('App: Init');
    }

    render () {
        console.log('App: Render');
    }

}

export default App;

Answer №1

The reason for the error occurring was due to a circular import structure in my code. One module was importing another, and vice versa.

Answer №2

Backbone.View might not be defined in your particular scenario. The issue arises from the following code snippet:

if (typeof parent !== "function" && parent !== null) {
  throw new TypeError("The super expression must be either null or a function, not " + typeof parent);
}

Answer №3

The issue at hand stemmed from my use of

import { EditForm } from '../EditForm'

instead of

import EditForm from '../EditForm'

To compound the problem, the error message pointed to a completely unrelated component that had not been touched in weeks. This definitely caused me some frustration. It's important to reflect on recent changes when troubleshooting, as often the error lies there.

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

Is it possible for Nuxtjs/apollo to make apollo wait for other requests before initiating the query?

Is there a way to have Apollo wait for the result of one request to a third party before making either of two queries? Or should I manually add the appropriate query to Apollo after receiving the results? ...

What is the method for smoothly transitioning the vertical flip of an image within its current position using CSS?

Can someone help me figure out how to smoothly flip my image vertically using rotateX after a few minutes at its center position? The image is flipping, but not on its actual center. It seems to be rotating from a point above the image. I've tried adj ...

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

Node and Angular Error: The specified file or directory does not exist

I have been using the tutorial from scotch.io to build my first node and angular application. I encountered a common issue with relative paths online resulting in the error message Error: ENOENT: no such file or directory. However, after following the tuto ...

Encountered an error while attempting to access the 'type' property of undefined within the Redux store for an action defined in an external package

In my quest to expand my knowledge of React (coming from an ASP.NET background), I encountered a challenge. I have multiple React applications where I intend to utilize common UI components, so I decided to extract these into a separate npm package. This a ...

In the realm of yup Schema validation, it is deemed necessary that either all fields be required or none at all, should any single field contain non

Scenario: I have 4 input fields that need to be validated using Yup validation schema. If the user enters a value in any of the fields, then the other 3 fields must also be filled out. If the user leaves all 4 fields empty, then none of the fields ar ...

Can Selenium in JavaScript be used to retrieve child elements from a webpage?

I've been struggling to adapt my JavaScript script for use with Selenium (also in JavaScript). Despite numerous attempts, I haven't been able to find a solution. I've attached an image to better explain my question await chromeDriver.findEle ...

What causes the issue of the 'MERGE' statement in Node.js resulting in the creation of duplicate nodes in Neo4j?

Currently tackling a Node.js project involving the creation of nodes in Neo4j using the 'MERGE' statement. Despite employing 'MERGE' to prevent duplicate nodes, duplicates are still being generated at times. Extensive searches through ...

Tips for sending information to a JavaScript variable through AJAX requests

Hello there, I'm currently working on a project that involves posting data stored in a JavaScript variable using AJAX. Can anyone assist me with the correct syntax for this process? <div class="container-fluid"> <div class="card shadow m ...

Sending information from React JS to MongoDB

I am currently facing a challenge in sending data from the front-end (react js) to the back-end (node js), and then to a mongodb database for storage. While I have successfully called the server with the data, I am encountering an issue when attempting to ...

Tips for testing an API that relies on an external library such as "<script src="http://stripe[...]"

Currently, I am working on unit testing an API call to verify it has been executed with the correct properties. The API call is reliant on Stripe's external library that is connected to the window through index.html src="http://stripe[...]". However, ...

A role requiring coordinates x, y, and z with significant values

http://jsfiddle.net/eho5g2go/ var offset=10000000; ... camera.position.set(offset,offset,400); mesh.position.set(offset-300,offset,0); camera.lookAt(mesh.position); ... animate(); The "offset" variable is crucial for determining the camera and mesh p ...

Trying out an ajax request in React by clicking a button

I have been working on testing a simple Login component that involves filling out an email and password, then clicking a button to log in. When the login button is clicked, it triggers an ajax post request using axios. I am interested in testing both happy ...

Utilizing jQuery's then() method to display HTML and JSON outputs from printing operations

Currently, I am in the process of mastering jquery deferreds. When working with html on jsfiddle, I receive an object that contains two lines when printed within the then() statement: "success" and the html returned by the ajax request. For instance, upo ...

What is the best way to handle multiple JSON data using jQuery?

Understanding how to utilize jquery for parsing simple json is a valuable skill. json { "Symbol": "AAL.L", "Name": "ANGLO AMERICAN", "Last": "3061.50", "Date": "7/26/2011", "Time": "11:35am", "Change": "+3 ...

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

What is the best way to display an error message when a necessary field is left empty?

I am currently utilizing a plugin to validate my form. My goal is to display an error message on the button when clicked, as all fields in my form are required and need validation. Despite attempting the code below, it hasn't been successful: <Fo ...

What is the better choice in NodeJS: using "return cb(..)" or first calling cb(..) and then returning?

Forgive me if this sounds like a silly question, but I'm curious about the implications of something: Whenever I encounter an error or need to complete a function flow, I follow certain instructions such as: if(err) { cb(err); // or for exampl ...

When using Node.js, the process.exit() function will not terminate if there is an open createReadStream

My program interacts with Asterisk using EAGI, where Asterisk communicates with my Node.js application by sending data via STDIN and receiving commands via STDOUT. When a user ends the call, the Node.js process receives a SIGHUP signal for clean terminatio ...

Encountering the error message "require is not defined" in the browser while utilizing gulp-browserify for my React.js modules

I am currently working on using gulp-browserify for creating a bundle.js file that will be utilized in the client's browser to initiate rendering of React components. Below is my App.js file: /** @jsx React.DOM */ var React = require('react&apo ...