FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Modules & Code Organization

Advanced

import.meta

import.meta exposes metadata about the current module, including its URL in the browser.

console.log(import.meta.url);

const assetUrl = new URL("./icon.svg", import.meta.url);

Modules & Code Organization

import.meta gives a module information about itself.

In browser modules, import.meta.url contains the URL of the current module file.

A common pattern is new URL("./asset.ext", import.meta.url), which creates an asset URL relative to the module file.

Bundlers may add additional import.meta features, but those are tool-specific and should not be confused with browser-standard behavior.

import.meta

Metadata object for the current module.

import.meta.url

URL of the current module in the browser.

Relative assets

new URL can resolve paths relative to the module.

Tool-specific fields

Bundlers may add extra properties.

Examples

Good module code makes dependencies visible instead of magical.

Resolve an asset relative to the module

const iconUrl = new URL("./icons/check.svg", import.meta.url);
icon.src = iconUrl.href;

Hard-coding fragile asset paths

icon.src = "../../assets/icons/check.svg";

// This can break when the module moves.

Code patterns

Reusable examples for quick reference.

These examples focus on imports, exports, module boundaries, on-demand loading and file structure you can use in real projects.

Read module URL

Useful for debugging and relative paths.

console.log(import.meta.url);

Build asset URL

Resolve relative to the module file.

const imageUrl = new URL("./image.png", import.meta.url);

Use href string

URL objects can become strings.

image.src = imageUrl.href;

Avoid assuming bundler fields

Not every environment has the same metadata.

if ("env" in import.meta) {
  console.log("tool-specific metadata");
}

Rules that matter

Organize by responsibility.

A module system only helps when files have clear jobs, small public APIs and predictable import paths.

Use import.meta.url for module-relative paths

It travels with the module file.

Know the environment

Browser, Node and bundlers may differ.

Do not rely on tool-only fields everywhere

import.meta.env is not a browser standard.

Use URL for assets

It avoids brittle string concatenation.

Keep asset imports consistent

Choose a project convention.

Avoid leaking local paths

Only expose URLs meant for the browser.

Production thinking

A project that is easy to navigate is easier to debug, test and grow.

Why does this matter?

Module-relative URLs make code easier to move without breaking asset paths.

Accessibility

Module-resolved assets such as icons still need accessible names or hidden semantics where appropriate.

Production note

Production bundlers may rewrite asset URLs, so use supported patterns for the chosen toolchain.

SEO note

Broken asset paths can hurt visual quality and trust, especially for icons and media in key UI.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Change the relative asset path.
  • Create a URL for a CSS file.
  • Explain why import.meta.env is tool-specific.

Practice assignment

Do this before moving to the next topic.

  1. Read import.meta.url.
  2. Build a relative URL.
  3. Use the URL href.

Try it yourself

Inspect module metadata

Live preview

Self-check

Before you continue, prove that you understand import.meta.

Advanced

If you can explain what a file exports, what it imports and why it exists, the module structure is doing its job.

  1. Can you explain import.meta?
  2. Can you explain import.meta.url?
  3. Can you explain new URL with import.meta.url?
  4. Can you explain tool-specific metadata?
  5. Can you explain why hard-coded paths are fragile?