Yarn, asset-pipeline and .css.map

[sunnyrjuneja]

Hi there,

I'm a very happy user of the aforementioned technologies and very grateful for the contributors. I've noticed a small issue that I was hoping to report when using Rails 5.1.4. One of my assets points to a sourcemap and I'm having problems telling Rails where to look for it. Since Rails doesn't know where to find it, it throws an error in the console :(.

Whenever I visit any page, I get

ActionController::RoutingError (No route matches [GET] "/assets/bootstrap-datepicker3.css.map"):
  
actionpack (5.1.4) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.4) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
request_store (1.3.2) lib/request_store/middleware.rb:9:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.4) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.1.4) lib/rails/engine.rb:522:in `call'
puma (3.10.0) lib/puma/configuration.rb:225:in `call'
puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
puma (3.10.0) lib/puma/server.rb:437:in `process_client'
puma (3.10.0) lib/puma/server.rb:301:in `block in run'
puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

What's the best way to inform the asset pipeline of a sourcemap? The directory looks like...

node_modules
├── bootstrap-datepicker
│   ├── dist
│   │   ├── css
│   │   │   ├── bootstrap-datepicker3.css
│   │   │   ├── bootstrap-datepicker3.css.map
│   │   │   ├── bootstrap-datepicker3.min.css
│   │   │   ├── bootstrap-datepicker3.standalone.css
│   │   │   ├── bootstrap-datepicker3.standalone.css.map
│   │   │   ├── bootstrap-datepicker3.standalone.min.css
│   │   │   ├── bootstrap-datepicker.css
│   │   │   ├── bootstrap-datepicker.css.map
│   │   │   ├── bootstrap-datepicker.min.css
│   │   │   ├── bootstrap-datepicker.standalone.css
│   │   │   ├── bootstrap-datepicker.standalone.css.map
│   │   │   └── bootstrap-datepicker.standalone.min.css

The bottom of the CSS has:

/*# sourceMappingURL=bootstrap-datepicker.css.map */

My package.json looks like...

{
  "name": "canopy",
  "private": true,
  "dependencies": {
    "bootstrap-datepicker": "^1.7.1",
  }
}

And my application.js...

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-datepicker/dist/js/bootstrap-datepicker
//= require turbolinks
//= require_tree .

[alfie-max]

yea.. i'm having the same issue.. with multiple css.map files

[dennyluan]

This is still happening in Rails 6.rc1 and sprockets-rails 3.2.1.

I solved it for now by importing from @import "bootstrap/scss/bootstrap" instead of @import "bootstrap/dist/css/bootstrap".

[alfie-max]

@dennyluan i did the same to get rid of the error

[camilova]

Hi, i'm having the same issue but with .min.js files I require a file from node_modules so

//= require bootstrap4-toggle/js/bootstrap4-toggle.min

but then when I open the devtools on Chrome, console shows an error

ActionController::RoutingError: No route matches [GET] "/assets/bootstrap4-toggle.min.js.map"

Any idea how can I solve this?

[hamilton-keisuke]

I also encountered a similar situation.

It may not be a fundamental solution, but I decided to use the sprockets processor to remove all sourceMappingURL in .css file.

The code looks like below.

• config/initializers/sprockets.rb

require 'source_mapping_url_delete_processor'

# Remove sourceMappingUrl at the end of the css file
Sprockets.register_preprocessor('text/css', SourceMappingUrlDeleteProcessor)

• lib/source_mapping_url_delete_processor.rb

module SourceMappingUrlDeleteExecutor
  def self.call(input)
    # If there is an X in the last line of the file body, remove it
    data = input[:data]
    if (data.lines.last =~ /^\/\*# sourceMappingURL=/)
      data_lines_array = data.lines
      data_lines_array.delete_at(-1)
      data = data_lines_array.join
    end

    { data: }
  end
end

• (version memo)
  • sprockets-rails 3.4.2
  • sprockets 4.0.3
  • rails 7.0.4