title: ERROR that DataTable is not a function
body: <p>I am getting an error  </p>
  
  <blockquote>
    <p>__WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).DataTable is
    not a function</p>
  </blockquote>
  
  <p>I cannot understand why this error is coming as i am new to this.</p>
  
  <p>This is my Global.js file where i written the jQuery code.</p>
  
  <pre><code>    import React, { Component } from 'react';
      import $ from 'jquery';
  
  
      function filterGlobal () {
          $('#example').DataTable().search(
              $('#global_filter').val(),
              $('#global_regex').prop('checked'),
              $('#global_smart').prop('checked')
          ).draw();
      }
  
  
      $(document).ready(function() {
          $('#example').DataTable();
  
          $('input.global_filter').on( 'keyup click', function () {
              filterGlobal();
          } );
  
      } );
  
  
      class Global extends React.Component {
        constructor(props) {
          super(props);
        };
  
  
        render() {
          return (
            &lt;div&gt;
              &lt;table cellPadding={3} cellSpacing={0} border={0} style={{width: '67%', margin: '0 auto 2em auto'}}&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Target&lt;/th&gt;
                    &lt;th&gt;Search text&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr id="filter_global"&gt;
                    &lt;td&gt;Global search&lt;/td&gt;
                    &lt;td align="center"&gt;&lt;input type="text" className="global_filter" id="global_filter" /&gt;&lt;/td&gt;
                    &lt;td align="center"&gt;&lt;input type="checkbox" className="global_filter" id="global_regex" /&gt;&lt;/td&gt;
                    &lt;td align="center"&gt;&lt;input type="checkbox" className="global_filter" id="global_smart" defaultChecked="checked" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;&lt;table id="example" className="display" style={{width: '100%'}}&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Position&lt;/th&gt;
                    &lt;th&gt;Office&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                    &lt;th&gt;Start date&lt;/th&gt;
                    &lt;th&gt;Salary&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Tiger Nixon&lt;/td&gt;
                    &lt;td&gt;System Architect&lt;/td&gt;
                    &lt;td&gt;Edinburgh&lt;/td&gt;
                    &lt;td&gt;61&lt;/td&gt;
                    &lt;td&gt;2011/04/25&lt;/td&gt;
                    &lt;td&gt;$320,800&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Shad Decker&lt;/td&gt;
                    &lt;td&gt;Regional Director&lt;/td&gt;
                    &lt;td&gt;Edinburgh&lt;/td&gt;
                    &lt;td&gt;51&lt;/td&gt;
                    &lt;td&gt;2008/11/13&lt;/td&gt;
                    &lt;td&gt;$183,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Michael Bruce&lt;/td&gt;
                    &lt;td&gt;Javascript Developer&lt;/td&gt;
                    &lt;td&gt;Singapore&lt;/td&gt;
                    &lt;td&gt;29&lt;/td&gt;
                    &lt;td&gt;2011/06/27&lt;/td&gt;
                    &lt;td&gt;$183,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Donna Snider&lt;/td&gt;
                    &lt;td&gt;Customer Support&lt;/td&gt;
                    &lt;td&gt;New York&lt;/td&gt;
                    &lt;td&gt;27&lt;/td&gt;
                    &lt;td&gt;2011/01/25&lt;/td&gt;
                    &lt;td&gt;$112,000&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
                &lt;tfoot&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Position&lt;/th&gt;
                    &lt;th&gt;Office&lt;/th&gt;
                    &lt;th&gt;Age&lt;/th&gt;
                    &lt;th&gt;Start date&lt;/th&gt;
                    &lt;th&gt;Salary&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/tfoot&gt;
              &lt;/table&gt;
            &lt;/div&gt;
  
          );
        }
      }
  
      export default Global;
  
  
  &lt;!-- end snippet --&gt;
  </code></pre>
  
  <p>This is my index.html file where my css and javascripts links and scripts are placed.I had kept some jQuery scripts is there any mistake in that scripts.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
  
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"&gt;
      &lt;link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"&gt;
      &lt;link rel="stylesheet" href="/css/custom.css"&gt;
      &lt;link rel="stylesheet" href="selectbox.min.css"&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body &gt;
      &lt;noscript&gt;
        You need to enable JavaScript to run this app.
      &lt;/noscript&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"&gt;
      &lt;script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js" /&gt;   
      &lt;script src="/js/validation.js"&gt;&lt;/script&gt;
      &lt;script src="selectbox.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>
  My error </p>
  
  <p><a href="https://i.stack.imgur.com/lZhqE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZhqE.png" alt="error image"></a></p>
  
  <p>Can anyone help me why this error occured.
  Thank you.</p>