ES6 import importing undefined

Question

I have two files in my react app:

/* MyApp/components/my-component.jsx */

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

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

And

/* MyApp/my-app.jsx */

import MyComponent from './components/my-component';

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.

Answer 1

Look in the documentation:

https://developer.mozilla.org/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 './components/my-component';

You need to do this:

import {MyComponent} from './components/my-component';

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

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