How to dynamically import modes and themes ？

[knoxnoe]

Problem

How to dynamically import modes and themes ？

Unable to infer path to ace from script src,", "use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes", "or with webpack use ace/webpack-resolver

Context

• VIte
• React
• Typescript

Sample code to reproduce your issue

import AceEditor from "react-ace";
import "./App.css";

// Method 1:
// import "ace-builds/src-noconflict/mode-java";
// import "ace-builds/src-noconflict/theme-github";
// import "ace-builds/src-noconflict/ext-language_tools";

// Method 2:
// xxxx how to dynamic import mode or theme

function App() {
  return (
    <>
      <AceEditor
        mode="java"
        theme="github"
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
      />
    </>
  );
}

export default App;

References

Progress on: # codesandbox