Build should exclude single-spa from vendor bundle

[jaydgruber]

With a new app built with single-spa Ember, I get the warning: https://single-spa.js.org/error/?code=41 ("single-spa is loaded on the page multiple times") whenever the Ember app mounts. Other single-spa applications are using Webpack, so have externals: ['single-spa'] in their webpack config.

I've tried a few things to accomplish the same in Broccoli, but with no success yet.

• a broccoli-funnel to exclude single-spa from vendor

  const EmberApp = require('ember-cli/lib/broccoli/ember-app');
  const Funnel = require('broccoli-funnel');
  
  module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
      /* ...other stuff */
      trees: {
        vendor: funnel('vendor', {
          exclude: ['./node_modules/single-spa/**/*'],
        }),
      },
    });
    /* ...other stuff */
    return app.toTree();
  };

• ember-auto-import pass-through the externals option to webpack

  module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
      /* ...other stuff */
      autoImport: {
        webpack: {
          externals: ['single-spa'],
        },
      },
      /* ...other stuff */
    
    });
    return app.toTree();
  };

• some combinations of these two things and ember-auto-import's exclude option

Practical impact: with multiple instances of single-spa on the page, I have been unable to get navigateToUrl working correctly, so every transition between applications is causing a full page reload.

[jaydgruber]

I think perhaps the problem is that ember-auto-import is not handling pass-through of config for webpack externals correctly. embroider-build/ember-auto-import#412 (comment)

[jaydgruber]

note: the project running into this issue is using "ember-auto-import": "^1.10.1"

It is possible that the ember-auto-import 2.x major bump, which is also a webpack 4 -> 5 upgrade might be needed.

[joeldenning]

I don't know much about the ember build process, but yes single-spa should be marked as a webpack external. Webpack externals work in both webpack 4 and webpack 5, but I don't know about ember-auto-import.