javascript - ES6 import importing undefined

I have two files in my react app:

/* MyApp/ponents/my-ponent.jsx */

export class MyComponent extends React.Component {
  // ...
};

console.log(MyComponent); // (1)

And

/* MyApp/my-app.jsx */

import MyComponent from './ponents/my-ponent';

console.log(MyComponent); // (2)

console.log number (1) gives me this: function MyComponent(props, context) {.... But console.log number (2) gives me undefined.

What am I doing wrong? It seems pretty straightforward and yet won't work.

I have two files in my react app:

/* MyApp/ponents/my-ponent.jsx */

export class MyComponent extends React.Component {
  // ...
};

console.log(MyComponent); // (1)

And

/* MyApp/my-app.jsx */

import MyComponent from './ponents/my-ponent';

console.log(MyComponent); // (2)

console.log number (1) gives me this: function MyComponent(props, context) {.... But console.log number (2) gives me undefined.

What am I doing wrong? It seems pretty straightforward and yet won't work.

Share Improve this question asked Jan 1, 2017 at 15:41 Mat 1,0112 gold badges12 silver badges29 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

Look in the documentation:

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/import

The following form of the import statement is only for a module with a default export.

import MyComponent from './ponents/my-ponent';

You need to do this:

import {MyComponent} from './ponents/my-ponent';

Or export your class as the default, then the import will work as you wrote it:

export default class MyComponent extends React.Component {
  // ...
};