When to Use Curly Braces For Import

When you start to learn a new library like react, after going through a couple of tutorials and demo projects, you urge to dive into the coding as soon possible. But that brings the risk of spending a lot of time for simple and sometimes hard to see mistakes at first.

I think the error below was one of those types of errors.

/*
Invariant Violation: Element type is invalid: expected a string (for built-in components) 
or a class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in.
*/

While testing how react native navigation work, I created a simple stackNavigator variable with a single screen.

export const AppNav = StackNavigator({
  Home: { screen: HomeScreen },
});

And rendered the navigator in app:

import AppNav from "./app/Navigation/navigation";

export default class App extends Component {
  render() {
    return <AppNav />;
  }
}

The AppNav was exported as a member but we were trying to import it as a default import.

Fix was really simple, all we need to do is to use”Curly Braces” when importing.

import { AppNav } from "./app/Navigation/navigation";

export default class App extends Component {
  render() {
    return <AppNav />;
  }
}

More Tips on import Statement

A component can have zero or more named exports but only one export default.

export default Example

/*export default is used */

export default component1;

Let’s import component1 into another component

/*import  should be without brackets*/

import Component1 from 'component1'

By the way, you can assign any name when importing an export default module.

/*You can assign any name with export default*/

import myApp from 'component1'

/*OR*/

import cmp1 from 'component1'

Named Imports

As we mentioned above, a component can have any number of member exports.

export default component1;

export const myVar = 101

export const anotherVar = 202

export const  lastVar = 303

You can import all three or any of the named exports into your component.

/*Importing  only one named export*/

import { myVar } from 'component1'

/*Importing all 3 named  export*/ 

import { myVar, anotherVar, lastVar } from 'component1'

It is important to note that you have to use the exact same name when importing named exports. If you want to change the name of the imported object, function or class, then use the “as” with import statement for a more convenient alias.

/*importing with a different name*/

import { myVar, anotherVar as secondVar, lastVar as thirdVar } from 'component1'

We have changed the name of only the second and third one in the above example.

It is possible to import both export default and named export in a single import statement.

/*Import default and all named exports on a single line*/

import component1, { myVar, anotherVar, lastVar as X } from 'component1'

We have imported all named exports along with the default export “component1”. Also, we assigned a different name for the last named export. For a more detailed discussion of  import statement ,  you can check out this link.