React Import Multiple Components from a Folder: Why Default Exports Cause 'Curly Braces Required' Error & How to Fix It

Table of Contents#

1. Understanding Exports in React: Default vs. Named
2. The Problem: Importing Multiple Components with Default Exports
3. Why Default Exports Cause the 'Curly Braces Required' Error
4. Solution 1: Convert Default Exports to Named Exports
5. Solution 2: Barrel Exports with index.js
6. Common Pitfalls and Troubleshooting
7. Conclusion
8. References

1. Understanding Exports in React: Default vs. Named#

Before diving into the error, let’s clarify the two types of exports in ES6 modules, as they are the root of the issue.

Default Exports#

A default export is the "primary" export of a file. A module can have only one default export.

Syntax:

// Button.js
const Button = () => <button>Click me</button>;
export default Button; // Default export

Importing a default export:
You can import it with any name (no curly braces required):

import MyButton from './Button'; // Works (name can be arbitrary)

Named Exports#

A named export explicitly exports a variable/function with a specific name. A module can have multiple named exports.

Syntax:

// Card.js
export const Card = () => <div className="card">...</div>; // Named export
export const CardHeader = () => <div className="card-header">...</div>; // Another named export

Importing named exports:
You must use curly braces and match the export name:

import { Card, CardHeader } from './Card'; // Curly braces required

2. The Problem: Importing Multiple Components with Default Exports#

Suppose you have a components folder with multiple default-exported components:

src/
└── components/
    ├── Button.js    (default export)
    ├── Card.js      (default export)
    └── Modal.js     (default export)

You want to import all three components into App.js cleanly:

// App.js (Attempted import)
import { Button, Card, Modal } from './components'; // ❌ Error!

This will throw an error like:
Module './components' has no exported member 'Button'.

3. Why Default Exports Cause the 'Curly Braces Required' Error#

To understand the error, we need to explore how React (via Node.js) resolves imports from folders. When you import from a folder (e.g., ./components), React looks for an index.js file in that folder to determine what to export. If no index.js exists, the import fails.

Even if you do have an index.js, default exports complicate things because:

• A default export is not "named" in the module system. When you export default Button from Button.js, the module’s public API only includes a default property (not Button).
• When importing, React expects named imports (e.g., { Button }) to map to explicitly named exports in the module. Since default exports aren’t named, they can’t be imported with curly braces unless explicitly re-exported.

Example: What Happens Without an index.js?#

If there’s no index.js in ./components, importing from './components' tells React to look for a file named components.js (which doesn’t exist), leading to a resolution error.

Example: What Happens With an Incorrect index.js?#

Suppose you naively add an index.js that imports default exports but doesn’t re-export them properly:

// components/index.js (Incorrect)
import Button from './Button';
import Card from './Card';
import Modal from './Modal';

This index.js imports the components but doesn’t export them. Thus, import { Button } from './components' still fails because index.js has no named exports.

4. Solution 1: Convert Default Exports to Named Exports#

The simplest fix is to replace default exports with named exports in your component files. This allows direct named imports.

Step 1: Update Components to Use Named Exports#

Modify each component file to use export const instead of export default:

// components/Button.js (Named export)
export const Button = () => <button>Click me</button>;

// components/Card.js (Named export)
export const Card = () => <div className="card">...</div>;

Step 2: Import with Curly Braces#

Now you can import the named exports directly (no index.js needed, though an index.js is still recommended for folder imports):

// App.js (Works!)
import { Button, Card } from './components/Button'; // If importing from individual files

Limitation#

This works for importing from individual files, but if you want to import from the folder root (e.g., ./components), you still need an index.js (see Solution 2).

5. Solution 2: Barrel Exports with index.js (Recommended)#

A barrel export (via an index.js file in the components folder) acts as a "central hub" to re-export components. This lets you import multiple components from the folder root cleanly.

Step 1: Create an index.js in the components Folder#

The index.js will re-export components using named re-exports. There are two approaches:

Approach A: Re-export Default Exports as Named Exports#

If your components still use default exports (e.g., export default Button), re-export them with explicit names in index.js:

// components/index.js
export { default as Button } from './Button'; // Re-export Button as a named export
export { default as Card } from './Card';     // Re-export Card as a named export
export { default as Modal } from './Modal';   // Re-export Modal as a named export

Approach B: Re-export All Named Exports (If Using Named Exports)#

If your components already use named exports (e.g., export const Button), use export * to re-export all named exports from each file:

// components/index.js
export * from './Button'; // Re-exports all named exports from Button.js
export * from './Card';   // Re-exports all named exports from Card.js

Step 2: Import from the Folder Root#

Now import from the components folder directly using curly braces:

// App.js (Works!)
import { Button, Card, Modal } from './components'; // Clean folder import

Why This Works#

The index.js re-exports the components as named exports (e.g., Button, Card), so React can resolve import { Button } from './components' by looking up index.js’s named exports.

6. Common Pitfalls and Troubleshooting#

Pitfall 1: Forgetting to Re-export in index.js#

If index.js imports components but doesn’t export them, imports will fail. Always ensure index.js includes export statements.

Pitfall 2: Typos in Export/Import Names#

Named exports are case-sensitive. If you export export const button (lowercase) but import { Button } (uppercase), it will fail.

Pitfall 3: Mixing Default and Named Exports#

Avoid mixing default and named exports in the same file unless necessary. For example:

// components/Button.js (Mixed exports – confusing!)
export default Button;
export const SmallButton = () => <button>Small</button>;

This requires importing with both default and named syntax:

import Button, { SmallButton } from './components/Button'; // Awkward

Troubleshooting Tip: Check the index.js Export Names#

If imports fail, log the exports of ./components to debug:

// App.js
import * as Components from './components';
console.log(Components); // Inspect the exported names in the browser console

7. Conclusion#

The "curly braces required" error when importing multiple React components from a folder is caused by misusing default exports or missing barrel exports (index.js). To fix it:

• Use named exports for components that may be imported alongside others.
• Create an index.js barrel file in component folders to re-export components, enabling clean folder imports like import { Button, Card } from './components'.

By following these patterns, you’ll write more maintainable React code with clearer imports.

8. References#

• MDN: Export Statements
• React Docs: Code-Splitting (Module resolution background)
• Barrel Exports in JavaScript (Best practices for barrel files)