CODEWITHSUNDEEP
javascriptimport
Mat
Mat

Reputation: 1011

ES6 import importing undefined

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.

Upvotes: 7

Views: 16622

Answers (1)

Robert Moskal
Robert Moskal

Reputation: 22553

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 {
  // ...
};

Upvotes: 8

Related Questions