Sprockets 4.0.0 source maps not compatible with Firefox: "Error while fetching an original source"

[jaredbeck]

It seems sprockets 4.0.0 is compatible with the devtools of Chrome 78, but not those of Firefox 70.

Expected behavior

In new rails app, Firefox console should not produce "Error while fetching an original source" (see details below, under Reproduction)

Actual behavior

Produces "Error while fetching an original source" (see details below, under Reproduction)

System configuration

Firefox 70, ruby 2.6.5, sprockets 4.0.0, and see example app below

Example App (Reproduction)

If the following reproduction steps are inconvenient, please get the complete app at https://github.com/jaredbeck/sprockets_4_issue_ff_70

Starting with a new rails app:

rails -v # Rails 6.0.0
rails new helloworld

# Gemfile
gem 'sass-rails', '~> 6'

bundle | grep sprockets
Using sprockets 4.0.0
Using sprockets-rails 3.2.1

# layouts/application.html.erb
javascript_include_tag 'application'

# app/assets/javascripts/application.js
console.log('line 1');
throw 'line 2';

# app/assets/config/manifest.js
//= link_directory ../javascripts .js

# Dev tools console, Firefox 70
line 1 application.source.js:1
uncaught exception: line 2 application.source.js:2
Error while fetching an original source: "http://localhost:3000/assets/application.source.js" is not in the SourceMap.
Source URL: <unknown>

Cross-posted to https://stackoverflow.com/questions/58632880/error-while-fetching-an-original-source-in-new-rails-app-sprockets-4-firefox, in hopes of reaching more people.

[jaredbeck]

If I set config.assets.quiet = false, I discover the following difference between Chrome and Firefox:

Chrome 78

Started GET "/" for ::1 at 2019-10-30 16:50:11 -0400
Started GET "/assets/application.debug-e54e322be01ce9852ca6fa1ea034d529f9f1bd494c8cc299fd2cb959c959e6a8.css" for ::1 at 2019-10-30 16:50:11 -0400
Started GET "/assets/application.debug-00ee63fcdb7ffcdb0e505151a5b12b56c32eab4f55cda12a5afd801777c52f9e.js" for ::1 at 2019-10-30 16:50:11 -0400
Started GET "/assets/application.source.js" for ::1 at 2019-10-30 16:50:11 -0400

Firefox 70

Started GET "/" for 127.0.0.1 at 2019-10-30 16:50:28 -0400
Started GET "/assets/application.debug-e54e322be01ce9852ca6fa1ea034d529f9f1bd494c8cc299fd2cb959c959e6a8.css" for 127.0.0.1 at 2019-10-30 16:50:28 -0400
Started GET "/assets/application.debug-00ee63fcdb7ffcdb0e505151a5b12b56c32eab4f55cda12a5afd801777c52f9e.js" for 127.0.0.1 at 2019-10-30 16:50:28 -0400
Started GET "/assets/application.js-84a50b3000739a050d3a6b2b1a97f0976ab4fb3710e861e1962a7f63d926d414.map" for 127.0.0.1 at 2019-10-30 16:50:28 -0400
Started GET "/assets/application.js-84a50b3000739a050d3a6b2b1a97f0976ab4fb3710e861e1962a7f63d926d414.map" for 127.0.0.1 at 2019-10-30 16:50:31 -0400

Is this helpful?

[jaredbeck]

Inspecting the relevant files with curl:

curl http://localhost:3000/assets/application.source.js
console.log('line 1');
throw 'line 2';

curl http://localhost:3000/assets/application.js-84a50b3000739a050d3a6b2b1a97f0976ab4fb3710e861e1962a7f63d926d414.map
{
  "version": 3,
  "file": "application.js",
  "sections": [
    {
      "offset": {
        "line": 0,
        "column": 0
      },
      "map": {
        "version": 3,
        "file": "application.js",
        "mappings": "AAAA;AACA",
        "sources": [
          "application.source.js"
        ],
        "names": [],
        "x_sprockets_linecount": 2
      }
    }
  ]
}

In the map file, we see "sources":["application.source.js"], yet Firefox says /assets/application.source.js" is not in the SourceMap

Does Firefox support version 3 source maps? Maybe it expects elements in the sources array to be absolute paths? Am I on the right track? Sorry for troubleshooting this out loud.

[jaredbeck]

The Firefox error seems to be thrown by pretty-print-worker.js:6979

Maybe sprockets should be producing a .map file with a sourceRoot?

[john-999]

Same issue here, with Firefox 73.