react-ace icon indicating copy to clipboard operation
react-ace copied to clipboard

ace is not defined in production only

Open wendymungovan opened this issue 10 months ago • 0 comments

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.

image

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>
)

wendymungovan avatar Apr 09 '24 02:04 wendymungovan