Configure ace without file-loader

[sergibondarenko]

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

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

both methods require "file-loader"

[CodeSmith32]

I'm using ace without esm. Does this look like the following?

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

For me I'm getting undefined from ace.require(...) so I presume I'm missing something?

[CodeSmith32]

In my case, I have the worker script. I'd like to just base64 encode it and pass it somewhere as a dataurl. Can I do this?

[nightwing]

also there is another bug in react-ace, that causes error when react-ace is imported before ace.

so you need to also rearrange imports like this:

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

[p3x-robot]

do you guys how to solve this as file-loader is deprecated, how can we configrue ace now without file-loader?

[cjayyy]

With Webpack 5 you can import workers without any additional loaders (see documentation).

You can just do this:

const jsonWorkerUrl = new URL('ace-builds/src-noconflict/worker-json', import.meta.url);
config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);

With react-ace I was able to change the config like this:

import AceEditor from "react-ace";
import { config } from "ace-builds";

...

const jsonWorkerUrl = new URL('ace-builds/src-noconflict/worker-json', import.meta.url);
config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);

...

return <AceEditor ... />