Import Named Exports

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()}!!!`;}

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()}!!!`;}

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!!!

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

let person = { name: "chantastic" };let { name } = person;

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'

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!

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