react-ace
react-ace copied to clipboard
ace is not defined in production only
ace not defined in nodejs production mode build
Only in nodejs production mode get uncaught ReferenceError: ace is not defined. Everything works find in dev mode build.
Error is thrown but everything seems to work as expected.
Sample code to reproduce your issue
package.json
...
"ace-builds": "1.32.9",
"react-ace": "11.0.1",
"react": "18.2.0",
"webpack": "5.91.0",
...
import { useRef, useState, useEffect } from "react";
import "react-ace";
import AceEditor from "react-ace";
import 'ace-builds';
import 'ace-builds/webpack-resolver';
import "ace-builds/src-noconflict/keybinding-vim";
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools.js";
// using react functional components
...
return (
<div>
<AceEditor
ref={editorRef}
mode="xml"
onChange={handleOnChange}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
maxLines: Infinity,
fontFamily: "Source Code Pro"
}}
commands={commands}
value={xml}
/>
</div>
)