Why are JS assets from the HTML transformer different than the assets in the manifest?

[jdavis]

I don't have an example repo to replicate this but I've seen an issue where enabling the manifest with: output.manifest = true following this guide results in different initial assets than what I can see when using the html transformer:

      const bundle = await environments.node.loadBundle('index');
      const template = await environments.web.getTransformedHtml('index');
      const rendered = bundle.render();
      const html = template.replace('<!--app-content-->', rendered);

If we parse the manifest and include just const { js, css } = entries['index'].initial; our page won't work because it is missing some chunks.

Two things we were able to do fixed this:

1. Including all assets including async, this blows up the initial page load and is not ideal
2. Filtering all the /async/ JS assets and including those as well as entries['index'].initial so like: js = [...entries['index'].initial, ...entries['index'].async.filter((url) => !url.includes('/async/'))]

What is the reasoning for this discrepancy with the built in transformer and the manifest generator?

[9aoy]

The async chunks are not loaded at the initial page initialization, but rather triggered to load at some stage during the execution of the initial chunk. That's why they are not included in the HTML template.
If you're encountering issues with using this, it would be helpful if you could provide an example repository.