DEV Community

Cover image for Import Named Exports
chantastic
chantastic

Posted on • Originally published at chan.dev on

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay