Introduction

In ES modules, curly braces in an import statement mean you are importing a named export. If the module exported a default value, you import it without braces.

That simple rule covers most cases, but developers still trip over it because a module can export both kinds at once, and the import syntax changes depending on which one you want.

The Core Rule

Use curly braces when the thing being imported was exported by name:

1// math.js
2export function add(a, b) {
3  return a + b;
4}
5
6export function subtract(a, b) {
7  return a - b;
8}

1// app.js
2import { add, subtract } from "./math.js";
3
4console.log(add(2, 3));

Do not use curly braces for a default export:

1// logger.js
2export default function log(message) {
3  console.log(message);
4}

1// app.js
2import log from "./logger.js";
3
4log("ready");

That is the main distinction.

Named Exports Use the Exact Exported Name

Named imports must match the exported identifier unless you rename them with as.

// api.js
export const baseUrl = "https://example.com/api";

import { baseUrl } from "./api.js";
console.log(baseUrl);

You can rename a named import like this:

import { baseUrl as apiBaseUrl } from "./api.js";
console.log(apiBaseUrl);

Curly braces are still required because the import is still a named export, just aliased locally.

Default Exports Do Not Use Braces

A default export can be imported with any local name you choose:

1// theme.js
2export default {
3  primary: "#0b5fff",
4  danger: "#cc3344",
5};

import theme from "./theme.js";
console.log(theme.primary);

The name theme is chosen by the importer. It does not have to match a name in the source module.

Modules Can Have Both

A module can export one default value and also export named values:

1// userService.js
2export default class UserService {
3  getAll() {
4    return ["Ada", "Grace"];
5  }
6}
7
8export const VERSION = "1.0";

Then the import combines both forms:

1import UserService, { VERSION } from "./userService.js";
2
3const service = new UserService();
4console.log(service.getAll());
5console.log(VERSION);

The default import comes first, and the named imports stay inside braces.

Namespace Imports Are Different Again

There is also the namespace form:

import * as math from "./math.js";

console.log(math.add(1, 2));

This does not use curly braces because it is not importing one named export directly. It is importing the module namespace object.

A Practical Way to Decide

When reading a module, ask how the export was declared:

• 'export default ... means import without braces'
• 'export const ..., export function ..., or export class ... means import with braces'
• 'export default plus named exports means combine both forms'

If the module documentation shows import React from "react", that is a default import. If it shows import { useState } from "react", useState is a named export.

Common Pitfalls

The most common mistake is using braces around a default export:

import { log } from "./logger.js";

That fails because log was exported as default, not as a named binding.

Another common mistake is dropping braces around a named export:

import add from "./math.js";

That asks for the default export, but math.js only exported named values.

Developers also get confused when bundlers or transpilers show slightly different error messages. The underlying rule is still the same: match the import syntax to the export type.

Finally, remember that CommonJS modules do not always map cleanly to ES module syntax. If you are mixing module systems, read the package documentation instead of guessing from the filename alone.

Summary

• Use curly braces for named exports.
• Do not use curly braces for default exports.
• A module can have one default export and many named exports.
• Use as to rename a named import without changing the need for braces.
• If the import keeps failing, check whether the source module exported a default value or a named one.