Modules: Imports and Exports

Named vs. Default Exports

// Named export — a file can have multiple named exports
export const MAX_ITEMS = 50;

// Default export — a file can have exactly ONE default export
export default class MyComponent extends LightningElement { }

Every LWC .js file has exactly one export default — its component class — following the exact convention you've already seen in every earlier lesson's code.

Importing from LWC's Own Modules

import { LightningElement, api, track } from 'lwc';

This is the literal first line of most LWC component files — a named import pulling specific pieces (the base class and decorators) out of the lwc module.

Importing Static Resources and Apex Methods

import COMPANY_LOGO from '@salesforce/resourceUrl/companyLogo';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

LWC extends the standard import syntax with special module paths — @salesforce/resourceUrl/... for static resources (Module 3) and @salesforce/apex/... for calling Apex methods (the full mechanics are Module 7's focus).

Why This Matters in Real Projects

ES Modules are one of the four Web Component pillars introduced in Module 1 — this isn't LWC inventing its own dependency system, it's the platform building directly on a real browser standard, and it's the exact mechanism gluing every file in a real project together.

Exercise

Write the import statement to bring in LightningElement and the api decorator from the lwc module.

Show hint

Named imports are wrapped in curly braces.

JAVASCRIPT

Exercise

Challenge: explain, as a comment, why a single .js file can have many named exports but only one default export.

Show hint

Think about what "default" implies when importing.

JAVASCRIPT

My Notes

Log in to keep private notes on this lesson.

Questions about this lesson

No questions yet — be the first to ask.

Log in to ask a question about this lesson.