JavaScript Re-Export

​

Syntax Variations

​

1. Named Re-exports

// Forward specific named exports exactly as they are
export { foo, bar } from './moduleA.js';

// Forward specific named exports under new identifiers (aliasing)
export { foo as newFoo, bar as newBar } from './moduleA.js';

​

2. Namespace Re-exports

// Forward all named exports from moduleA
export * from './moduleA.js';

// Forward all named exports as a single namespace object (Introduced in ES2020)
export * as moduleANamespace from './moduleA.js';

​

3. Default Re-exports

// Forward the target's default export as this module's default export
export { default } from './moduleA.js';

// Forward the target's default export as a named export
export { default as moduleADefault } from './moduleA.js';

// Forward a target's named export as this module's default export
export { foo as default } from './moduleA.js';

​

Technical Constraints and Behavior

• Scope Isolation: If you write export { foo } from './moduleA.js';, the identifier foo is not declared in the current file. Attempting to console.log(foo) in the forwarding file will result in a ReferenceError.
• Name Collisions: If you use export * from './moduleA.js' and export * from './moduleB.js', and both modules export a binding with the same name, JavaScript will not throw an error immediately. However, a SyntaxError will be thrown when another module attempts to import the conflicted binding from the forwarding module.
• Live Bindings: Like standard exports, re-exports maintain live bindings to the original module. If the value of a re-exported variable changes in the originating module, that change is reflected wherever the re-export is consumed.