'TypeError: Class extends value undefined is not a constructor or null

This problem has been causing me to lose my sanity for the last couple of days.

Here is my directory structure:

[src]
|- cmds/
|  |- Gh.js
|  \- Help.js
|- commands.js
|...

I am trying to import a class exported by commands.js into Help.js and Gh.js (and any other files I might add in the future). However, I keep getting an error:

class Gh extends _commands.Command {
                           ^
TypeError: Class extends value undefined is not a constructor or null

All of the files are being transpiled using Babel, with env set to "node": "current" and using the wildcard package. I have tried to set it for "browser" to see if it was an issue of it being too "advanced", but I got a different error about super functions (or something), which I assume is the same issue.

Here is the class being exported from commands.js:

export class Command {
  constructor (msg) {
    this.id = msg.author.id
    this.msg = msg
  }
  action () {}
  get data () {
    return readData().user[this.id]
  }
  updateUserData (key, val) {
    updateUserData(this.id, key, val)
  }
  sendMsg (data) {
    sendMsg(this.msg, data)
  } 
}

...and here is cmds/Gh.js, one of the files that I am trying to import Command into:

import {Command} from '../commands'

export class Gh extends Command {
  constructor (msg) {
    super(msg)
    this.desc = 'Returns GitHub repository link and exits'
  }
  action () {
    this.sendMsg('GitHub link: https://github.com/owm111/knife-wife')
  }
}

I tried putting Command into both of the cmds/, and they worked perfectly. However, when moving it back into commands.js, it broke again. I tried changing the path it is importing from from ../commands to ./../commands, ../commands.js, ./../commands.js; none worked. I moving commands.js into cmds/, still broke. I tried to console.log(Command) in both of the cmds/, but they both returned undefined.

All of this makes it look like is a problem with importing, but I cannot figure out what for the life of me. Please help.

javascript node.js

Solution 1:^[1]

If anyone else sees this error, the first thing to look for is circular dependencies. Import file A into B, B into some other file C, and so on. If any of C through Z is imported into A, then JS will not be able to ensure that a file is defined at the time that another file needs it (and will not try to go back and fill in the blanks later).

This was likely the case here, since there was clearly other code not posted, and it only appeared when file dependencies were introduced. The problem exists regardless of file structure: the only structure guaranteed to avoid it is a single giant JS file. The solution is to ensure a strict tree structure of relationships between classes, and use factory methods or alternative communications like emitters to keep the couplings loose.

If you have more than a couple import / require statements, I recommend periodically running a checker like Madge to find and optionally visualize any loops before they become hard to undo.

npm install --save-dev madge
node_modules/madge/bin/cli.js --warning --circular --extensions js ./

Solution 2:^[2]

This is just a simple fix for node.js. Remove export from your class and at the bottom of your file put this in it.

module.exports.Command;

Now if you want to use the command class anywhere you just need to put this in each file where you would like to use it.

var { Command } = require('Command.js');

Solution 3:^[3]

In my case, I made the dumb mistake of putting parentheses after extending React.Component like this:

class Classname extend React.Component() {
    ...

Removing the parentheses fixed the error.

Solution 4:^[4]

As others have mentioned, this results from circular dependencies. I tried for hours to resolve it. Ultimately it was a tool called dpdm that worked wonders for me, finding 27 cycles and quickly leading to resolution. (I only had to solve a couple of those before the rest resolved as well.)

yarn global add dpdm or npm i -g dpdm

Then dpdm file.js or dpdm file.ts

In my case this found a large number of cycles that Madge and manual inspection had failed to reveal. Great tool.

Solution 5:^[5]

In my case: I was importing a non-existing class:

Counter.js:

import React, { Compontent } from 'react';

class Counter extends Compontent {

App.js:

import React from 'react';
import Counter from './components/Counter';

function App() {

Solution 6:^[6]

Another cause can be that you use the following syntax (after copying a class from a declaration file (xxxx.d.ts) -> xxxx.ts

export declare abstract class Something {

should be (of course):

export abstract class Something {

Solution 7:^[7]

I got this error that "Sequelize TypeError: Class extends value undefined is not a constructor or null, NodeJS" and solved it using that. If you have the same error, you can use the following solution that I've tried to explain it in code.

for example:

module.exports = (sequelize, DataTypes) => {

    // Modeling a table: Inheritance
    class Todo extends sequelize.Model {} // (!) Error

    // if you want to use the above line, add the following line to "lib\sequelize.js file
    // Sequelize.prototype.Model = Model; // add this line here

    class Example extends sequelize.Sequelize.Model { }

    Example.init({
        title: DataTypes.STRING,
        description: DataTypes.STRING,
        status: DataTypes.BOOLEAN
    }, {
        sequelize,
        modelName: 'todo',
        timestamps: true
    });

    return Example;
};

Solution 8:^[8]

For people getting this error when using JSweet java to javascript transpiler, I was able to fix it by enabling the 'bundle' option, mentioned here:

Bundle up all the generated code in a single file, which can be used in the browser. The bundle files are called 'bundle.ts', 'bundle.d.ts', or 'bundle.js' depending on the kind of generated code. NOTE: bundles are not compatible with any module kind other than 'none'.

This is part of my POM which contains the 'bundle true' addition:

<plugin>
                <groupId>org.jsweet</groupId>
                <artifactId>jsweet-maven-plugin</artifactId>
                <version>${jsweet.transpiler.version}</version>
                <configuration>
                    <verbose>true</verbose>
                    <tsOut>target/ts</tsOut>
                    <outDir>target/js</outDir>
                    <candiesJsOut>webapp</candiesJsOut>
                    <targetVersion>ES6</targetVersion>
                    <module>none</module>
                    <moduleResolution>classic</moduleResolution>
                    <bundle>true</bundle>
                </configuration>
                <executions>
                    <execution>
                        <id>generate-js</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>jsweet</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

Then re-run 'mvn generate-sources', and make sure that you change the index.html file to load the new bundle.js file:

<html>
<head>
<link rel="icon" type="image/png" href="logo.png">
<link rel="shortcut icon" href="logo.png">
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>

<body>
    <p>Test page</p>
    <p id="target"></p>
    <script type="text/javascript" src="../webapp/j4ts-0.7.0-SNAPSHOT/bundle.js"></script>
    <script type="text/javascript" src="../target/js/bundle.js"></script>
</body>
</html>

Solution 9:^[9]

I got this error on Angular "class extends value undefined is not a constructor or null" when running cypress and resolved it by changing the compiler options is tsconfig.json.

from:

"compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "paths": {
      "*": [
        "./node_modules/*"            <== throws error
      ],

to:

  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "paths": {
      "*": [
        "./node_modules/"              <== correct
      ],

Solution 10:^[10]

Another common cause of this error is if you installed Node.js into an already existing folding of an older installation of Node.js. Removing and reinstalling Node.js fixes that issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bleistift2
Solution 2	Darien Creamer
Solution 3	Joe Morano
Solution 4	Chris Nielsen
Solution 5	HereHere
Solution 6	Remco
Solution 7	aygunyilmaz
Solution 8
Solution 9	Niek Vandael
Solution 10	Thad Guidry

'TypeError: Class extends value undefined is not a constructor or null

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]