Importing theme in TypeScript React project without using .then() method?

[princefishthrower]

Actually I'm rather confused. The provided example in the docs of course works:

import('monaco-themes/themes/Monokai.json')
  .then(data => {
      monaco.editor.defineTheme('monokai', data);
  })

When I trying to import the theme at the top of the file, it won't work. I've tried way:

import data from 'monaco-themes/themes/Monokai.json'
...
monaco.editor.defineTheme('monokai', data); // doesn't work

import * as data from 'monaco-themes/themes/Monokai.json'
...
monaco.editor.defineTheme('monokai', data); // doesn't work

const data = require('monaco-themes/themes/Monokai.json')
...
monaco.editor.defineTheme('monokai', data); // doesn't work

None set the theme. Is there any way to get the import or require way of doing things working? I don't like using import within the body of my React components.

To be honest I've never even seen the import("").then() syntax ever before.

[princefishthrower]

It was an issue with the beforeMount vs onMount callback in the Editor component I was using. If I use the onMount callback, a normal import statement works just fine:

import GitHub from "monaco-themes/themes/GitHub.json"
...
<Editor onMount={(_editor, monaco) => {
    monaco.editor.defineTheme("GitHub", GitHub)
    monaco.editor.setTheme("GitHub")
}}/>

Note here the import name GitHub can actually take on any name since it just represents the imported JSON for the theme.

Sorry for my mistake!