DEV Community

loading...
Cover image for Import Named Exports

Import Named Exports

chantastic profile image Michael Chan Originally published at chan.dev on ・2 min read

By default, expressions and assignments declared inside a module aren't available outside of that module.

// file: string-utils.mjsfunction hype(message) { return `${message.toUpperCase()}!!!`;}
Enter fullscreen mode Exit fullscreen mode

Here, hype is only available to other functions inside string-utils.mjs.

We can expose hype to other modules by prepending the export keyword.

// file: string-utils.mjs- function hype(message) {+ export function hype(message) { return `${message.toUpperCase()}!!!`;}
Enter fullscreen mode Exit fullscreen mode

hype is now a named export from the string-utils module.

Keep in mind that export-ing something doesn't mean it is automatically available throughout the codebase. Every export requires an import.

Import named exports #

Anything one module exports can be imported and used by another module.

import { hype } from "./string-utils.mjs";console.log(hype("moduuuules"));// => MODUUUULES!!!
Enter fullscreen mode Exit fullscreen mode

The syntax we use to access named exports is similar to object destructuring assignment.

let person = { name: "chantastic" };let { name } = person;
Enter fullscreen mode Exit fullscreen mode

We can only import what we can access by name.

So, the import statement below would fail (with our current module):

import { hype, chant /* oops. no chant */ } from "./string-utils.mjs";// SyntaxError:// The requested module './string-utils.mjs' does not provide an export named 'chant'
Enter fullscreen mode Exit fullscreen mode

Import multiple named modules #

We can import as many named exports as we like!

Let's implement and export a chant function:

// file: string-utils.mjsexport function hype(message) { return `${message.toUpperCase()}!!!`;}export function chant(message) { return [...Array(3)].map(() => message).join("! ");}

import { hype, chant } from "./string-utils.mjs";console.log(chant("M"));// => Modules! Modules! Modules!
Enter fullscreen mode Exit fullscreen mode

My take #

Named exports are the module feature I use most.

The major downside of named exports is naming collisions with other modules.
In future posts I'll share a handful of strategies to compensate for and avoid naming collisions of named exports.

Go pro #

This is part of a course I'm creating on modules at lunch.dev.

When live, members get access to this and other courses on React.

Join lunch.dev

Discussion (0)

pic
Editor guide