Uncaught RangeError: Maximum call stack size exceeded CurlyComponentManager.manager.didCreateElement

[dshrestha]

Seeing following exception in my acceptance tests:

Uncaught RangeError: Maximum call stack size exceeded
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:402)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)
    at CurlyComponentManager.manager.didCreateElement (runtime-polyfill.js:403)


manager.didCreateElement | @ | runtime-polyfill.js:402
-- | -- | --
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | manager.didCreateElement | @ | runtime-polyfill.js:403
  | setTimeout (async) |   |  
  | Backburner.platform.next | @ | backburner.js:412
  | _ensureInstance | @ | backburner.js:951
  | schedule | @ | backburner.js:547

The issue seems to occur after the model(questions) is resolved in a route whose template looks like this:

    {{#each questions as |question|}}
        {{component question.componentName question=question}}
    {{/each}}

the dynamic component in turn uses the angel bracket components for "Input".
However, if I rerun just the broken test, it passes.

Similar issue was reported and closed here : #53

ember-angle-bracket-invocation-polyfill: 2.0.2
ember-source: 2.18.2
jquery: 3.4.1

[Mifrill]

any updates on this? I've got the same after adding of ember-modifier-manager-polyfill:

ember-source: 2.14.1
ember-angle-bracket-invocation-polyfill: 2.0.2
jquery: 3.5.1
ember-modifier-manager-polyfill: 1.2.0

[rwjblue]

No, I don't think there has been any progress here. I think I need a reproduction in order to dig in here...

[Mifrill]

Hello, @dshrestha did you find the solution? I will appreciate if you can share the possible reason or the fix with me

[dshrestha]

Hi @Mifrill sorry I didn't make any progress on this since we chose to upgrade to ember 3 instead.

[Mifrill]

@dshrestha thanks for the response, so you got ember 3, congratz! we are only on this road!

[Mifrill]

it was solved when we've rewritten all tests in modern syntax.

legacy syntax:

import moduleForAcceptance from 'smhw-frontend/tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | Test', {
  beforeEach() {
    // setup
  }
});

test('my test', async function(assert) {
  ...
});

modern syntax:

import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | Test', function(hooks) {
  setupApplicationTest(hooks);

  hooks.beforeEach(function() {
    // setup
  });

  test('my test', async function(assert) {
    ...
  });

the tests codebase was in-migration state: some tests were in legacy but some were with modern syntax.

This codemod was really helpful for the migration process: https://github.com/ember-codemods/ember-qunit-codemod