0

I want to use node.js on both the front-end and back-end. I followed Webpack Javascript Bundling for Both Front-end and Back-end (nodejs) by Soon Hin Khor, Ph.D. and I made a lot of progress. However, I can't find a way to include the node.js mysql. I have installed npm mysql. Here is my index.html

<!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://mysqljs.com/mysql.js"></script>

</head>
<body>
    <p>This text is from index.html</p>
    <script src="../dist/bundle-front.js"></script>
    <script src="../dist/bundle-back.js"></script>
    </body>
</html>

The bundle-front.js is working fine and I see "This text is from index.html" on the browser (Chrome) when I run index.html.

Here is my package.json

{
  "name": "web-pack-test",
  "version": "0.0.0",
  "description": "WebPackTest",
  "private": true,
  "author": "",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "babel-loader": "^8.1.0",
    "connect": "^3.7.0",
    "lodash": "^4.17.20",
    "mysql": "^2.18.1",
    "query": "^0.2.0",
    "request": "^2.79.0",
    "webpack-node-externals": "^2.5.2"
  }
}

Here is my webpack-back-config.js

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const nodeExternals = require('webpack-node-externals');

//Determining if crypto support is unavailable
let crypto;
try {
    crypto = require('crypto');    //This would give error
} catch (err) {
    console.log('crypto support is disabled!');
}

module.exports = {
    mode: 'development',
    target: "node",
    entry: {
        app: ["./src/back.js"]
    },
    output: {
        filename: 'bundle-back.js',
        path: path.resolve(__dirname, 'dist'),
    },
    
    
    node: {
        fs: "empty",
    }
};

Here is my back.js that produces bundle-back.js when WebPack is run.

 var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '*******',
    database: 'perfmngdb',
});

connection.connect(function (err) {
    if (err) throw err;
        console.log('Connected!');
});

connection.query('SELECT Description, Abbreviation FROM tblGrade', function (err, result) {
    if (err) {
        return console.error('error: ' + err.message);
    }
    console.log('Connected to the MySQL server.');

    console.log(result);
});

When the back.js is like the code above and after running WebPack I run index.html I get the error:

> back.js:2 Uncaught ReferenceError: mysql is not defined
    at eval (back.js:2)
    at Object../src/back.js (bundle-back.js:96)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object.0 (bundle-back.js:107)
    at __webpack_require__ (bundle-back.js:20)
    at bundle-back.js:84
    at bundle-back.js:87

on the Chrome Developer Console

If I add

const mysql = require(mysql);

at the top of back.js, run WebPack and index.html I get the error

Uncaught ReferenceError: require is not defined
    at eval (external_"mysql":1)
    at Object.mysql (bundle-back.js:118)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object../src/back.js (bundle-back.js:96)
    at __webpack_require__ (bundle-back.js:20)
    at eval (back.js:1)
    at Object.0 (bundle-back.js:107)
    at __webpack_require__ (bundle-back.js:20)
    at bundle-back.js:84

To summarise: I either get "mysql is not defined" or "require is not defined"

Thank you for your assistance.

GEM
  • 1
  • 1
  • Does this answer your question? https://stackoverflow.com/a/45820235/421195 – paulsm4 Sep 20 '20 at 18:36
  • @paulsm4. Thank you for your recommendation. I am having problems with the back-end part so my target: "node". The post you suggested is for target="web" – GEM Sep 21 '20 at 13:10
  • I think that "externals:" in my webpackback-config.js might be the solution. I have tried all sorts of combinations "externals" statement combinations that I have found on stackoverflow but they all result in the "mysql is not defined" error – GEM Sep 21 '20 at 13:15
  • I have decided to only use front-end node.js. I seem to be having more success now – GEM Sep 25 '20 at 05:40

0 Answers0