Propshaft ESM Modules chunks not resolved correctly (works with sprockets-rails)

[navidemad]

application.js:

app/views/layouts/application.html.erb:

Google Chrome console / networks tab

Scenarios:

Gemfile: Propshaft uncommented, sprockets-rails commented
ESBUILD_MODULES=1 ./bin/dev
Output: 🔴

Gemfile: Propshaft commented, sprockets-rails uncommented
ESBUILD_MODULES=1 ./bin/dev
Output: 🟢

Gemfile: Propshaft commented, sprockets-rails uncommented
./bin/dev
Output: 🟢

Gemfile: Propshaft uncommented, sprockets-rails commented
./bin/dev
Output: 🟢

Minimalist application to reproduce the issue: https://github.com/navidemad/PropshaftApp

[brenogazzola]

If you precompile your assets you will probably see that sprockets breaks too, because it only adds digests to the file names after precompilation.

I think we are going to need a jscompiler like we have for csscompiler to solve this.

[thanosbellos]

Hi

By changing the regex in asset.rb to match the one in the this sprockets pull request

and using the following esbuild configuration from the sample repo above:

"use strict";

import esbuild from "esbuild";
import path from "path";
import glob from "glob";

const __dirname = path.resolve();

var entryPoints = glob
  .sync(path.resolve(__dirname, `app/javascript/*.js`))
  .reduce(function (map, filepath) {
    map[path.basename(filepath, ".js")] = [filepath];
    return map;
  }, {});

const esbuildOptions = {
  bundle: true,
  logLevel: "debug",
  entryPoints: entryPoints,
  format: "esm",
  outdir: path.resolve(__dirname, "app/assets/builds/js/modern"),
  chunkNames: '[name]-[hash].digested',
  splitting: typeof process.env.ESBUILD_MODULES != "undefined",
  treeShaking: true,
  sourcemap: false,
  minify: false,
  metafile: false,
  platform: "browser",
  watch: true,
};

esbuild
  .build(esbuildOptions)
  .catch((e) => {
    compilationError(e.message);
    process.exit(1);
  });

everything seems to be working normally:

[brenogazzola]

@thanosbellos Thanks for the heads up. #55 is up.

[thanosbellos]

Thanks a lot for your work. This is the only thing, that kept me from upgrading to propshaft and Rails 7.0. I hope that the sprockets pull request, is also merged into the master so that any legacy app can use the same configuration.

Thanks again.

[brenogazzola]

@navidemad #55 was merged. Using the chunkNames config demonstrated by @thanosbellos should be enough to get chunks working in your app. Could you check if everything is ok, so we can close this issue and the other PR?

[navidemad]

@brenogazzola Confirmed, it's working well when I specify in my esbuild config:
chunkNames: '[name]-[hash].digested',

What about #49, does it still necessary ?

[brenogazzola]

Nope. I've closed that one and left a note. If it's working well, then I'll consider this one solved. Thanks for the help