ember.jsmonaco-editorember-octane

run time error when embedding monaco editor in ember app

I am trying to use monaco-editor in my ember app,
I am using ember-monaco for that.
I followed the instructions and added in my application.hbs the following code:

{{code-editor
  language="typescript"
  code=sample1
  onChange=(action (mut sample1))
  theme="light"
  onReady=(action editorReady)
}}

I am running the app, but the editor doesn't appear, I get the following runtime error:

index.js:181 Uncaught Error: Assertion Failed: Action passed is null or undefined in (action) from (generated application controller).
at assert (index.js:181:1)
at makeClosureAction (index.js:738:1)
at makeDynamicClosureAction (index.js:727:1)
at index.js:679:1
at Object.evaluate (runtime.js:2084:1)
at AppendOpcodes.evaluate (runtime.js:1312:1)
at LowLevelVM.evaluateSyscall (runtime.js:5232:1)
at LowLevelVM.evaluateInner (runtime.js:5188:1)
at LowLevelVM.evaluateOuter (runtime.js:5180:1)
at VM.next (runtime.js:6191:1)

I removed the actions

{{code-editor
  language="typescript"
  code=sample1
  theme="light"
}}

Now the editor appears but with out the sample code (since I deleted the relevant lines),
What is the correct syntax?
Ember version:

ember-cli: 3.28.5
node: 10.24.1

enter image description here

Solution

  • with ember-source@3.16+, it's recommend to directly reference actions / functions, like:

    {{code-editor
  language="typescript"
  code=this.sample1
  onChange=this.handleChange
  theme="light"
  onReady=this.editorReady
}}

    (assuming handleChange and editorReady are defined your backing class) (also assuming you have a backing class)