Getting started steps

[haighis]

Hello,

I am trying to get the playground running. The steps I did was:

• npm install
• npm run start:playground

Which results in the following error on the console:

ERROR in /Users/johnhaigh/Projects/mango-platform/desktop/designable/node_modules/@monaco-editor/react/dist/index.mjs 1:1806
Module parse failed: Unexpected token (1:1806)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import _e from"@monaco-editor/loader";import{memo as Tt}from"react";import kt,{useState as rt,useRef as k,useCallback as ot,useEffect as nt}from"react";import St from"@monaco-editor/loader";import{memo as yt}from"react";import K from"react";var lt={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},v=lt;import mt from"react";var at={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},Y=at;function Mt({children:t}){return mt.createElement("div",{style:Y.container},t)}var Z=Mt;var $=Z;function Et({width:t,height:r,isEditorReady:n,loading:e,_ref:a,className:m,wrapperProps:E}){return K.createElement("section",{style:{...v.wrapper,width:t,height:r},...E},!n&&K.createElement($,null,e),K.createElement("div",{ref:a,style:{...v.fullWidth,...!n&&v.hide},className:m}))}var tt=Et;var H=yt(tt);import{useEffect as xt}from"react";function Ct(t){xt(t,[])}var b=Ct;import{useEffect as gt,useRef as Rt}from"react";function ht(t,r,n=!0){let e=Rt(!0);gt(e.current||!n?()=>{e.current=!1}:t,r)}var l=ht;function h(){}function R(t,r,n,e){return Dt(t,e)||bt(t,r,n,e)}function Dt(t,r){return t.editor.getModel(et(t,r))}function bt(t,r,n,e){return t.editor.createModel(r,n,e?et(t,e):void 0)}function et(t,r){return t.Uri.parse(r)}function Ot({original:t,modified:r,language:n,originalLanguage:e,modifiedLanguage:a,originalModelPath:m,modifiedModelPath:E,keepCurrentOriginalModel:S=!1,keepCurrentModifiedModel:N=!1,theme:x="light",loading:P="Loading...",options:y={},height:V="100%",width:z="100%",className:F,wrapperProps:j={},beforeMount:A=h,onMount:q=h}){let[M,O]=rt(!1),[T,s]=rt(!0),u=k(null),c=k(null),w=k(null),d=k(q),o=k(A),D=k(!1);b(()=>{let i=St.init();return i.then(f=>(c.current=f)&&s(!1)).catch(f=>f?.type!=="cancelation"&&console.error("Monaco initialization: error:",f)),()=>u.current?I():i.cancel()}),l(()=>{let i=u.current.getModifiedEditor();i.getOption(c.current.editor.EditorOption.readOnly)?i.setValue(r||""):r!==i.getValue()&&(i.executeEdits("",[{range:i.getModel().getFullModelRange(),text:r||"",forceMoveMarkers:!0}]),i.pushUndoStop())},[r],M),l(()=>{u.current?.getModel()?.original.setValue(t||"")},[t],M),l(()=>{let{original:i,modified:f}=u.current.getModel();c.current.editor.setModelLanguage(i,e||n||"text"),c.current.editor.setModelLanguage(f,a||n||"text")},[n,e,a],M),l(()=>{c.current?.editor.setTheme(x)},[x],M),l(()=>{u.current?.updateOptions(y)},[y],M);let U=ot(()=>{if(!c.current)return;o.current(c.current);let i=R(c.current,t||"",e||n||"text",m||""),f=R(c.current,r||"",a||n||"text",E||"");u.current?.setModel({original:i,modified:f})},[n,r,a,t,e,m,E]),L=ot(()=>{!D.current&&w.current&&(u.current=c.current.editor.createDiffEditor(w.current,{automaticLayout:!0,...y}),U(),c.current?.editor.setTheme(x),O(!0),D.current=!0)},[y,x,U]);nt(()=>{M&&d.current(u.current,c.current)},[M]),nt(()=>{!T&&!M&&L()},[T,M,L]),l(()=>{if(u.current&&c.current){let i=u.current.getOriginalEditor(),f=R(c.current,t||"",e||n||"text",m||"");f!==i.getModel()&&i.setModel(f)}},[m],M),l(()=>{if(u.current&&c.current){let i=u.current.getModifiedEditor(),f=R(c.current,r||"",a||n||"text",E||"");f!==i.getModel()&&i.setModel(f)}},[E],M);function I(){let i=u.current?.getModel();S||i?.original?.dispose(),N||i?.modified?.dispose(),u.current?.dispose()}return kt.createElement(H,{width:z,height:V,isEditorReady:M,loading:P,_ref:w,className:F,wrapperProps:j})}var it=Ot;var wt=Tt(it);import{useState as It}from"react";import ct from"@monaco-editor/loader";function Pt(){let[t,r]=It(ct.__getMonacoInstance());return b(()=>{let n;return t||(n=ct.init(),n.then(e=>{r(e)})),()=>n?.cancel()}),t}var Ut=Pt;import{memo as zt}from"react";import Wt,{useState as ut,useEffect as W,useRef as C,useCallback as _t}from"react";import Nt from"@monaco-editor/loader";import{useEffect as Lt,useRef as vt}from"react";function Ht(t){let r=vt();return Lt(()=>{r.current=t},[t]),r.current}var st=Ht;var _=new Map;function Vt({defaultValue:t,defaultLanguage:r,defaultPath:n,value:e,language:a,path:m,theme:E="light",line:S,loading:N="Loading...",options:x={},overrideServices:P={},saveViewState:y=!0,keepCurrentModel:V=!1,width:z="100%",height:F="100%",className:j,wrapperProps:A={},beforeMount:q=h,onMount:M=h,onChange:O,onValidate:T=h}){let[s,u]=ut(!1),[c,w]=ut(!0),d=C(null),o=C(null),D=C(null),U=C(M),L=C(q),I=C(),i=C(e),f=st(m),Q=C(!1),B=C(!1);b(()=>{let p=Nt.init();return p.then(g=>(d.current=g)&&w(!1)).catch(g=>g?.type!=="cancelation"&&console.error("Monaco initialization: error:",g)),()=>o.current?pt():p.cancel()}),l(()=>{let p=R(d.current,t||e||"",r||a||"",m||n||"");p!==o.current?.getModel()&&(y&&_.set(f,o.current?.saveViewState()),o.current?.setModel(p),y&&o.current?.restoreViewState(_.get(m)))},[m],s),l(()=>{o.current?.updateOptions(x)},[x],s),l(()=>{!o.current||e===void 0||(o.current.getOption(d.current.editor.EditorOption.readOnly)?o.current.setValue(e):e!==o.current.getValue()&&(B.current=!0,o.current.executeEdits("",[{range:o.current.getModel().getFullModelRange(),text:e,forceMoveMarkers:!0}]),o.current.pushUndoStop(),B.current=!1))},[e],s),l(()=>{let p=o.current?.getModel();p&&a&&d.current?.editor.setModelLanguage(p,a)},[a],s),l(()=>{S!==void 0&&o.current?.revealLine(S)},[S],s),l(()=>{d.current?.editor.setTheme(E)},[E],s);let X=_t(()=>{if(!(!D.current||!d.current)&&!Q.current){L.current(d.current);let p=m||n,g=R(d.current,e||t||"",r||a||"",p||"");o.current=d.current?.editor.create(D.current,{model:g,automaticLayout:!0,...x},P),y&&o.current.restoreViewState(_.get(p)),d.current.editor.setTheme(E),u(!0),Q.current=!0}},[t,r,n,e,a,m,x,P,y,E]);W(()=>{s&&U.current(o.current,d.current)},[s]),W(()=>{!c&&!s&&X()},[c,s,X]),i.current=e,W(()=>{s&&O&&(I.current?.dispose(),I.current=o.current?.onDidChangeModelContent(p=>{B.current||O(o.current.getValue(),p)}))},[s,O]),W(()=>{if(s){let p=d.current.editor.onDidChangeMarkers(g=>{let G=o.current.getModel()?.uri;if(G&&g.find(J=>J.path===G.path)){let J=d.current.editor.getModelMarkers({resource:G});T?.(J)}});return()=>{p?.dispose()}}return()=>{}},[s,T]);function pt(){I.current?.dispose(),V?y&&_.set(m,o.current.saveViewState()):o.current.getModel()?.dispose(),o.current.dispose()}return Wt.createElement(H,{width:z,height:F,isEditorReady:s,loading:N,_ref:D,className:j,wrapperProps:A})}var ft=Vt;var dt=zt(ft);var Fe=dt;export{wt as DiffEditor,dt as Editor,Fe as default,_e as loader,Ut as useMonaco};
| //# sourceMappingURL=index.mjs.map
 @ /Users/johnhaigh/Projects/mango-platform/desktop/designable/packages/react-settings-form/src/components/MonacoInput/index.tsx 69:27-58
 @ /Users/johnhaigh/Projects/mango-platform/desktop/designable/packages/react-settings-form/src/components/index.ts
 @ /Users/johnhaigh/Projects/mango-platform/desktop/designable/packages/react-settings-form/src/index.ts
 @ ./src/main.tsx
ℹ ｢wdm｣: Failed to compile.