'Single Chunk Mode' for better embedded app compatibility?

[apellerano-pw]

I work with two embedded Ember apps (one in a browser extension, another within a Rails app) and neither can use the index.html produced by ember build. In the past the JS bundles were known -- app-name.js and vendor.js -- so it wasn't a problem. However, this was changed in ember-auto-import v2 which now generates N chunk.js bundles known only at build-time and beyond.

The discussion in #472 is keen on keeping index.html as the only source of truth. This adds an HTML parsing burden onto all embedded Ember apps and pushes embedded use-cases away from the Ember ecosystem.

I'd like to propose another solution to the problem. Would it be feasible to set a flag in autoImport config which causes it to generate a single chunk.js bundle, with a well-known name? chunk.app-name.js, or chunk.vendor.js, or the like. Embedded apps could set this build flag when not in the test environment and hard code to the well-known name.

[dbjorge]

I recently had to solve the same problem, also for an ember app which is embedded as a content script of a browser extension (and so cannot use index.html directly).

I worked around the issue with the following autoImport settings in ember-cli-build.js:

    autoImport: {
      // Chromium forbids the use of eval in browser extensions as of Manifest v3.
      // This setting causes ember-auto-import to avoid webpack source map settings
      // which would implicitly use eval in built versions of the app.
      forbidEval: true,

      // This is required to ensure that ember-auto-import produces a single chunk
      // with a consistent name, so we can specify that file in the contentScript section
      // of manfiest.json. In practice, "[name]" is either "app" or "test".
      webpack: {
        output: {
          filename: 'ember-auto-import.[name].js',
          chunkFilename: 'ember-auto-import.[name].js',
        },
        optimization: {
          splitChunks: false,
        },
      },
      miniCssExtractPlugin: {
        filename: 'ember-auto-import.[name].js',
        chunkFilename: 'ember-auto-import.[name].js',
      },
    }

However, I agree that it would be nice to have a more clearly supported option for this, rather than having to do webpack overrides and just hope that they remain supported and don't mysteriously break in the future.

[apellerano-pw]

Thank you for sharing your webpack overrides. Maybe that could be part of a formal solution, if ember-auto-import is receptive to supporting this use case.

Proposal: a flag for autoImport which under the hood configures webpack to avoid chunking, as described in dbjorge's comment.

[Baukereg]

Thank you @dbjorge, that was exactly the solution I was looking for.

[pikilipita]

Thank you @dbjorge, that was also exactly the solution I was looking for.