12

Im using react-ace and trying the readme example with java syntax. Works great. But I can't seem to set it to JSON.

Java works

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

<AceEditor
    mode="java"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>

JSON does not work?

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

<AceEditor
    mode="json"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>

The error

Refused to execute script from '...../worker-json.js' because its MIME type ('text/html') is not executable. (anonymous) @ 2f896707-86be-497a-93b2-e1711942d7c7:1 2f896707-86be-497a-93b2-e1711942d7c7:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at '...../worker-json.js' failed to load.

How to use JSON?

M_W
  • 66
  • 2
  • 14
ajthinking
  • 3,386
  • 8
  • 45
  • 75

4 Answers4

8

Try to setOption useWorker: false

      <AceEditor
        mode="json"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          useWorker: false
        }}
      />
Honey
  • 2,208
  • 11
  • 21
  • 2
    This turns annotations off – Jugbot Feb 15 '22 at 21:33
  • 1
    This turns annotations off as specified. But I found this helpful hint that works with annotations and doesn't throw those errors: You have to add this before 'react-ace' -> import 'ace-builds'; import 'ace-builds/webpack-resolver'; For my setup, I now can see errors for JSON and don't have to disable workers. – bearsworth May 24 '22 at 05:53
  • So here is a workaround with working annotations, webpack 5, and TS type fixes as well: https://stackoverflow.com/a/74180795/5282202 – Oleksandr Pyrozhok Oct 24 '22 at 12:01
6

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-loader to load worker-json file & 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);
tmhao2005
  • 14,776
  • 2
  • 37
  • 44
  • Both these methods give: Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope' – ajthinking Jan 10 '21 at 12:04
  • Can you share the minimal reproducible repo? So I can have a look for you (looks like a specific case since things work fine on my end) – tmhao2005 Jan 10 '21 at 12:12
  • I will need to set that up! Here is full repo: https://github.com/ajthinking/data-story/blob/master/src/resources/js/components/modals/NodeWidgetModal.js – ajthinking Jan 10 '21 at 12:44
  • I'm not sure how to run your client independently. I tried `yarn hot` but nothing seems to work – tmhao2005 Jan 10 '21 at 13:23
  • file-upload is deprecated in Webpack 5, so please consider my research on that: https://stackoverflow.com/a/74180795/5282202 – Oleksandr Pyrozhok Nov 23 '22 at 11:46
1

One way I made it work was to use mode/json5 (json5 is a superset of json so it work normal) instead of mode/json. Looking at the some github issue on this problem it seems to have few good options to be able to use mode/json.

  • not every project works to import the worker via webpack/file-loader
  • using the webpack-resolver makes the build to big

Some issues on ace own library and some componentes of some other frameworks that use ace.

esta
  • 11
  • 3
0

For those searching how to implement workers now, when file-upload is deprecated with Webpack 5 asset/resource.

webpack config:

rules: [
  {
      test: /ace-builds.*\/worker-.*$/,
      type: "asset/resource"
  },
],

component:

import AceEditor from "react-ace";
import { config } from "ace-builds";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import jsWorkerUrl from "ace-builds/src-noconflict/worker-javascript";
config.setModuleUrl("ace/mode/javascript_worker", jsWorkerUrl);

To fix the typescript "no module declaration" error, just add the global.d.ts file to your src folder:

declare module "ace-builds/src-noconflict/worker-javascript";
Oleksandr Pyrozhok
  • 406
  • 5
  • 8