Ember 3.6: any new reasons one might see "Uncaught Error: unreachable"?

Questions
1

Has there been any other recent cause for the following error other than reusing html elements inside handlebars expressions?

I am dynamically calling the same component via {{component ‘coponent-name’}} at two places. One works and one just triggers the error. Tried to use templatelint rule no-shadowed-elements, but it did not show anything.

Uncaught Error: unreachable
    at unreachable (util.js:13)
    at Object.APPEND_OPCODES.add [as evaluate] (runtime.js:845)
    at AppendOpcodes.evaluate (runtime.js:39)
    at LowLevelVM.evaluateSyscall (runtime.js:2179)
    at LowLevelVM.evaluateInner (runtime.js:2153)
    at LowLevelVM.evaluateOuter (runtime.js:2146)
    at VM.next (runtime.js:3643)
    at VM.execute (runtime.js:3633)
    at TryOpcode.handleException (runtime.js:2798)
    at UpdatingVMFrame.handleException (runtime.js:2921)

I tried to downgrade back to ember 3.5 and everything works without issues again. Upgrade to 3.6 and the error reappears.

Any suggestions on how to get down to the cause of this? Any hints on debugging what might cause runtime.js to fail?

1 Like
2

I got a little closer, however I am still not sure what exact conditions are required to reproduce this. I was able to narrow it down to the usage of ember-cli-flash. They recommend to add the following code in order to display the messages:

{{#each flashMessages.queue as |flash|}}
  {{#flash-message flash=flash as |component flash|}}
    ...actual message content...
  {{/flash-message}}
{{/each}}

looks like the component variable was overriding embers component. However, I was unable to reproduce this with a fresh app, so I am unsure if there needs to be anything other involved as well.

3

Hey @Hummingbird I have the same issue, but I’m not using ember-cli-flash. Please share solution if found.

4

The issue as described has been the reuse of a variable with name component. I renamed it, which fixed the issue.

As far as I know the only things that triggers this error is a reuse of ember reserved keywords or html elements for handlebars variables. Most likely somewhere in your templates there is a block like #each as |var| or similar which has the name of an html element or a reserved ember keyword instead of var. The mentioned template lint rule might help in figuring out where that happens.

This issue also has some information https://github.com/emberjs/ember.js/issues/16826

4 Likes