Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Single Chunk Mode' for better embedded app compatibility? #560

Open
apellerano-pw opened this issue Jan 19, 2023 · 4 comments
Open

'Single Chunk Mode' for better embedded app compatibility? #560

apellerano-pw opened this issue Jan 19, 2023 · 4 comments

Comments

@apellerano-pw
Copy link

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
Copy link

dbjorge commented Feb 21, 2023

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
Copy link
Author

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
Copy link

Baukereg commented Sep 1, 2023

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

@pikilipita
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants