How to import and export components using React + ES6 + webpack?

Question

I play with React and ES6 using babel and webpack . I want to create several components in different files, import them into one file and link them to webpack

Let's say I have several such components:

my-navbar.jsx

 import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } 

main page.jsx

 import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> ... ); } } ReactDOM.render( <MyPage />, document.getElementById('container') ); 

Using webpack and following their tutorial, I have main.js :

 import MyPage from './main-page.jsx'; 

After creating the project and starting it, I get the following error in the browser console:

 Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`. 

What am I doing wrong? How to import and export my components?

Answer 1

Try exporting your components by default :

 import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export default class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } 

by default, you are expressing that you will be a member of this module, which will be imported unless a specific member name is specified. You can also express that you want to import a specific MyNavbar member by doing this: import {MyNavbar} from './comp/my-navbar.jsx'; in this case, the default is not required

Answer 2

Combining components with curly braces if the default export is not performed:

 import {MyNavbar} from './comp/my-navbar.jsx'; 

or import several components from a file with one module

 import {MyNavbar1, MyNavbar2} from './module'; 

Answer 3

To export a single component in ES6, you can use export default as follows:

 class MyClass extends Component { ... } export default MyClass; 

And now the following syntax is used to import this module:

 import MyClass from './MyClass.react' 

If you want to export several components from one file, the declaration will look something like this:

 export class MyClass1 extends Component { ... } export class MyClass2 extends Component { ... } 

And now you can use the following syntax to import these files:

 import {MyClass1, MyClass2} from './MyClass.react' 

Answer 4

MDN has really good documentation for all the new ways to import and export modules - it's ES 6 Import-MDN . A brief description of it in relation to your question, which you could do:

• The component that you exported as the default component that this module exported is export default class MyNavbar extends React.Component { : export default class MyNavbar extends React.Component { , and therefore when importing "MyNavbar" you do not need to put curly braces around it: import MyNavbar from './comp/my-navbar.jsx'; . Without putting curly braces around the import, although it tells the document that this component has been declared as "default export". If this is not the case, you will get an error (like you).

• If you do not want to declare your "MyNavbar" as the default export when exporting: export class MyNavbar extends React.Component { , you will have to wrap your import "MyNavbar" in braces: import {MyNavbar} from './comp/my-navbar.jsx';

I think that since you had only one component in your file. / comp / my -navbar.jsx, it's cool to make it export by default. If you had more components, such as MyNavbar1, MyNavbar2, MyNavbar3, then I would not do them by default and import the selected components of the module when the module did not declare a single default thing that you can use: import {foo, bar} from "my-module"; where foo and bar are multiple members of your module.

Having definitely read the MDN document, it has good examples for syntax. Hope this helps with a little more explanation for those who want to play with ES 6 and import / export components in React.