ReferenceError: ace is not defined

Question

I'm new to ace and trying to build an Editor with react-ace.

Here is what I did:

1. npm install react-ace ace-builds
2. I added the following code to my App.js

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

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

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

However my browser shows this error: ReferenceError: ace is not defined

Here is my package.json:

Can you help me please. Thank you!

Answer 1

Add this code

import 'ace-builds/src-noconflict/ace';

To learn more, see our https://github.com/securingsincity/react-ace/issues/1233