Understanding importmap-rails

This article was originally published on Rails Designer If you've worked with modern JavaScript, you're familiar with ES modules and import statements. Rails apps can use esbuild (or vite or bun) for this, but the default option (Rails way) is importmap-rails . It lets you write import { Controller } from "@hotwired/stimulus" without any build step at all. Ever thought about how this works? Import maps, just a web standard Import maps are a web standard that tells browsers how to resolve bare module specifiers. A bare module specifier looks like import React from "react" , which isn't valid ESM on its own. The browser needs an absolute path ( /assets/react.js ), relative path ( ./react.js ), or HTTP URL ( https://cdn.example.com/react.js ). Import maps provide the translation: <script type= "importmap" > { " imports " : { " application " : " /assets/application-abc123.js " , " @hotwired/stimulus " : " /assets/stimulus.min-def456.js " , " controllers/application " : " /assets/controller