📘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

📗 參考

• MakeUseOf ⟩ How to Import and Export Functions in JavaScript