I am trying to import a static member of a class into a file by just using standard import syntax. To give context:

Destructuring works on the static method of a class:

class Person {
    static walk() {
        console.log('Walking');
    }
}

let {walk} = Person;
console.log(walk); // walk function

However, I thought imports behaved like destructuring assignments. If that's true, then I would expect the following to work. But, when I attempt to import the walk method, it just es back as undefined:

Destructuring through imports, why doesn't it work?

person.js

export default class Person {
    static walk() {
        console.log('Walking');
    }
}

walker.js

import {walk} from './person';
console.log(walk); // undefined

Since this doesn't seem to work, how can I import a static method from a class to another module?

I am trying to import a static member of a class into a file by just using standard import syntax. To give context:

Destructuring works on the static method of a class:

class Person {
    static walk() {
        console.log('Walking');
    }
}

let {walk} = Person;
console.log(walk); // walk function

However, I thought imports behaved like destructuring assignments. If that's true, then I would expect the following to work. But, when I attempt to import the walk method, it just es back as undefined:

Destructuring through imports, why doesn't it work?

person.js

export default class Person {
    static walk() {
        console.log('Walking');
    }
}

walker.js

import {walk} from './person';
console.log(walk); // undefined

Since this doesn't seem to work, how can I import a static method from a class to another module?

• javascript
• ecmascript-6
• babeljs

• @Derek朕會功夫, yeah, doing the imports feels like it falls under that mon practice, but for some reason, when I attempt import just the static method, I always get undefined – KevBot Commented Aug 11, 2017 at 16:44
• After some research it seems you are using export default which is different than what I was talking about. – Derek 朕會功夫 Commented Aug 11, 2017 at 16:50
• 1 Generally if you don't need to import the whole constructor, you might as well export the function as a named export instead of making it static, then you can import it like you want to. I see the usecases for static methods as pretty minimal much of the time. – loganfsmyth Commented Aug 11, 2017 at 17:15

2 Answers 2

export default can be mixed with normal exports in ES6. For example :

// module-a.js
export default a = 1;
export const b = 2;

// module-b.js
import a, { b } from "./module-a";
a === 1;
b === 2;

This means that the import brackets are not the same as a destructor assignment.

What you want to achieve is actually not possible in the ES6 specs. Best way to do it, would be to use the destructuring after your import

import Person from "./person";
const { walk } = Person;

The syntax you are using is actually a named import, not a destructuring assignment, although they look similar. There is no destructuring import in ES6. All you can do is to add a destructuring assignment to the next line, but keep in mind that this will break when the imports are cyclic.

import Person from './person';
const { walk } = Person;
console.log(walk);