Two Ember applications using different library versions on the same page

Problem space:

Running two different Ember applications that require two different ember versions causes issues. Since the new ember cli vendor js is loaded last, the old application is now hitting the new Ember library, and causing all sorts of problems. I believe this is because the last loaded Ember library overwrites the window.Ember object and the old application is calling window.Ember.sometfunctionhere.

Both applications and associated js end up on the page in separate, non-nested divs. The old application is a 2.5.x version, but the new version is ahead enough that I am getting deprecation warnings.

I would like to make sure the old application only uses its old library, while the new ember application only uses its new vendor file.

I was wondering if anyone had any bright ideas on how to accomplish this. Ideally I would be able to have the new application bind to a new custom window namespace, or some kind of “no conflict” mode for the new application to avoid messing with the old one.

Solutions:

  • iFrame the new application, but this poses another host of issues related to iframes.
  • Attempt to fix the old application and deprecation problems, but possibly introduce new issues or problems.

Eh? You’re running 2 different applications one 1 page?!? I’m confused. Do you perhaps mean your application uses components that require different versions of ember?

Without fully understanding this, the best I can advise is to target a LTS version of ember for all of your components/applications.

Thanks for replying. There are two different ember applications on the same page, but different versions and project structures. One uses the old require js way, and the other would be a modern ember cli brand. I would like to use the two in tandem on the same page without interference using different root nodes. I was curious if it was possible for two Ember libraries to exist on the same page at the same time.

Ah i get you now. Sorry I cant really help as I’ve only really used the cli way but that doesnt sound like a good idea to me. If it were me I would probably try and incorporate the old way into the new way, maybe as a component? I’m sure someone here can be of more assistance.

As far as I know, it isn’t yet possible, although we are headed that direction. Despite all the ES6 imports occurring in Ember-CLI, fundamentally under the hood Ember still works using a global on the window object. The goal is to replace that without breaking any of our apps (part of the new import syntax that started in the last few months).

For now, I’m afraid the answer is to be careful about tor Ember versions with both those apps. Long-term, your issue should go away, but it won’t be immediately. If your company can help with some of the work (or sponsor someone to do it) it might help it come faster though …

Thank you very much, I really appreciate the reply. I will try to drum up support to help out with open source, but in the meantime we’ll work around this.

Did you found any solution for this issue? How would you prevent conflicts beetween multiple instances of ember on same page