single-spa-examples | Examples of single-spa applications | Single Page Application library

Thanks for the clear description and steps to reproduce! I was able to do all the steps and get exactly the same error that you reported.

The tldr for what you are seeing is that SystemJS doesn't know how to execute the ember-app.js and vendor.js bundles correctly.

The longer explanation: when SystemJS downloads the code for those bundles, it runs a regular expression on the code to see what format it is in. The vendor.js file has a combination of amd, cjs, and esm module syntax, but SystemJS decides to interpret the bundles as esm (es6) module syntax. It then transpiles the code into System.register format and forces the code to be executed in javascript strict mode with a "use strict" statement. Once in strict mode, the code runs with a different context (this), which is why this.Ember results in the error Cannot read property 'Ember' of undefined. Let me know if you want more detail on any of that or if it doesn't make sense. It took me a while to track down, but I believe I now understand it and I can give you more detail if you'd like.

With that said, all of this is pretty deep in the bowels of SystemJS and pretty removed from how single-spa works.

If you're wanting to just see what running Ember inside of a single-spa app looks like, I would check out https://github.com/CanopyTax/single-spa-examples/pull/37#pullrequestreview-53690825 for where I have worked around this issue. Also see https://github.com/CanopyTax/single-spa-examples/issues/33#issuecomment-319359153 and for related discussions.