How do you import the command mysqlx into my React App? - mysql

Question

I'm trying to import the command mysqlx into my React App.
I tried a couple of different methods but it does not recognize the command mysqlx in the console. It seems I can't call it without importing it into the app. I'm pretty new at this so it may be something easy. This is all on a local windows machine.
import mysqlx from '#mysql/xdevapi'
After I tried to run the app. See error below.
TypeError: Cannot read property 'toString' of undefined
(anonymous function)
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/lib/Protocol/Util/systemAttributes.js:101
98 | }
99 |
100 | const clientAttributes = {
> 101 | _pid: process.pid.toString(),
102 | _platform: platformName(),
103 | _os: osName(),
104 | _source_host: sourceHostName(),
View compiled
./node_modules/#mysql/xdevapi/lib/Protocol/Util/systemAttributes.js
http://localhost:3000/static/js/0.chunk.js:44169:30
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
▼ 2 stack frames were expanded.
(anonymous function)
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/lib/Protocol/Client.js:68
./node_modules/#mysql/xdevapi/lib/Protocol/Client.js
http://localhost:3000/static/js/0.chunk.js:22283:30
▲ 2 stack frames were expanded.
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/#mysql/xdevapi/lib/DevAPI/Session.js
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/lib/DevAPI/Session.js:32
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/#mysql/xdevapi/lib/DevAPI/ConnectionPool.js
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/lib/DevAPI/ConnectionPool.js:32
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/#mysql/xdevapi/lib/DevAPI/Client.js
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/lib/DevAPI/Client.js:32
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/#mysql/xdevapi/index.js
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/node_modules/#mysql/xdevapi/index.js:36
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
Module../src/App.js
http://localhost:3000/static/js/main.chunk.js:91:72
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:220:62
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:359:18
__webpack_require__
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/brian/OneDrive/Desktop/nms-appV4/nms-app/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:67
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Answer 1

There isn't much info presented here, but based on your error:
process.pid is undefined. You have to figure out why that is undefined. There are similar questions:
Node console.log(process.pid) prints undefined

Answer 2

I don't understand if this is something running with Electron or a plain browser web app, in any case, you don't seem to be running Node.js, but some other JS environment which does have the process API. If it's Electron, then using node as the target, as described in the answer linked by the first answer, should do the trick. If it's a plain browser web app, it won't work.

Answer 3

I figured it out, I used express to create a new route and was able to get the database connected via route.use() function.
For a follow up question please visit:
How to connect my route parameter in express with #mysql/x devAPI?