title: Cannot read properties of undefined (reading 'query') error while trying to connect to a MySQL database in React app
body: <p>I am trying to connect to a MySQL database and run a query inside a React application after I click a button. Some how it gives an error.</p>
  <p>My current code looks like this.</p>
  <pre><code>import mysql from 'mysql';
  
  function App() {
  
  async function syncItems() {
  
      console.log(&quot;Sync function start test&quot;);
  
      const connection = mysql.createConnection({
        host: &quot;localhost&quot;,
        user: &quot;root&quot;,
        password: &quot;&quot;,
        database: &quot;vaxpass&quot;,
        port: &quot;3306&quot;
      });
  
  
      await connection.promise.query('INSERT INTO records (nic) VALUES (&quot;454534fsd&quot;);')
  
      console.log(&quot;Sync end test&quot;)  // This part doesn’t print
    }
  
  
  return (
  &lt;Button color=&quot;success&quot; onClick={() =&gt; { syncItems(); }}&gt; Sync &lt;/Button&gt;
  );
  
  
  }
  </code></pre>
  <p>Once I click the <strong>Sync</strong> button it returns following error.</p>
  <pre><code>Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')
      at syncItems (App.js:78:1)
      at Object.onClick (App.js:213:1)
      at Button.onClick (Button.js:42:1)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
      at invokeGuardedCallback (react-dom.development.js:4056:1)
      at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
      at executeDispatch (react-dom.development.js:8243:1)
      at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
      at processDispatchQueue (react-dom.development.js:8288:1)
      at dispatchEventsForPlugins (react-dom.development.js:8299:1)
      at react-dom.development.js:8508:1
      at batchedEventUpdates$1 (react-dom.development.js:22396:1)
      at batchedEventUpdates (react-dom.development.js:3745:1)
      at dispatchEventForPluginEventSystem (react-dom.development.js:8507:1)
      at attemptToDispatchEvent (react-dom.development.js:6005:1)
      at dispatchEvent (react-dom.development.js:5924:1)
      at unstable_runWithPriority (scheduler.development.js:468:1)
      at runWithPriority$1 (react-dom.development.js:11276:1)
      at discreteUpdates$1 (react-dom.development.js:22413:1)
      at discreteUpdates (react-dom.development.js:3756:1)
      at dispatchDiscreteEvent (react-dom.development.js:5889:1)
  </code></pre>