title: Dialog is not a function - React
body: <p>I know there are a lot of questions about this already but none of them seem to match my problem.</p>
  
  <p>I am creating a React component using <code>JQuery-UI dialog</code>
  It looks like this:</p>
  
  <pre><code>var VehiclePlantDialog = React.createClass({
      handleSubmit: function(e) {
        e.preventDefault();
        this.props.closeDialog();
      },
      render: function () {
          return (
              &lt;div&gt;
                  &lt;form&gt;
                      &lt;input ref="inputText" /&gt;
                      &lt;input type="submit" /&gt;
                      &lt;button onClick={this.props.closeDialog}&gt;Cancel&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var VehiclePlants = React.createClass({
  
      openDialog: function (e) {
          e.preventDefault();
  
          var myDialog = $('&lt;div&gt;').dialog({
              title: 'Dialog example',
              width: 400,
              close: function (e) {
                  React.unmountComponentAtNode(myDialog);
                  $(this).remove();
              }
          });
  
          var closeDialog = function (e) {
              e.preventDefault();
              myDialog.dialog('close');
          };
          $(document).ready(function () {
              ReactDOM.renderComponent(&lt;VehiclePlantDialog closeDialog={closeDialog} /&gt;, myDialog);
          });
      },
      render: function () {
          return (
              &lt;div&gt;
                      &lt;button onClick={this.openDialog}&gt;Open dialog&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>Having this, in my <code>ejs</code> file for including <code>jquery</code></p>
  
  <pre><code>&lt;% script('/scripts/jquery.js') -%&gt;
  &lt;% script('/scripts/jquery-ui.min.js') -%&gt;
  </code></pre>
  
  <p>The include works but, when I click on the <strong>open dialog</strong> button, the console says <code>dialog is not a function</code> while if I write it in the console it does.
  <a href="https://i.stack.imgur.com/QO7s6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QO7s6.png" alt="enter image description here"></a></p>
  
  <p>Anyone who can help me out?</p>
  
  <p>Note: I am using <code>Bower</code>, <code>Gulp</code>, <code>React</code>, <code>ReactDom</code>, <code>jquery</code>, <code>jquery-ui</code></p>