如何将命令 mysqlx 导入我的 React 应用程序？答案

【问题标题】：How do you import the command mysqlx into my React App?如何将命令 mysqlx 导入我的 React 应用程序？
【发布时间】：2020-02-29 08:46:16
【问题描述】：

我正在尝试将命令 mysqlx 导入我的 React 应用程序。

我尝试了几种不同的方法，但它无法识别控制台中的命令 mysqlx。如果不将其导入应用程序，我似乎无法调用它。我对此很陌生，所以这可能很容易。这一切都在本地 Windows 机器上。

import mysqlx from '@mysql/xdevapi'

在我尝试运行应用程序之后。请参阅下面的错误。

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.

【问题讨论】：

能否包含发生错误的代码？ systemAttributes.js 在第 101 行附近。编辑，我看到这是来自 node_modules。你的 package.json 中有什么？
当我转到那个文件const clientAttributes = { _pid: process.pid.toString(), _platform: platformName(), _os: osName(), _source_host: sourceHostName(), _client_name: 'mysql-connector-nodejs', _client_version: pkg.version, _client_license: pkg.license }; module.exports = function () { return clientAttributes; };时，这是我拉的
在我的包Json文件夹{ "name": "nms-app", "version": "0.1.0", "private": true, "dependencies": { "@mysql/xdevapi": "^8.0.18", "bootstrap": "^4.3.1", "jquery": "^3.4.1", "popper.js": "^1.16.0", "react": "^16.11.0", "react-dom": "^16.11.0", "react-popper": "^1.3.4", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0", "react-transition-group": "^4.3.0", "reactstrap": "^8.1.1", "typescript": "^3.6.4" }

标签： mysql node.js reactjs mysql-connector mysql-8.0

【解决方案1】：

此处提供的信息不多，但根据您的错误：

process.pid 未定义。你必须弄清楚为什么这是未定义的。有类似的问题：

Node console.log(process.pid) prints undefined

【讨论】：

我不认为这是问题所在，我在整个文件夹中搜索了电子这个词，它只有一个名为 electron to chromium 插件的纱线模块。我确实使用了一个 npm 包来改变我的使用 npx create-react-app 后将 yarn.lock 文件转换为 Json 文件。然后插入上面列出的所有依赖项。然后尝试将 mysqlx 导入应用程序以编写组件以连接到 MYSQL 数据库。我希望这会有所帮助。

【解决方案2】：

我不明白这是使用 Electron 还是普通浏览器 Web 应用程序运行的东西，无论如何，您似乎没有运行 Node.js，而是其他一些具有 process 的 JS 环境API。如果它是电子，那么使用node 作为target，如第一个答案链接的答案中所述，应该可以解决问题。如果它是一个普通的浏览器网络应用程序，它将无法工作。

【讨论】：

您是否有一步一步的过程来将函数从@mysql/xdevapi 添加到React 开发的应用程序/网站？
它与 React 无关。底层驱动程序代码使用 Node.js TCP/TLS 套接字 API 与 MySQL 服务器通信，因此它不能在浏览器中工作，除非有某种基于 websockets 或其他网络级浏览器 API 的 shim .我不知道，因为我不是很喜欢前端的东西，但谁知道呢。在任何情况下，驱动程序都适用于 Node.js 引擎，而不是任何 JavaScript 环境。

【解决方案3】：

我想通了，我使用 express 创建了一个新路由，并且能够通过 route.use() 函数连接数据库。

如需后续问题，请访问：

How to connect my route parameter in express with @mysql/x devAPI?

【讨论】：