Could not load worker

Problem

Couldn’t load worker, JSON syntax validation doesn’t work. I see Could not load worker warning in the browser console.

Also, I tried to import the json worker

import "ace-builds/src-noconflict/worker-json";

and got the error

TypeError: Cannot read property 'window' of undefined

Sample code to reproduce the issue

import React from "react";
import ReactDOM from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

let text =
  '{\n  "id": 0,\n  ' +
  '"script": """\n   function add(x, y) {\n      return x + y;\n   }\n   add(1, 2);\n   """' +
  ',\n   "descr": "add two numbers"\n}';

function App() {
  return (
    <div className="App">
      <h1>Code Editor Demo</h1>
      <AceEditor
        mode="json"
        theme="github"
        onChange={(value, stat) => {
          console.log("onChange", value, stat);
        }}
        value={text}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

References

Codesandbox https://codesandbox.io/embed/ace-worker-3-vrr68

[nightwing]

You need to either include the webpack-resolver

import "ace-builds/webpack-resolver";

or configure the url for each mode separately

import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl)

import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl)

both methods require “file-loader”

also react-ace tries to load brace if ace is not already imported so ace-builds needs to be imported before react-ace.

import "ace-builds";
import AceEditor from "react-ace";

[sourovroy]

setOptions={{ useWorker: false }}

works for me. Thanks @khoomeister