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

Question

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.

Possible duplicate of TypeError: Class extends value undefined is not a function or null — gombosg
– gombosg, Commented Mar 6, 2019 at 22:43
I get this same error just trying to run a sfdx command through the terminal. SFDX: Create project won't even work. I've reinstalled just about everything I can thing of; Npm LTS, Node, vscode, and the packages as well as independent installs and nothing seems to solve mine. Don't know if is related other than the message,but just thought I would comment. — user1040975
– user1040975, Commented Oct 24, 2019 at 21:31
https://stackoverflow.com/questions/57409183/how-to-fix-class-extends-value-undefined-is-not-a-constructor-or-null-nodejs/59916833#59916833 — aygunyilmaz
– aygunyilmaz, Commented Jan 26, 2020 at 8:53

bleistift2 · Accepted Answer · 2020-01-16 19:42:56Z

67

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 ./

edited Jan 16, 2020 at 19:42

bleistift2

5375 silver badges17 bronze badges

answered Aug 22, 2019 at 20:10

MBer

2,56424 silver badges34 bronze badges

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

3 Comments

J-Cake Over a year ago

Which is interesting, because I'm running the whole thing through ESBuild and still getting the error :/

MBer Over a year ago

Does ESBuild advertise circle-checking along with its fast bundling/minifying? Circular dependencies will sneak past most project-processing tools that are not designed to analyze a map of the whole file structure.

J-Cake Over a year ago

Maybe, I'm not sure, I've never seen anything in that vicinity. I did notice, however, that the issue came from checking against a class which I didn't define a constructor for. It was defined in it's super class. Implementing it did the trick.

Chris Nielsen · Accepted Answer · 2021-12-02 03:42:23Z

17

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.

edited Dec 2, 2021 at 3:42

Chris Nielsen

14.8k7 gold badges50 silver badges55 bronze badges

answered Jun 10, 2021 at 20:34

Josh Hansen

1,0371 gold badge11 silver badges22 bronze badges

3 Comments

Damien Sawyer Over a year ago

Wow. Brliliant tool. Just knocked it out of the park.

machineghost Feb 13 at 21:14

There's no need to install it globally (-g). You can just install it as a regular old local dependency, specifically a dev dependency (since your app doesn't depend on it), with npm i -D dpdm. Then, to invoke it, simply use npx, eg. npx dpdm file.ts. But however you install it, it is a great tool (and it helped me solve my issue)!

Johnny Rinaldo Apr 2 at 23:08

This gives me an error: Error: No entry files were matched.

ash · Accepted Answer · 2024-10-27 17:07:30Z

6

I was using index.ts to export classes, interfaces, and abstract classes.

In my case, the export order caused issues. If B extends A but the exports in index.ts are arranged like this:

export { B } from 'somewhere';
export { A } from 'somewhere';

It will trigger an error related to A.

To avoid such issues, ensure that dependencies are exported in the correct sequence. In this case, A should come before B:

export { A } from 'somewhere';
export { B } from 'somewhere';

Maintaining the proper export order ensures that all dependencies are correctly resolved.

edited Oct 27, 2024 at 17:07

answered Jul 1, 2022 at 13:06

ash

3,1353 gold badges22 silver badges38 bronze badges

Comments

Darien Creamer · Accepted Answer · 2018-02-04 18:30:41Z

5

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');

answered Feb 4, 2018 at 18:30

Darien Creamer

512 bronze badges

1 Comment

user4874923 Over a year ago

I tried typing in what you said, but I got linter errors saying 'Command' is defined but never used. and Expected an assignment or function call and instead saw an expression.. I changed the line to module.exports.Command = Command and it got rid of the errors, but same issue. I removed the ` = Command` and disabled the linter and still, the same problem mentioned in the question. I don't think its making a difference because, as stated in the question, I am transpiling through Babel.

Joe Morano · Accepted Answer · 2020-09-21 06:10:38Z

4

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.

answered Sep 21, 2020 at 6:10

Joe Morano

1,92310 gold badges60 silver badges124 bronze badges

Comments

HereHere · Accepted Answer · 2020-03-29 14:02:57Z

3

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() {

answered Mar 29, 2020 at 14:02

HereHere

7711 gold badge7 silver badges24 bronze badges

Comments

Remco · Accepted Answer · 2021-01-14 14:33:02Z

1

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 {

answered Jan 14, 2021 at 14:33

Remco

1,9531 gold badge14 silver badges14 bronze badges

Comments

Kutloano Mokgethwa · Accepted Answer · 2022-07-25 09:51:05Z

1

This is an issue with your node version

What i did was to uninstall my node version manager, re installed and used it to install all my node versions , did nvm use to select which one to use , in my case it was 14.17.3 , ran npx react-native init command

That fixed it for me

edited Jul 25, 2022 at 9:51

answered Jul 25, 2022 at 9:49

Kutloano Mokgethwa

112 bronze badges

Comments

aygunyilmaz · Accepted Answer · 2020-01-26 08:56:19Z

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;
};

keithphw · Accepted Answer · 2020-02-07 01:32:32Z

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>

Niek Vandael · Accepted Answer · 2021-04-30 08:32:16Z

0

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
      ],

answered Apr 30, 2021 at 8:32

Niek Vandael

3941 gold badge3 silver badges15 bronze badges

Comments

Thad Guidry · Accepted Answer · 2022-01-28 22:14:04Z

0

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.

answered Jan 28, 2022 at 22:14

Thad Guidry

6085 silver badges9 bronze badges

Comments

Chris Kooken · Accepted Answer · 2022-06-21 15:35:26Z

0

I got this error when I upgraded to Angular 13 from 12. ng update did not update webpack to v5 and their upgrade checklist doesn't mention it being a retirement. Once I upgraded webpack to latest, the error went away for me.

answered Jun 21, 2022 at 15:35

Chris Kooken

34.1k15 gold badges93 silver badges130 bronze badges

Comments

Ganesh · Accepted Answer · 2023-02-01 15:31:11Z

0

Anyone is facing this issue even though there is no circular dependency and using webpack then please add target:node in your webpack config file.

answered Feb 1, 2023 at 15:31

Ganesh

3123 silver badges5 bronze badges

1 Comment

Ganesh Over a year ago

Other options for webpack target - webpack.js.org/configuration/target

Collectives™ on Stack Overflow

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

14 Answers 14

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related