How to use JSON with react-ace?
Try to setOption useWorker: false
<AceEditor mode="json" theme="github" onChange={onChange} name="UNIQUE_ID_OF_DIV" editorProps={{ $blockScrolling: true }} setOptions={{ useWorker: false }} />
From my understanding, you would need to do either way to resolve the worker problem.
- Import this
ace-builds/webpack-resolver:
import AceEditor from "react-ace";import "ace-builds/src-noconflict/mode-json";import "ace-builds/src-noconflict/theme-github";import 'ace-builds/webpack-resolver';- Use
file-loaderto loadworker-jsonfile & then configure ace worker:
import AceEditor from "react-ace";import "ace-builds/src-noconflict/mode-json";import "ace-builds/src-noconflict/theme-github";import ace from "ace-builds";// `webpack` would return the url for `worker-json.js`// then we use it to configure `ace`import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);