SourceMapsFixer is a set of Rake tasks for fixing sourceMappingURLs.
It is helpful for Rails apps where the main front-end code lives in the separate directory like frontend. But the app also uses Sprockets to process outputted bundles and additional assets inside app/assets directory. bin/rails assets:precompile command compiles assets to public/assets directory. Fingerprints are added to asset filenames during compilation by default. It is useful in conjunction with far-future headers.

When webpack produces bundles to app/assets/bundles, each contains sourceMappingURL at the bottom (if configured). This URL links to the corresponding source map.
But when Sprockets compile assets to public/assets, fingerprints are added to all asset filenames.
sourceMappingURLs are intact, which makes them point to invalid files without fingerprints.

SourceMapsFixer fixes sourceMappingURLs inside bundles.

Instead of running

$ bin/rails assets:precompile

run

$ bin/rails assets:prepare

Add source_maps_fixer to your application's Gemfile:

gem 'source_maps_fixer'

And then execute:

$ bundle

Or install it yourself as:

$ gem install source_maps_fixer

• source_maps_fixer works with Rails 7 and Ruby 3.1.
• it drops support for Ruby 2.6
• it supports sprockets-rails ~> 3.3.0. Version 3.4.0 works differently. bin/rails assets:precompile correctly replaces sourceMappingURLs for JS files but adds unnecessary comments

The gem is available as open source under the terms of the MIT License.

Zbigniew Humeniuk from Art of Code

If you want to make your life easier in other areas of web app development, I strongly recommend you to take a look at my other project called the Loco framework 🙂. It is pretty powerful and makes a front-end <-> back-end communication a breeze (among other things).