I'm trying to implement a search page in my website. The user should be able to enter a keyword and the website should return rows from the product table containing that keyword from the database.

I get this error when I try to establish a connection to the database

_stream_writable.js:57 Uncaught ReferenceError: process is not defined at ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1) at options.factory (react refresh:6:1)

This is the Search.jsx file.我创造

import {Component} from "react"; import ItemDisplay from "./itemDisplay"; import item from "./item"; import { test } from "./DB_functions"; class Search extends Component{ constructor() { super(); this.state = { items: [] } this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { console.log(this.state.value); alert('A name was submitted: ' this.state.value);// instead of this we send this.state.val to back var input = this.state.value.toLowerCase() //search in aws products var mysql = require('mysql'); alert("SQL required"); var sql = "SELECT * FROM products WHERE productName = ?" var con = mysql.createConnection({ host: "[Removed]", user: "[Removed]", password: "[Removed]", port: '3306', database: "hs_db" }); alert("Connection made"); con.query(sql, input, function(err, result) { alert("Query Sent"); if (err) throw err; else var usersRows = JSON.parse(JSON.stringify(result)); for (let i = 0; i 
  search