📘default export

JS ⟩ module ⟩ ES ⟩ export ⟩ export default

export default is used if only one variable is being exported from a file, also used to create a fallback value for a file or module.

unlike CommonJS, default export in ES module cannot be destructured❗️ 👉 example：es module

// "default export" cannot be destructured
import { name } from './default_export.js';    // ⛔ error
//       ^^^^
// ⛔ SyntaxError: 
//    The requested module './default_export.js' 
//    does not provide an export named 'name'

export default is imported differently,

there are no curly braces around the imported value.
imported name can be different from the default export name.

replit：export default

// 📁 module.js
export default A;        // ⭐️ export default

// ⭐️ import without `{}` ( not `{B}`❗️)
import B from "./module.js";    // ⭐️ use nay name of your choice
import defaultExport, {otherExport, ...} from "./module.js";

another example：es module

// ⭐️ import "named export"
import { pi } from './named_export.js';

// ⭐️ import "default export"
import who from './default_export.js';    // OK

// ⭐️ "default export" cannot be destructured
//
//     import { name } from './default_export.js';    // ⛔ error
//              ^^^^
// ⛔ SyntaxError: 
//    The requested module './default_export.js' 
//    does not provide an export named 'name'

📁 named_export.js

const pi = Math.PI;
export { pi };        // ⭐️ named export

📁 default_export.js

const joy = {
    name: 'Joy',
    age: 17,
};

export default joy;    // ⭐️ default export

Previousexport Nextnamed export

Last updated 2 years ago

Was this helpful?