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

The browser or Node.js needs to know a file uses ES module syntax before it will allow import/export. In HTML, add type="module" to the script tag; in Node.js, use a .mjs file extension or set "type": "module" in package.json.

What's the difference between a named export and a default export?

A file can have any number of named exports, each imported by matching its exact name in curly braces (or renaming it with 'as'). A file can only have one default export, which can be imported under any name the importing file chooses, without curly braces.

Why split code into modules instead of one big file?

Modules make each file's responsibility explicit, easier to test in isolation, and easier to reuse elsewhere without copy-pasting. They also make dependencies between files clear through import statements, instead of relying on everything sharing one global scope.

JS MASTER CLASS /// MASTER THE ENGINE /// BUILD LOGIC /// ASYNC PATTERNS /// JS MASTER CLASS /// MASTER THE ENGINE ///

Organization in JavaScript | Web Dev - In-Depth Guide

Learn about Organization in this comprehensive JavaScript tutorial for web development. Design scalable applications.

⚡ Total XP: 0|💻 javascript XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

System Hub

Core logic.

Quick Quiz //

What is the primary advantage discussed here?

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

As a JavaScript codebase grows, splitting it into separate files (modules) keeps each piece focused on a single responsibility. This lesson introduces the ES module syntax — using export to expose a function or value from one file and import to bring it into another.

1Organization in JavaScript | Web Dev - In-Depth Guide Part 1

Modular code is cleaner, easier to test, and allows for better collaboration. Each module should have a single responsibility.

—

// utils.js
export const add = (a, b) => a + b;

// app.js
import { add } from './utils.js';

localhost:3000

Terminal
Code executed.

2Step-by-Step Breakdown

Modular code is cleaner, easier to test, and allows for better collaboration. Each module should have a single responsibility.

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Splitting UI Code Into Modules Should Not Split Apart Related ARIA Logic

When a component's markup, its event handlers, and its ARIA attribute updates get spread across different modules without a clear contract between them, it's easy for one file to change without the others staying in sync — silently breaking accessibility. Keep the ARIA-updating logic co-located with (or clearly imported alongside) the interaction logic it corresponds to.

SEO Implications

1
Module Bundling Choices Affect How Much JavaScript a Crawler Must Execute
Poorly organized modules with circular or unnecessary imports can bloat the final bundle a browser (or crawler) has to download and execute before content renders. Well-scoped, single-responsibility modules make it easier for bundlers to tree-shake unused code, keeping the JavaScript payload smaller.

Best Practices

Give Each Module a Single, Clear Responsibility

A file that exports unrelated utilities, API calls, and UI logic all at once becomes hard to test and reuse. Group related exports together (e.g. a dedicated `api.js`, a dedicated `formatters.js`) so each module has one clear reason to change.

Prefer Named Exports for Multiple Values, Default Export for a Module's Main Purpose

Named exports (`export const add = ...`) make it clear exactly what's being imported at the call site and support better auto-import tooling. Reserve a default export for a module whose entire purpose is that one thing, like a single component or class.

Frequent Bugs

THE BUG

`SyntaxError: Cannot use import statement outside a module` when running a script.

THE FIX

ES module syntax (import/export) only works in files the browser or Node.js treats as a module — in the browser, the `<script>` tag needs `type="module"`; in Node.js, the file needs a `.mjs` extension or `"type": "module"` in package.json.

Real-World Examples

Splitting Shared Logic Into a Reusable Utility Module

Several files in a project needed the same date-formatting logic, which was originally copy-pasted in three places. Moving it into a single shared module meant a bug fix only had to happen once.

// formatters.js
export function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// dashboard.js
import { formatDate } from './formatters.js';
console.log(formatDate(new Date()));

Interview Prep

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Mutating arrays while iterating over them

// Wrong
items.forEach((item, index) => {
  if (item === 'remove') items.splice(index, 1);
});

// Correct
const newItems = items.filter(item => item !== 'remove');

The Solution //

Modifying an array's length or contents while looping through it (with a for loop or forEach) can cause elements to be skipped. Use methods like filter() or map() instead.

The Error //

Forgetting to await asynchronous functions

// Wrong
const data = fetch('api/data');
console.log(data.json()); // Error

// Correct
const response = await fetch('api/data');
const data = await response.json();

The Solution //

If a function returns a Promise, you must use 'await' (or .then) to get its resolved value. Otherwise, your variable will hold a Promise object instead of the data.