{{each}} Uncaught Error: unreachable

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  buttons: [
    {id: 1, text: 'button 1'},
    {id: 2, text: 'button 2'},
    {id: 3, text: 'button 3'}
  ],
});

templates.application.hbs

<h1>&lbrace;&lbrace;each&rbrace;&rbrace; Uncaught Error: unreachable</h1><hr>
<p>A param name such as <strong>&lbrace;&lbrace;&num;each as |button|&rbrace;&rbrace;</strong> conflicts with an HTML element by the same tag name, in this case &lt;button&gt;.</p>


{{! Param name conflicts with button element }}
{{#each buttons as |button|}}
   <button>{{button.text}}</button>
{{/each}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}