Over a million developers have joined DZone.

ES6 Nested Imports (Babel + React)

DZone 's Guide to

ES6 Nested Imports (Babel + React)

Here's a quick tip on using the proper module imports in JavaScript ES6 for Babel and ReactJS

· Web Dev Zone ·
Free Resource

With the ES 6 module system, you have a choice of whether to use a single default export:

 export default DefaultObject 

... or potentially many named exports:

 export const NondefaultObject = {} 

You import these slightly differently, but otherwise, they work the same:

import DefaultObject from './DefaultObject'
import {NondefaultObject} from './NondefaultObject'

const App = () => (
    <NondefaultObject />

Where things go awry is when you want to aggregate imports, as per Jack Hsu’s excellent article on Redux application structure.

import * as do from './DefaultObject'
import * as ndo from './NondefaultObject'

const App = () => (
    <do.DefaultObject/>       // Does NOT work
    <ndo.NondefaultObject />  // works
    <do.default>              // works

Why is it so? When you import a default export, the name of the object is actually “default”. Somewhere in the Babel/Redux/React magic factory, somebody is clever enough to use the module name as an alias for its own default export when you use that module name in a JSX tag. However, when you assign that same default export to another value and then try to use that value (as in the import * case), no such magic occurs.

es-6 ,javascript ,front-end ,web development ,react js

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}