Esbuild Configuration for Javascript Debugging

[ToolKami]

Migrated from Webpacker to Esbuild using jsbundling-rails and it seems like Javascript debugging no longer works for either VSCode nor Rubymine.

This is the ESBuild settings I am using.

require("esbuild").build({
  entryPoints: ["application.js", "administrate.js"],
  bundle: true,
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  watch: watch,
  plugins: [ImportGlobPlugin()],
}).catch(() => process.exit(1));

[ToolKami]

For more context.

The compiled assets can be found in app/assets/builds/*.js or public/assets/**/*.js.

The bundled JS that is actually loaded is http://localhost:3000/assets/application.debug-fc91062bf3c7540aaa82649048a601114b102e175ab6b54a445960fb29a8ebc2.js.

but I'm also seeing this warning:
DevTools failed to load source map: Could not load content for http://localhost:3000/assets/application.js-9bc83b28e900922b5437611c775ac156746a4b54b883ec28346dc6ee1be3bc3b.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[dhh]

Source mapping is still not fully supported. Need alterations to Sprockets.

[czj]

While sprockets is not compatible, you can setup a custom route like so:

if Rails.env.development?
  redirector = ->(params) { ApplicationController.helpers.asset_path(params[:name].split("-").first.append(".map")) }
  constraint = ->(request) { request.path.ends_with?(".map") }
  get "assets/*name", to: redirect(redirector), constraints: constraint
end

If the assets pipeline cannot find a file corresponding to the a given sourcemap file name, Rails' routing will pick up any URL starting with /assets/ and ending in .map and redirect to the URL of the corresponding .css.map or .js.map file in the asset pipeline.

Works well for us with jsbundling-rails and cssbundling-rails. Maybe it also works with propshaft.

[jmdfm]

I had to slightly modify the above example for my Rails 6.1.4.1 app, but it does work:

if Rails.env.development?
  redirector = lambda { |params, _req|
    ApplicationController.helpers.asset_path(params[:name].split('-').first + '.map')
  }
  constraint = ->(request) { request.path.ends_with?('.map') }
  get 'assets/*name', to: redirect(redirector), constraints: constraint
end

I now have full sourcemaps working for now.

[jhirn]

Figured I'd share my esbuild file as I've been working on it for a few weeks now and had to dig for a lot of this myself. The inline sourcemaps are not ideal for production but they work for now. Also svgr, loader, injecting shims and adding watch was a bit tricker than I hoped for but well worth it so far. Hopefully this helps someone.

#!/usr/bin/env node

const esBuild = require('esbuild')
const svgrPlugin = require('esbuild-plugin-svgr')

const watch = process.argv.includes('--watch')
const minify = process.argv.includes('--minify')

const watchOptions = {
  onRebuild: (error, result) => {
    if (error) {
      console.error('watch build failed:', error)
    } else {
      console.log(result)
      console.log('watch build succeeded. ')
    }
  }
}

const svgrOptions = {
  typescript: false
}

const loaders = {
  '.png': 'file'
}

esBuild.build({
  entryPoints: ['app/javascript/application.js'],
  logLevel: 'info',
  bundle: true,
  outdir: 'app/assets/builds',
  plugins: [
    svgrPlugin(svgrOptions)
  ],
  watch: watch && watchOptions,
  sourcemap: 'inline',
  loader: loaders,
  publicPath: '/assets',
  inject: ['.esbuild/shims/react-shim.js'],
  minify
}).then(result => {
  console.log(result)
  if (watch) {
    console.log('Build finished, watching for changes...')
  } else {
    console.log('Build finished, Congrats')
  }
}).catch(result => {
  console.log(result)
  process.exit(1)
})

[jwilsjustin]

@dhh Do you know if there is an issue tracked somewhere that lays out what needs to change with sprockets? I went looking and found nothing that matches directly.

[dhh]

Don't think we have anything fully recorded. We need to find a way to produce source maps with digested file names that can stay stable. Maybe @brenogazzola has an idea? There's a straight shot for this for webpack.

[brenogazzola]

@dhh I'll update the regex in Propshaft since it currently does not support multiple file extensions after .digested. I also have a PR for Sprockets to replicate that: rails/sprockets#718, but I still need to check what happens when you give it a file with multiple extensions 😅

I haven't switched to esbuild yet, but I've taken a look through its documentation and I think that --entry-names is what we are looking for. Since there's no option for choosing the name of the sourcemap I'll assume it will use the name of the original file and simply add .map. If someone could test it:

require('esbuild').buildSync({
  entryNames: '[name]-[hash].digested',
})

And here's the webpack equivalent:

output: {
  filename: '[name].js',
  chunkFilename: '[name]-[contenthash].digested.js',
  sourceMapFilename: '[name]-[contenthash].digested.js.map',
  path: path.resolve(__dirname, 'app/assets/builds')
},

If this configuration works for esbuild, and the generated source map ends as something like application-abcdef1234567.digested.js.map, then it's just a matter of validating the two open PRs for propshaft and sprockets.

[dhh]

Sourcemaps generated by esbuild (or any other transpiler) are now supported since sprockets-rails 3.4.0.

[TastyPi]

I switched to jsbundling-rails recently and came across this issue, despite having sprockets-rails 3.4.2. Esbuild is creating the [name].js.map files, but then the browser complains that it can't find [name].js-[contenthash].map.

I've worked around this by removing the --sourcemap flag from package.json and adding --sourcemap=inline to the command in Procfile.dev, but it would be nice if the separate file worked as intended.

[dhh]

Can you try to produce an example app that triggers this? It's working for me when I try.

[jaredcwhite]

FWIW, source maps via esbuild -> Sprockets working for me as well. 👍

[fcheung]

Just hopping in here to say that setting config.assets.debug to false (used to default to true in dev, doesn't for apps generated after rails/rails@adec7e7#diff-2d045bcceb384e942cad5480ff01eff82255819f8944bef7a03e1609cc949004 ) fixed this for me

with config.assets.debug set to true, the AddSourceMapCommentToAssetProcessor ( https://github.com/rails/sprockets/blob/24c97270fbf6de11b4ffff0311bb427b7a8a3a83/lib/sprockets/add_source_map_comment_to_asset_processor.rb) processor in sprockets appends a second, incorrect source map comment

[TastyPi]

Setting config.assets.debug = false fixed it for me too, thanks @fcheung!