title: ReferenceError: ace is not defined
body: <p>I'm new to ace and trying to build an Editor with react-ace.</p>
  <p>Here is what I did:</p>
  <ol>
  <li><code>npm install react-ace ace-builds</code></li>
  <li>I added the following code to my App.js</li>
  </ol>
  <pre><code>import React from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  import AceEditor from &quot;react-ace&quot;;
  
  import &quot;ace-builds/src-noconflict/mode-java&quot;;
  import &quot;ace-builds/src-noconflict/theme-github&quot;;
  
  function onChange(newValue) {
    console.log(&quot;change&quot;, newValue);
  }
  
  // Render editor
  render(
    &lt;AceEditor
      mode=&quot;java&quot;
      theme=&quot;github&quot;
      onChange={onChange}
      name=&quot;UNIQUE_ID_OF_DIV&quot;
      editorProps={{ $blockScrolling: true }}
    /&gt;,
    document.getElementById(&quot;example&quot;)
  );
  </code></pre>
  <p>However my browser shows this error: ReferenceError: ace is not defined
  <a href="https://i.stack.imgur.com/Dy7Mp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dy7Mp.png" alt="enter image description here" /></a></p>
  <p>Here is my package.json:
  <a href="https://i.stack.imgur.com/w5CHo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w5CHo.png" alt="enter image description here" /></a></p>
  <p>Can you help me please. Thank you!</p>