Super expression must either be null or a function, not object

Question

I get Super expression must either be null or a function, not object error when I run index.js

I see another post here with similar error message. But looks like that is related to react!

base.js

   export default class Base{
        constructor(title){
            console.log(title);
        }
    }

Class1.js

import * as Base from './base';

export default class Class1 extends Base{
    constructor(title){
        super(title);
    }
}

index.js

import * as Class1 from './class1';
'use strict';

function check() {
    var c = new Class1('from Index.js');
}

check();

.babelrc

{ "presets": [ "es2015", "stage-1" ] }

dependencies

dependencies": {
    "babel-cli": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-syntax-export-extensions": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-register": "^6.24.1"
  }

Please help! Thanks in advance !

Answer 1

You're doing namespace imports (* as …) that create namespace objects in your variables, which are not functions indeed like the error message says. You will want to import the default exports:

import Base from './base';

and

import Class1 from './class1';

Answer 2

When you import, you are importing the entire js file, which is an object. You need to import just the class from your js file.

To use just a class do

import {myMember} from 'my-module';

Which imports just the member called myMember.

You are doing this

import * as myModule from 'my-module';

Which imports all of the members of your file as sub-members of the myModule object.

See Importing in JS (examples from here)