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.

Practice

1. What is the main purpose of using importmap in Rails 7+?

easy

A. To load JavaScript modules without needing a bundler

B. To compile Ruby code into JavaScript

C. To manage database migrations automatically

D. To style HTML elements with CSS

Solution

1. Step 1: Understand importmap's role in Rails 7+

   Import maps allow Rails apps to load JavaScript modules directly in the browser without bundling tools.

2. Step 2: Compare other options

   Options B, C, and D describe unrelated tasks: compiling Ruby, managing migrations, and styling, which are not importmap's purpose.

3. Final Answer:

   To load JavaScript modules without needing a bundler -> Option A

4. Quick Check:

   Import maps = load JS modules without bundler [OK]

Hint: Import maps = JS modules without bundler [OK]

Common Mistakes:

• Confusing importmap with asset bundlers
• Thinking importmap compiles Ruby code
• Mixing importmap with CSS or database tasks

2. Which command correctly registers a JavaScript module named chart.js using importmap in Rails?

easy

A. rails importmap add chart.js

B. bin/importmap pin chart.js

C. rails importmap pin chart.js

D. importmap pin chart.js

Solution

1. Step 1: Identify the correct command syntax

   The correct command to pin a module in Rails 7+ is bin/importmap pin [module].

2. Step 2: Check other options

   Options B, C, and D are incorrect: B uses an incorrect verb add, C uses invalid rails importmap pin, and D misses the bin/ prefix.

3. Final Answer:

   bin/importmap pin chart.js -> Option B

4. Quick Check:

   Pin module command = bin/importmap pin [name] [OK]

Hint: Use 'bin/importmap pin' to register modules [OK]

Common Mistakes:

• Using 'rails importmap' instead of 'bin/importmap'
• Using 'add' instead of 'pin'
• Omitting 'bin/' prefix in the command

3. Given this Rails view code snippet:

<%= javascript_importmap_tags %>

What does this helper do in a Rails 7+ app using import maps?

medium

A. It generates CSS styles for JavaScript components

B. It compiles JavaScript files into one bundle

C. It removes unused JavaScript from the app

D. It loads all pinned JavaScript modules into the HTML page

Solution

1. Step 1: Understand the helper's purpose

   javascript_importmap_tags inserts script tags to load all pinned JS modules via import maps in the HTML.

2. Step 2: Eliminate incorrect options

   It does not bundle, remove unused code, or generate CSS styles.

3. Final Answer:

   It loads all pinned JavaScript modules into the HTML page -> Option D

4. Quick Check:

   javascript_importmap_tags = load pinned JS modules [OK]

Hint: javascript_importmap_tags loads pinned JS modules [OK]

Common Mistakes:

• Thinking it bundles JS files
• Assuming it cleans unused code
• Confusing it with CSS helpers

4. You run rails importmap pin my_module but your JavaScript module does not load in the browser. What is the most likely mistake?

medium

A. You forgot to add <%= javascript_importmap_tags %> in your layout

B. You used pin instead of add command

C. You need to restart the Rails server after pinning

D. You must compile assets with webpack first

Solution

1. Step 1: Check how import maps load modules

   Pinning registers the module, but javascript_importmap_tags must be in the layout to load scripts.

2. Step 2: Review other options

   You used pin instead of add command is incorrect because pin is the right command. You need to restart the Rails server after pinning is unnecessary; no restart needed. You must compile assets with webpack first is wrong because import maps do not require webpack.

3. Final Answer:

   You forgot to add <%= javascript_importmap_tags %> in your layout -> Option A

4. Quick Check:

   Missing javascript_importmap_tags = no JS load [OK]

Hint: Add javascript_importmap_tags in layout to load modules [OK]

Common Mistakes:

• Not including javascript_importmap_tags in views
• Confusing pin with add command
• Thinking server restart is required
• Assuming webpack is needed with import maps

5. You want to use a third-party JavaScript library hosted on a CDN with import maps in Rails 7+. Which is the correct way to pin it in config/importmap.rb?

hard

A. pin 'library', from: 'https://cdn.example.com/library.js'

B. pin 'library', to: '/assets/library.js'

C. pin 'library', to: 'https://cdn.example.com/library.js'

D. pin 'library', url: 'https://cdn.example.com/library.js'

Solution

1. Step 1: Understand pin syntax for external URLs

   To pin a module from a CDN, use pin 'name', to: 'URL' in config/importmap.rb.

2. Step 2: Check other options

   pin 'library', to: '/assets/library.js' uses a local path, not CDN. Options C and D use incorrect keys from and url which are invalid.

3. Final Answer:

   pin 'library', to: 'https://cdn.example.com/library.js' -> Option C

4. Quick Check:

   Pin CDN module = pin 'name', to: 'URL' [OK]

Hint: Use 'to:' with CDN URL when pinning external modules [OK]

Common Mistakes:

• Using wrong keys like 'from' or 'url'
• Pinning local path instead of CDN URL
• Confusing syntax for pinning external scripts