Change the imports of react-ace (#301)

Co-authored-by: Richard Dominick <[email protected]>

src/tabs/Repl/index.tsx

@@ -7,13 +7,11 @@
 import { Button } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
+import AceEditor from 'react-ace';
+
 import { FONT_MESSAGE, MINIMUM_EDITOR_HEIGHT } from '../../bundles/repl/config';
 import type { ProgrammableRepl } from '../../bundles/repl/programmable_repl';
 import type { DebuggerContext } from '../../typings/type_helpers';
-// If I use import for AceEditor it will cause runtime error and crash Source Academy when spawning tab in the new module building system.
-// import AceEditor from 'react-ace';
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const AceEditor = require('react-ace').default;
 
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-twilight';