ES Modules — Barrel Files Kill Tree-Shaking

Q: When should I use a default export vs a named export?

Industry standard at TheCodeForge suggests using named exports for utilities and constants because they force consistent naming across the codebase. Use default exports only for the 'Single Responsibility' of a file, like a specific React component. Avoid 'mixing' both in one file as it makes the import syntax cumbersome for other developers.

Q: Can I import a CommonJS module in an ES Module file?

Yes, in Node.js, you can use `import defaultExport from './file.cjs'`. Node will wrap the `module.exports` of the CJS file as the default export of the ESM import. However, you cannot use `require()` inside an ES Module file; you must stick to `import`.

Q: Why do I get 'Uncaught SyntaxError: Cannot use import statement outside a module'?

This happens in the browser when you forget to add `type='module'` to your ` ` tag. Without this attribute, the browser treats the file as a legacy script where 'import' is a reserved word but not a functional command.

Q: Does 'import' copy the value or create a reference?

ES Modules provide 'live bindings.' If a module exports a variable and then changes its value, the importing module sees that change. This is a major difference from CommonJS, which exports a snapshot/copy of the value at the time of the require call.

Q: How do I use dynamic import in Node.js without bundlers?

Dynamic `import()` is supported natively in Node.js 14+. Just call `await import('./module.js')` inside an async function or at the top level if your module is ESM (since ESM supports top-level await). Ensure the file extension is included and the path is relative to the current file (using `import.meta.url` for absolute paths if needed).

Q: What is a barrel file and why is it problematic?

A barrel file is an `index.js` (or similar) that re-exports everything from multiple modules. Example: `export { Button } from './Button'; export { Card } from './Card';`. Problem: bundlers treat barrel as a single entry point and cannot tree-shake individual exports — they include everything. Also, circular dependencies are more likely. Better to import directly from the module file instead of the barrel.

An update added 35KB to your bundle? A barrel file with a default export likely blocked tree-shaking.

Property	ESM	CommonJS	AMD	UMD
Introduced	ES2015 (2015)	2009 (Node.js)	2011 (RequireJS)	2014 (Universal)
Static/Dynamic	Static	Dynamic	Dynamic	Dynamic
Syntax	import / export	require / module.exports	define([...], function)	wrapping pattern
Tree-shakable	Yes	No	No	No
Top-level await	Yes	No	No	No
Browser native	Yes (modern)	No (needs bundler)	Yes (RequireJS)	Yes (AMD or CJS fallback)
Node.js native	Yes (v12+)	Yes (default)	No	No

Common mistakes to avoid

4 patterns

Using `import` without adding `type="module"` to the script tag

Symptom

Browser throws SyntaxError: Cannot use import statement outside a module. App fails to load with no clear stack trace in production because minifiers may swallow the error.

Fix

Add type="module" to the <script> tag. If using a bundler, ensure it outputs in a format that doesn't require the attribute (bundled output usually runs as normal scripts).

Forgetting the file extension in imports when targeting browsers

Symptom

Browser returns a 404 for the import path because the server can't resolve extensionless modules. Node.js may also fail if resolve.extensions doesn't include .js.

Fix

Always include the full file extension in browser imports: import { helper } from './helpers.js'. In bundlers, configure resolve.extensions appropriately. For Node.js ESM, extensions are required unless using experimental-specifier-resolution=node.

Mixing default and named exports in a barrel file

Symptom

Tree-shaking fails, bundle grows. Developers are confused about which syntax to use when importing. Some tools (like ESLint import/export rules) may report false positives.

Fix

Avoid barrel files entirely. If you must use them, export only named exports and avoid default exports in the barrel. Alternatively, export a single default object containing all named exports.

Trying to use `require()` inside an ES Module file

Symptom

Node.js throws ReferenceError: require is not defined because ESM does not have require in the global scope. Some older patterns like const fs = require('fs') stop working.

Fix

Replace require() with import. If you need dynamic behaviour, use await import() instead. For interop, consider using the createRequire function from module module to create a local require function.

INTERVIEW PREP · PRACTICE MODE

Interview Questions on This Topic

Q01SENIOR

Explain 'Tree Shaking' and why ES Modules make it possible while CommonJ...

Q02SENIOR

What is the 'Static Analysis' benefit of ESM over CJS?

Q03SENIOR

How do you simulate `__dirname` in a Node.js ES Module environment?

Q04SENIOR

What happens if two modules have a circular dependency in ESM vs. Common...

Q05SENIOR

Implement a dynamic import loader that retries the network request 3 tim...

Q06SENIOR

Compare 'Default' and 'Named' exports in terms of refactorability in a l...

Q01 of 06SENIOR

Explain 'Tree Shaking' and why ES Modules make it possible while CommonJS makes it difficult.

ANSWER

Tree shaking is dead code elimination that removes unused exports from the final bundle. ES Modules enable it because their import/export statements are static — they appear at the top level and are never conditional. This allows bundlers to statically analyse which exports are actually imported. CommonJS requires() can be dynamic (called inside if-blocks, loops, or functions), so the bundler cannot safely determine which exports are used without executing the code. Therefore, CommonJS modules are included in their entirety.

FAQ · 6 QUESTIONS

Frequently Asked Questions

When should I use a default export vs a named export?

Can I import a CommonJS module in an ES Module file?

Why do I get 'Uncaught SyntaxError: Cannot use import statement outside a module'?

Does 'import' copy the value or create a reference?

How do I use dynamic import in Node.js without bundlers?

What is a barrel file and why is it problematic?

ES Modules — Barrel Files Kill Tree-Shaking

Key takeaways

Common mistakes to avoid

Using `import` without adding `type="module"` to the script tag

Forgetting the file extension in imports when targeting browsers

Mixing default and named exports in a barrel file

Trying to use `require()` inside an ES Module file

Interview Questions on This Topic

Frequently Asked Questions

That's Advanced JS. Mark it forged?