How to create class in one es6 module and import it in another?

Question

I have two files: User.js and Login.js. After login is successfull i want to call static logIn method of User class. I have strange behaviour. What am I doing wrong?

File contents User.js:

// user/User.js

// I also tried export default class User
export class User { 
  static logIn (token) {
  }

  static logOut (token) {
  }

  static isAuthorized () {
  }
}

And Login.js:

// login/Login.js

import React from 'react';
import GoogleLogin from 'react-google-login';
// I also tried import User from './../user/User';
// I also tried import {User} from './../user/User';
import * as User from './../user/User';

class Login extends React.Component {

  constructor (props, context) {
    super(props, context);
  }

  responseSuccess (googleUser) {
    const idToken = googleUser.getAuthResponse().id_token;
    User.logIn(idToken);
  }

///

}

export default Login;

When I use import and export this way I get this behaviour:

So, User is an object with property User. This property contains all methods of class User.

Is it possible to somehow export/import class so I will get user class methods in User object?

Now there is only one way to use methods: User.User.logIn().

When you say `import * as from `, if says "take all of the exports from file 'x' and collect them into one object and export that object as ". Should work if you just change your import statement to `import User from './../user/User'` since the class is your default export — m_callens, Feb 02 '17 at 21:17
Yes, it is logical explanation. I understand it. The problem it does not work... I also tried `import User from './../user/User'`, I just added one of the variants there. — Sharikov Vladislav, Feb 02 '17 at 21:35

score 5 · Answer 1 · edited May 23 '17 at 12:01

5

You are using a default export, so with a namespace import (* as User) you'd have to use User.default to access the class.

Instead, use a default import:

import User from './../user/User';

However, your screenshot suggests that you're actually doing a named export with export class User { … }, not a default export. If you want to use that, you'd have to import the name:

import {User} from './../user/User'; // short for {User as User}

That said, you probably shouldn't be using a class consisting of only static methods anyway. Use multiple named exports

export function logIn(token) {
}
export function logOut(token) {
}
export function isAuthorized() {
}

and then use the namespace import

import * as User from './../user/User';

to access them as User.logIn etc.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 02 '17 at 21:17

Bergi

630,263
148
957
1,375

How should I export class? I am getting this at the moment: https://i.gyazo.com/0ef0f54c0cf87699ee638fd7c7f389f3.png. I didn't change export of the class. I tried to export class this ways: `export class User` and `export default class User` – Sharikov Vladislav Feb 02 '17 at 21:20
Yes I was trying different variants and got confused. – Sharikov Vladislav Feb 02 '17 at 21:23
1

I tried `export class User` and `import {User} from './../user/User'`. I am getting `VM16149:1 Uncaught ReferenceError: User is not defined` now. – Sharikov Vladislav Feb 02 '17 at 21:24
That's weird, it should be working. Are you sure the files are loaded in the correct order (no circular references etc)? – Bergi Feb 02 '17 at 21:26
I updated my question with links to the src of the files. Can you check file contents? Actually I didn't think it will be that hard :) I thought I just need something like `import SomeClass from './some/path'` but wow.... – Sharikov Vladislav Feb 02 '17 at 21:30
No idea, looks fine to me. – Bergi Feb 02 '17 at 21:38
Well if u have 3 minutes - can you clone and write `npm install & npm start`? May be the problem is in my env... – Sharikov Vladislav Feb 02 '17 at 21:45

score 1 · Answer 2 · answered Feb 02 '17 at 21:17

1

Since you are using a default export, there is no need to specify an alias via as.

Instead, use the following syntax to import the default export of the module:

import User from './../user/User';

More info in the MDN docs.

answered Feb 02 '17 at 21:17

TimoStaudinger

41,396
16
88
94

I tried this. This doesn't work. How `export` should look like? – Sharikov Vladislav Feb 02 '17 at 21:25
I added links to the github.com. Can you check file contents? Looks weird. – Sharikov Vladislav Feb 02 '17 at 21:31

score 0 · Answer 3 · answered Feb 02 '17 at 21:18

0

import User from './../user/User';

should be enough, you dont have more exported values from that file

answered Feb 02 '17 at 21:18

Przemek Lewandowski

374
1
2
17

How to create class in one es6 module and import it in another?

3 Answers3