import issues with single-spa-ember with different ember/ember-cli versions

[dshrestha]

I am trying to load multiple ember apps but each one is of different version. For the test I tried to add following 3 apps:

ember-1 -> "ember-cli": "1.13.8", "ember": "1.10.1"
ember-2 -> "ember-cli": "2.14.2", "ember": "2.14.1"
ember-3 -> "ember-cli": "2.18.0", "ember": "2.18.0"

ember-2 has the same version/setup as one in the single-spa-examples and it works perfectly fine.
But the other 2 versions ember-1 and ember-3, I am unable to get them to load properly.

For "ember-1" app I get
Could not find module single-spa-ember imported from ember-1/app

For "ember-3" app I get
deprecations.js:2 Uncaught ReferenceError: define is not defined at deprecations.js:2 at deprecations.js:10

UPDATE: ember-3 is working now, was probably caused by some node module caching. Updated my build script to clear out node_modules folder before doing a build and that fixed the issue

The test application can be found here: https://github.com/dshrestha/ember-spa

It definitely seems like its again related to the loading of js modules as you had mentioned here : https://stackoverflow.com/questions/45438094/issue-in-loading-ember-app-as-child-application-in-single-spa

I am not sure if I am missing a dependency or the way I am importing the single-spa-ember is wrong for the 2 versions. Your help will be much appreciated. Thanks.

[joeldenning]

I am currently on vacation, but can take a look at this in a few days.

[dshrestha]

This thread seems to capture the core issue ember-cli/ember-cli#2077, where in older version of ember-cli we are unable to import anonymous module.

When I manually updated single-spa-ember.js in the bower_components from

define(['exports'], function (exports) {
to
define('single-spa-ember', ['exports'], function (exports) {

the ember-1 app loaded too. I do not know how the transpiler work, but it must be possible to generate name module.

I am also facing some Ember issues when jumping from one app to another because ember seems to extend the global js objects(String, Array etc) but we should be able to fix it by leveraging the unmount hook.

[joeldenning]

@dshrestha I've created #4 for giving the AMD bundle a name. Check out this line to see what the new amd bundle looks like.

About the following:

ember seems to extend the global js objects(String, Array etc) but we should be able to fix it by leveraging the unmount hook.

What do you think we could do in the unmount hook to fix this?

[joeldenning]

@dshrestha I just tried out that new file inside of https://github.com/CanopyTax/single-spa-examples and define('single-spa-ember', ['exports'], function (exports) { didn't work for me. I had to go back to define(['exports'], function (exports) { in order to get it to work.

Single-spa-examples is using ember-cli@2.17.1 -- do you know why I might be seeing that error with that version of ember-cli? What versions of ember-cli are you using?

[dshrestha]

@joeldenning for single-spa-ember to work, I had to make the following changes.

1. in bower.json updated
   "dependencies": {
   "single-spa-ember": "https://github.com/CanopyTax/single-spa-ember.git#issue-3"
   }

2. in ember-cli-build.js changed how we import the module
   app.import('bower_components/single-spa-ember/amd/single-spa-ember.js');

Once a build was done, the app was running for me.

As for

ember seems to extend the global js objects(String, Array etc) but we should be able to fix it by leveraging the unmount hook.

I was hoping that disabling of EXTEND_PROTOTYPES (https://guides.emberjs.com/v2.3.0/configuring-ember/disabling-prototype-extensions/) would help but sadly it didn't. I also tried to delete the extended method in the unmount hook from the prototype and that didn't work either. I will have to look into it a bit more.

thanks again.

[joeldenning]

@dshrestha I released a fix as https://github.com/CanopyTax/single-spa-ember/releases/tag/v0.2.0. Can you verify if that works for you?

Also:

I was hoping that disabling of EXTEND_PROTOTYPES (https://guides.emberjs.com/v2.3.0/configuring-ember/disabling-prototype-extensions/) would help but sadly it didn't

How so? Ember still overrides the native prototypes even if you tell it not to?

[dshrestha]

@joeldenning verified to be working with all 3 ember versions now. We might have to update the documentation slightly though because since the module is exported under the name 'single-spa-ember/src/single-spa-ember', we have to import it in app.js as

import singleSpaEmber from 'single-spa-ember/src/single-spa-ember';

As for the issue even with disabling EXTEND_PROTOTYPES, I get the following error:
Uncaught TypeError: Cannot redefine property: Inflector

The issue is arising from 'ember-inflector/index' module:

define('ember-inflector/index', ['exports', 'ember-inflector/lib/system', 'ember-inflector/lib/ext/string'], function (exports, _system) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.defaultRules = exports.singularize = exports.pluralize = undefined;


  _system.Inflector.defaultRules = _system.defaultRules;
  
  //CAUSES ISSUE SINCE THIS WAS ALREADY DEFINED IN PREVIOUS EMBER APP
  Object.defineProperty(Ember, 'Inflector', {
    get: function get() {
      Ember.deprecate('Ember.Inflector is deprecated. Please explicitly: import Inflector from \'ember-inflector\';', false, {
        id: 'ember-inflector.globals',
        until: '3.0.0'
      });

      return _system.Inflector;
    }
  });

At one point I thought I had it resolved by removing the imported script tags(the core vendor and app js files) in the unmount hook and using appInstance.reset() before calling appInstance.destroy(), but after a re-build suddenly it didn't work anymore. Maybe I need to do delete window.Ember itself, will give it a try and let you know if it works.

Thanks for the fix. Cheers.

[joeldenning]

Apologies for the slow response again -- I updated the docs with 7eb873e#diff-04c6e90faac2675aa89e2176d2eec7d8, let me know if there are any other places I might have missed.

About your code sample, that's an interesting problem that it's trying to define the Inflector property twice and that that throws an error. I wonder if altering the code to do delete Ember.Inflector; Object.defineProperty(Ember, 'Inflector', ...) would work?