Cannot read properties of undefined (reading 'query') error while trying to connect to a MySQL database in React app

Question

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.

My current code looks like this.

import mysql from 'mysql';

function App() {

async function syncItems() {

    console.log("Sync function start test");

    const connection = mysql.createConnection({
      host: "localhost",
      user: "root",
      password: "",
      database: "vaxpass",
      port: "3306"
    });


    await connection.promise.query('INSERT INTO records (nic) VALUES ("454534fsd");')

    console.log("Sync end test")  // This part doesn’t print
  }


return (
<Button color="success" onClick={() => { syncItems(); }}> Sync </Button>
);


}

Once I click the Sync button it returns following error.

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)

Answer 1

You are mixing up frontend code and backend code here.

Your React application runs in the browser, while your backend code runs in a NodeJS runtime deployed on a server. The mysql package you are importing is a NodeJS package, which cannot run in the browser.

You need to design your code in 2 parts: your backend code that will use something like express to create a REST endpoint that can get contacted by your second piece of code: the React app which will use the browser API fetch to make HTTP requests to your backend. In your backend code you will connect to the MySQL database to be able to store the data you receive on your endpoint.

You can take a look at many tutorials online for creating a web app. Here is an example of such tutorial that I picked at random on Google: How to Create a React App with a Node Backend. You can find many others, using many different media type (blog, podcast, video, etc).