Uncaught (in promise) Error: Compile Error: Cannot find component button

One one has an idea what this error is for?! I tried everything but couldn’t figure it out (it occurred while trying to compile my app after upgrading it, I’m using the <Button element from the ember-elements library)

Uncaught (in promise) Error: Compile Error: Cannot find component button
    at opcode-compiler.js:152
    at Compilers.compile (opcode-compiler.js:44)
    at compile (opcode-compiler.js:740)
    at LazyCompiler.add (opcode-compiler.js:934)
    at CompilableProgram.compile (opcode-compiler.js:698)
    at OutletComponentManager.getLayout (index.js:4403)
    at Object.evaluate (runtime.js:1689)
    at AppendOpcodes.evaluate (runtime.js:73)
    at LowLevelVM.evaluateSyscall (runtime.js:3295)
    at LowLevelVM.evaluateInner (runtime.js:3241)
(anonymous) @ opcode-compiler.js:152
compile @ opcode-compiler.js:44
compile @ opcode-compiler.js:740
add @ opcode-compiler.js:934
compile @ opcode-compiler.js:698
getLayout @ index.js:4403
(anonymous) @ runtime.js:1689
evaluate @ runtime.js:73
evaluateSyscall @ runtime.js:3295
evaluateInner @ runtime.js:3241
evaluateOuter @ runtime.js:3233
next @ runtime.js:5299
next @ runtime.js:5335
RootState.render @ index.js:5550
runInAutotrackingTransaction @ index.js:1039
_renderRoots @ index.js:5848
_renderRootsTransaction @ index.js:5886
_renderRoot @ index.js:5806
_appendDefinition @ index.js:5721
appendOutletView @ index.js:5707
invoke @ backburner.js:340
flush @ backburner.js:229
flush @ backburner.js:426
_end @ backburner.js:960
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_end @ backburner.js:970
Backburner._boundAutorunEnd @ backburner.js:629
Promise.then (async)
iterations @ backburner.js:28
flush @ index.js:53
_scheduleAutorun @ backburner.js:1179
_ensureInstance @ backburner.js:1167
schedule @ backburner.js:776
schedule @ index.js:372
waitForDOMReady @ application.js:442
init @ application.js:354
superWrapper @ index.js:423
initialize @ core_object.js:90
create @ core_object.js:681
(anonymous) @ app-boot.js:3

What version of ember are you on after upgrading? Weird that the error says button (lowercase). I think I’ve seen that before in a similar instance where I upgrade and I was using a contextual component with a “reserved” name. I think it was like this:

{{#each someList as |option|}}
  {{option}}
{{/each}}

I think it changed once I upgraded to 3.4 when Angle Bracket invocation was enabled. I think it had something to do with the fact that “option” is also an HTML tag and also was being yielded from each. So I guess if you have lowercase button anywhere try renaming it (if it’s a yield situation like above).

1 Like