Add Theme in Ace Editor (in react using ace-builds)

Question

I'm trying to use AceEditor (preferring to use ace-builds npm package than react-ace npm package) in a react project.

I succeed to create a basic text editor but cannot figure out how to change the themes or the languages workers, I have some problem to load the js files from the node_modules certainly a webpack problem but I don't really understand what's happening so if someone has some clue.

I'm using "ace-builds": "^1.15.2"

my code is

import React    from "react";

import * as Ace from "ace-builds";

import "ace-builds/src-noconflict/theme-monokai";

type T_Props = { };

const OnlineIDE:React.FunctionComponent<T_Props> = (props:T_Props) =>
{
    const editorElement = React.useRef<HTMLDivElement>(null);
    const editorInstance:React.MutableRefObject<Ace.Ace.Editor|null> = React.useRef(null);

    React.useEffect(():void =>
    {
        if (editorElement.current != null)
            editorInstance.current = Ace.edit(editorElement.current);

        if (editorInstance.current != null)
            editorInstance.current.setTheme("theme_monokai");
    }, []);

    return (
        <div
            style=
            {{
                width: "50vw",
                height: "50vh",
                border: "black solid 2px",
                display: "flex",
                flexDirection: "column",
            }}
        >
            <div
                style=
                {{
                    background: "rgb(235, 235, 235)",
                    color: "white",
                    display: "flex",
                    justifyContent: "end",
                    padding: "10px",
                }}
            >
            </div>
            <div style={{ width: "100%", height: "inherit" }} ref={editorElement}></div>
        </div>
    );
};

export default OnlineIDE;

and the errors I get in the browser:

browser error logs

Answer 1

Path names in ace-builds are rather confusing, using .setTheme("ace/theme/monokai"); should work.