How do I fix 'Cannot use import statement outside a module' error?

This error occurs when JavaScript doesn't recognize your file as a module. Solutions: 1) In browsers, add type='module' to your script tag, 2) In Node.js, use .mjs extension or add 'type': 'module' to package.json, 3) In Jest/testing, configure your test environment to support ESM.

Why am I getting module resolution errors?

Common causes: 1) Missing file extensions - always include .js in imports, 2) Incorrect relative paths - use ./ or ../ for relative imports, 3) Case sensitivity - filenames must match exactly, 4) Trying to import from node_modules without a bundler, 5) CORS issues when loading from file:// protocol.

How do I debug circular dependencies?

To identify and fix circular dependencies: 1) Use tools like Madge or webpack-bundle-analyzer to visualize the dependency graph, 2) Check for undefined imports at module initialization, 3) Refactor by extracting shared code to a separate module, 4) Use dependency injection patterns, 5) Consider if the circular dependency is actually necessary.

What does 'Uncaught SyntaxError: Unexpected token export' mean?

This error means the browser or runtime doesn't recognize export syntax. Causes: 1) Script tag missing type='module' attribute, 2) Trying to use ESM syntax in a non-module context (like inline scripts without type='module'), 3) In older browsers that don't support ESM. Solution: Always use type='module' for ES Module code.

Debugging ES Modules - ESModules.com

CORS Errors

Error Message:

Cross-origin request blocked: file:///path/to/module.js

✅ Solutions:

Use a local development server (not file://)
Configure CORS headers on the server
Use a dev server like Vite, Live Server, or http-server

Missing File Extension

Error Message:

Failed to resolve module specifier "utils"

❌ Wrong:

import utils from './utils';

✅ Correct:

import utils from './utils.js';

Cannot use import statement outside a module

Error Message:

SyntaxError: Cannot use import statement outside a module

✅ Solutions:

Browser: Add type="module" to script tag
Node.js: Add "type": "module" to package.json
Node.js: Use .mjs file extension

ERR_REQUIRE_ESM

Error Message:

require() of ES Module not supported

You're trying to require() an ES Module. Use import instead:

❌ Wrong:

const module = require('esm-module');

✅ Correct:

import module from 'esm-module';

Debugging Tools

Browser DevTools

Check Network tab for failed requests
Use Sources tab to set breakpoints
Console shows import errors clearly
Application tab shows module graph

Node.js Debugging

# Run with inspector
node --inspect app.js

# Verbose loader output
node --loader-trace app.js

Common Pitfalls Checklist

File extensions: Always include .js extension in imports

Script type: Use type="module" in HTML

CORS: Use a development server, not file:// protocol

Package.json: Add "type": "module" for Node.js

Paths: Use relative (./) or absolute (/) paths

Debugging & Troubleshooting

CORS Errors

Missing File Extension

Cannot use import statement outside a module

ERR_REQUIRE_ESM

Debugging Tools

Browser DevTools

Node.js Debugging

Common Pitfalls Checklist

Related Topics

Continue Learning