How to Migrate Webpacker to Importmap in Rails

By USEO Engineering Team January 9, 2026

BLUF (Bottom Line Up Front): Webpacker is officially retired and represents a massive maintenance burden due to constantly vulnerable NPM dependencies. For Rails applications not heavily dependent on React/Vue, the optimal path is migrating to Importmap. This eliminates Node.js, Webpack, and the package.json file entirely, relying on browser native ES modules and bare specifiers.

Webpacker vs importmap-rails (Rails 7+)
Aspect	Webpacker	importmap-rails
Status	Retired in Dec 2021	Rails 7 default for JS
Build step	Required (webpack bundle)	No build - native ES modules
Node.js runtime	Required	Not required
Deploy artifact size	Bundled + minified	Individual HTTP/2 files
Transpilation	Babel	None (ES2020+ targets browser)
NPM packages	yarn install + webpack	bin/importmap pin via CDN
Best for	React/Vue apps	Hotwire, Stimulus, lightweight JS

Phase 1: The Node.js Debt

Maintaining a Webpacker setup in a legacy Rails app often means fighting with Node version mismatches, broken Webpack configurations, and a continuous stream of security alerts from Dependabot.

Synthetic Engineering Context: NPM Audit Hell

A typical legacy Rails 6 app with Webpacker will show something like this on deployment:

$ npm audit
Found 42 vulnerabilities (12 moderate, 25 high, 5 critical)
  Prototype Pollution in webpack - https://github.com/advisories/GHSA-xxx
  Regular Expression Denial of Service in node-forge - https://github.com/advisories/GHSA-yyy

Upgrading these JS packages often breaks the build completely due to Webpack 4 to 5 incompatibilities.

Phase 2: Implementing Importmap

Importmap allows you to use bare specifiers (like import React from "react") in the browser by mapping them to unbundled JS files, typically served via CDNs.

Execution

First, remove Webpacker completely.

bundle remove webpacker
rm -rf config/webpacker.yml config/webpack/
rm package.json yarn.lock package-lock.json
rm -rf node_modules

Next, install importmap-rails.

bundle add importmap-rails
bin/rails importmap:install

Pinning Dependencies

Instead of yarn add, you use the pin command to map your JS packages.

# Pinning a library via jspm/unpkg
bin/rails importmap:pin lodash

This updates your config/importmap.rb:

# config/importmap.rb
pin "application", preload: true
pin "lodash", to: "https://ga.jspm.io/npm:lodash@4.17.21/lodash.js"

In your app/javascript/application.js, you simply use standard ES modules:

import _ from "lodash";
console.log(_.capitalize("importmaps work without webpack"));

Phase 3: Next Steps & Risk Mitigation

Dropping Webpacker for Importmap is liberating but comes with constraints. If your application relies on JSX compilation or complex CSS-in-JS solutions, Importmap alone will not suffice. You will need a hybrid approach using jsbundling-rails (with esbuild).

Need Help Stabilizing Your Legacy App? We can assess if your frontend architecture is ready for Importmap or if you need a transition to esbuild. Our team at USEO untangles complex Webpacker setups and secures your pipeline.