Import maps (Rails 7+) - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you add a new JavaScript package to importmap.rb but forget to pin it?

In a Rails 7 app using import maps, you add a new JavaScript package to config/importmap.rb but do not pin it. What will happen when you try to use it in your JavaScript code?

Ruby on Rails

import { example } from 'new-package'
example()

A The browser will throw a 404 error because the package is not mapped and cannot be found.

B Rails will automatically pin the package at runtime, so it works without errors.

C The package will load from the CDN by default without any configuration needed.

D The JavaScript will silently fail without any error or warning.

💡 Hint

Think about how import maps tell the browser where to find packages.

If a package is not pinned in importmap.rb, the browser does not know where to load it from, causing a 404 error.

📝 Syntax

intermediate

Which importmap.rb pin syntax is correct for pinning a package from a CDN?

Choose the correct way to pin the lodash package from a CDN in config/importmap.rb.

A pin "lodash", to: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"

B pin lodash, url: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"

C pin 'lodash' => 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'

D pin lodash, to: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'

💡 Hint

Look for the correct method signature and keyword arguments.

The correct syntax uses pin "package_name", to: "url" with double quotes and the to: keyword.

🔧 Debug

advanced

Why does this importmap fail to load the local JavaScript file?

Given this config/importmap.rb snippet, why does the browser fail to load custom.js?

Ruby on Rails

pin "custom", to: "app/javascript/custom.js"

A The path should be relative to <code>app/assets/javascripts</code>, not <code>app/javascript</code>.

B The path should start with a slash: "/app/javascript/custom.js".

C Local files must be placed in <code>app/assets/builds</code> and referenced from there.

D The path should be relative to <code>app/javascript</code> without the folder name, just "custom.js".

💡 Hint

Think about how import maps resolve local files relative to the JavaScript root.

Import maps expect local files to be referenced relative to app/javascript. Including the folder name duplicates the path.

❓ state_output

advanced

What is the effect of running bin/importmap json in a Rails 7 app?

After pinning packages in config/importmap.rb, you run bin/importmap json. What does this command do?

A It compiles all JavaScript files into a single bundle for faster loading.

B It outputs the current import map as a JSON object showing all pinned packages and their URLs.

C It clears all pinned packages from the import map.

D It updates the <code>importmap.rb</code> file with new pins from the CDN automatically.

💡 Hint

Consider what a JSON output of an import map would represent.

The command prints the import map as JSON so you can see which packages are pinned and their URLs.

🧠 Conceptual

expert

Why might you choose import maps over bundlers like Webpack in Rails 7?

Which of the following is the strongest reason to prefer import maps instead of bundlers like Webpack in a Rails 7 project?

A Import maps support all modern JavaScript features without any browser compatibility issues.

B Import maps automatically optimize and minify JavaScript for production better than bundlers.

C Import maps allow you to manage JavaScript dependencies without a build step, simplifying setup and deployment.

D Import maps enable server-side rendering of JavaScript components by default.

💡 Hint

Think about what bundlers require compared to import maps.

Import maps let you load JavaScript modules directly in the browser without compiling or bundling, making setup simpler.