Readme examples breaks when switching from java to json?

[ajthinking]

How to use JSON instead of Java?

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.

[dcaillibaud]

Same error here, because loading query is done with https://domain.tld/current/path/worker-json.js wich doesn't exists (and 404 page is an html one).

Adding import 'ace-builds/src-noconflict/worker-json' doesn't solve the pb.

My code is

import React from 'react'
import AceEditor from 'react-ace'
import 'ace-builds/src-noconflict/mode-json'
import 'ace-builds/src-noconflict/mode-xml'
import 'ace-builds/src-noconflict/theme-github'

const TextEditor = ({ input: { value, onChange, onBlur, onFocus, name }, onValidate, mode }) => (
  <AceEditor
    name={name}
    mode={mode}
    theme="github"
    // …

[dcaillibaud]

The pb seems solved for me (thanks to https://ace.c9.io/#nav=howto), with

import React from 'react'
import AceEditor from 'react-ace'
// cf https://ace.c9.io/#nav=howto for webpack use
import 'ace-builds/webpack-resolver'

const TextEditor = ({ input: { value, onChange, onBlur, onFocus, name }, onValidate, mode }) => (
  <AceEditor
    name={name}
    mode={mode}
    theme="github"
    // …

[brainthinks]

Just ran into this issue, and I was only able to fixing by piecing together bits of information from this issue and others.

First, I'm using webpack 5, so file-loader is deprecated. Thankfully it still works. I'm sure there is a better solution that is more inline with the new webpack workflow, but the first thing I did was install file-loader:

yarn add -D file-loader

This is required by ace-builds, as mentioned here: https://ace.c9.io/#nav=howto

For the import statements, ORDER MATTERS:

// ...
import 'ace-builds';
import 'ace-builds/webpack-resolver';
import AceEditor from 'react-ace';
// ...
<AceEditor
  mode='json'
  theme='monokai'
  onChange={function (value, event) {
    console.log(value, event, this);
  }}
  fontSize={14}
  showPrintMargin
  showGutter
  highlightActiveLine
  value={myValue}
  width='100%'
  height='100%'
  setOptions={{
    enableBasicAutocompletion: false,
    enableLiveAutocompletion: false,
    enableSnippets: false,
    showLineNumbers: true,
    tabSize: 2,
  }}
/>

Hope this helps someone.