Import maps (Rails 7+) - Step-by-Step Execution

Concept Flow - Import maps (Rails 7+)

Browser requests JS module

↓

Import map lookup

↓

Resolve module URL

↓

Fetch module from URL

↓

Execute module code

↓

Module exports available

↓

Next module import or app runs

The browser uses the import map to find the URL for each JS module, fetches it, runs it, and makes its exports available for the app.

Execution Sample

Ruby on Rails

import { greet } from "./greet.js"
greet()

// greet.js exports a greet function

This code imports a greet function using the import map and calls it.

Execution Table

Step	Action	Module Requested	Import Map Lookup	Resolved URL	Result
1	Import statement runs	"./greet.js"	Look up './greet.js' in import map	"/assets/greet.js"	URL found
2	Browser fetches module	"/assets/greet.js"	N/A	N/A	Module code downloaded
3	Execute module code	"/assets/greet.js"	N/A	N/A	greet function exported
4	Call greet()	N/A	N/A	N/A	greet function runs, prints greeting
5	No more imports	N/A	N/A	N/A	App continues running

💡 All imports resolved and executed, app code runs fully

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
greet	undefined	function greet() {...}	function greet() {...}	function greet() {...}

Key Moments - 2 Insights

Why does the browser need the import map to find './greet.js'?

Because browsers don't know where to find './greet.js' by default, the import map tells it the exact URL to fetch, as shown in step 1 of the execution table.

What happens if the import map does not have an entry for a module?

The browser cannot resolve the module URL, so it fails to fetch and run the module, stopping the app from loading that code. This is implied by the import map lookup step in the table.

Visual Quiz - 3 Questions

Look at the execution table, what is the resolved URL for './greet.js'?

A "/greet.js"

B "./greet.js"

C "/assets/greet.js"

D "/js/greet.js"

💡 Hint

Check the 'Resolved URL' column in step 1 of the execution table.

At which step does the greet function become available to use?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Result' column to see when the module exports are ready.

If the import map entry for './greet.js' was missing, what would happen?

A The browser would fail to resolve and not fetch the module

B The browser would fetch the module from the root URL

C The greet function would still run

D The app would ignore the import and continue

💡 Hint

Refer to the key moment about missing import map entries and step 1 lookup.

Concept Snapshot

Import maps tell the browser where to find JS modules by mapping module names to URLs.
When a module is imported, the browser looks up the URL in the import map.
It fetches and runs the module code, making exports available.
This avoids bundling and lets Rails 7+ apps load JS modules directly.
Missing import map entries cause module load failures.

Full Transcript

Import maps in Rails 7+ let the browser know where to find JavaScript modules by mapping module names to URLs. When the app imports a module like './greet.js', the browser checks the import map to find the exact URL to fetch. It downloads and runs the module code, making its exports available for use. This process repeats for all imports. If the import map lacks an entry for a module, the browser cannot resolve it and the module fails to load, stopping the app from running that code. This approach lets Rails apps load JavaScript modules without bundling, simplifying development.