React Node.js MySQL Uncaught ReferenceError: process is not defined

Question

I am trying to implement a search page into my website. The user should be able to input a keyword and the site should return the rows in a products table from a database that contain the keyword.

I am receiving this error when I try to establish the 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. I create

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<usersRows.length; i++){
                    if(usersRows[i]['name'].includes(input));{
                        console.log(usersRows[i]['name'])
                        this.state.items.push(usersRows[i]['name']);
                    }
                }
                console.log(usersRows);
        })
        con.end();

        var items = this.state.items
        // // this was demo search
        // const items = [];
        // for (let i = 0; i<this.state.orgitems.length; i++){
        //     if (this.state.orgitems[i].name.toLowerCase().includes(this.state.value.toLowerCase())){
        //         console.log(this.state.orgitems[i].name)
        //         items.push(this.state.orgitems[i]);
        //     }
        // }

        this.setState({items});

        // end demo
        event.preventDefault(); // recieve data, and then pass in data
    }

    render() {
        return(

            <div class='m-2'>


                <div className="input-group">
                    <input type="search" className="form-control rounded" placeholder="Search" aria-label="Search"
                           aria-describedby="search-addon" onChange={this.handleChange}/>
                    <button onClick={this.handleSubmit} type="button" className="btn btn-outline-dark">search</button>
                </div>
                <ItemDisplay items={this.state.items}></ItemDisplay>
            </div>
        );
    }
}




export default Search;

I know the error is being thrown when I try to create a connection to the database this line

var con = mysql.createConnection({
          host: "[Removed]",
          user: "[Removed]",
          password: "[Removed]", 
          port: '3306',
          database: "hs_db"
        });

but I know the information is correct. I was able to access the database without an issue on a different client. The error is also really vague so it is hard to debug

Answer 1

Never let the user access your database in the frontend. To do what you want to do you will need to create a backend server and communicate with it using HTTP requests.

You will find a tutorial on how to do that just here.