I added mySql to my react project and now I get a build error

[Jonathan Small]

I have a very basic react application.  All it does is a DOM replacement of 2 <div> elements.  It works fine.  Then I installed mySql, added code to connect to my mySql database and read from a table.  The code looks like this:

import React from 'react';

import ReactDOM from 'react-dom';

// get the client

const mysql = require('mysql');

// First you need to create a connection to the db

   const con = mysql.createConnection({

     host: 'rds-mysql-wmcw.cgz0te1dlkah.us-east-1.rds.amazonaws.com',

     user: 'masterUsername',

     password: 'masterPassword',

     database : 'db_wmcw'

   });

//try to connect to the mySql database.  If an error occurs, display an error message on the console

   con.connect((err) => {

   if(err){

        const product_title = "No connection to the server";

        const product_description = err;

    } else {

        //a connection has been established to the database.  Now, run a query against the table 'homepage'

        //to retrieve each row and all columns of the table

        con.query('SELECT * FROM homepage', (err,rows) => {

        //if an error occurs when reading the data from the table, display the error on the console

        if(err) {

            const product_title = "Error reading data from the database";

            const product_description = err;

        } else {

            // a record has been read from the database

        const { product_title, product_description } = results[0];

        }

        });       

    }

   });

   con.end((err) => {

  // The connection is terminated gracefully

  // Ensures all previously enqueued queries are still

  // before sending a COM_QUIT packet to the MySQL server.

});

const appTitle = React.createElement('div', null, product_title);

const appDescription = React.createElement('div', null, product_description);

ReactDOM.render(appTitle, document.getElementById('appTitle'));

ReactDOM.render(appDescription, document.getElementById('appDescription'));

when i execute the npm start command from a comman prompt, I get the following errors:

ERROR in ./~/mysql/lib/Connection.js

Module not found: Error: Can't resolve 'net' in 'c:\jrs\final_project\forth_attempt\React\node_modules\mysql\lib'

 @ ./~/mysql/lib/Connection.js 3:23-37

 @ ./~/mysql/index.js

 @ ./src/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in ./~/mysql/lib/Connection.js

Module not found: Error: Can't resolve 'tls' in 'c:\jrs\final_project\forth_attempt\React\node_modules\mysql\lib'

 @ ./~/mysql/lib/Connection.js 4:23-37

 @ ./~/mysql/index.js

 @ ./src/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in ./~/mysql/lib/protocol/sequences/Query.js

Module not found: Error: Can't resolve 'fs' in 'c:\jrs\final_project\forth_attempt\React\node_modules\mysql\lib\protocol\sequences'

 @ ./~/mysql/lib/protocol/sequences/Query.js 6:19-32

 @ ./~/mysql/lib/Connection.js

 @ ./~/mysql/index.js

 @ ./src/index.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

webpack: Failed to compile.

Here is the code i my webpack.config.js

const { resolve } = require("path");

const webpack = require("webpack");

module.exports = {

  entry: resolve(__dirname, "src", "index.js"),

  output: {

    filename: "bundle.js",

    path: resolve(__dirname, "public"),

    publicPath: "/"

  },

  context: resolve(__dirname, "src"),

  devtool: "inline-source-maps",

  devServer: {

    contentBase: resolve(__dirname, "public"),

    publicPath: "/",

    historyApiFallback: true

  },

  module: {

    rules: [

      {

        test: /\.js$/,

        use: ["babel-loader"],

        exclude: /node_modules/

      }

    ]

  }

};

I figured all I should have to do is install mqSql and make use of it but I guess there is something that I am missing.

Any help would be greatly appreciated.

[Felix Geisendoerfer]

I think you're trying to use node-mysql in the browser. It doesn't work in the browser. It only works on the backend in node.

--
You received this message because you are subscribed to the Google Groups "node-mysql" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-mysql+...@googlegroups.com.
To post to this group, send email to node-...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-mysql.
For more options, visit https://groups.google.com/d/optout.