Use @monaco-editor/react as a tsx editor

Has anyone figured out how todo this? I can only get any types for my jsx code and no syntax highlighting, which apparently is a general limitation. Would highly appreciate any working code snippets or hint in the right direction. Current code:
<Editor
height="60vh"
defaultLanguage="typescript"
options={{
minimap: {
enabled: false,
},
}}
theme="vs-dark"
onMount={async (editor, monaco) => {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
allowNonTsExtensions: true,
moduleResolution:
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
noEmit: true,
esModuleInterop: true,
jsx: monaco.languages.typescript.JsxEmit.React,
reactNamespace: 'React',
allowJs: true,
typeRoots: ['node_modules/@types'],
})

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
})

const code = await fetch('https://unpkg.com/@react/types').then(res =>
res.text(),
)

monaco.languages.typescript.typescriptDefaults.addExtraLib(
code,
`file:///node_modules/@react/types/index.d.ts`,
)

monaco.editor.createModel(
value,
'typescript',
monaco.Uri.parse('file:///main.tsx'),
)
}}
value={value}
onChange={value => {
setValue(value ?? '')
}}
/>
<Editor
height="60vh"
defaultLanguage="typescript"
options={{
minimap: {
enabled: false,
},
}}
theme="vs-dark"
onMount={async (editor, monaco) => {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
allowNonTsExtensions: true,
moduleResolution:
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
noEmit: true,
esModuleInterop: true,
jsx: monaco.languages.typescript.JsxEmit.React,
reactNamespace: 'React',
allowJs: true,
typeRoots: ['node_modules/@types'],
})

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
})

const code = await fetch('https://unpkg.com/@react/types').then(res =>
res.text(),
)

monaco.languages.typescript.typescriptDefaults.addExtraLib(
code,
`file:///node_modules/@react/types/index.d.ts`,
)

monaco.editor.createModel(
value,
'typescript',
monaco.Uri.parse('file:///main.tsx'),
)
}}
value={value}
onChange={value => {
setValue(value ?? '')
}}
/>
Thanks for reading!
5 Replies
Matvey
Matvey11mo ago
I think the language for tsx should be set to typescriptreact
NotLuksus
NotLuksus11mo ago
Nope that sadly doesn't work
bluem
bluem10mo ago
@NotLuksus did you ever get this working? I'm trying to do the exact same thing.
NotLuksus
NotLuksus10mo ago
Yeah I figured it out, basically what you need todo is fetch the react types and add them to your monaco editor by creating a new model in the react folder named index.d.ts and inside there save the @types/react index.d.ts
bluem
bluem10mo ago
Would you be willing to share a sample or sandbox? https://codesandbox.io/p/sandbox/monaco-example-9lc94l Here is my attempt @NotLuksus, but useState does not have any types. I am already fetching the react types, and creating a new model at @@types/react/index.d.ts.
Want results from more Discord servers?
Add your server