Javascript 使用傀儡无头模式的React SSR无法识别功能

我试图在名为

matrix

的函数中使用名为

Grid

的React自定义组件，一旦执行

matrix

后，它应该将

Grid

装入

ReactDOMServer

。但是

window

无法识别它，而是抛出一个错误

我在Puppeter headless browser中有一个脚本标记，它将这个函数注入DOM，还有一个div元素

matrix${index}

，应该用作将

Grid

注入的位置

木偶师配置文件：（为清晰起见发出代码）

以及要执行的函数

矩阵

：

const React = require('react');
const Grid= React.createFactory(require('../components/Grid'));

----------v // matrix is dimmed in my editor
function matrix(data) {
    const tableConfig = data.resp_example.meta.map((value, i) => ({
        title: (value.name || value.type).toUpperCase(),
        value: value => value[i]
    }));
    const values = data[0] && data[0].values[0];
    const matrix = ReactDOMServer.renderToString(
        <Grid config={tableConfig} data={values.samples[0].y} />
    );
    const matrixId = document.getElementById(`matrix${index}`);
    document.getElementById(`matrix${index}`).style.height = '400px';
    matrixId.innerHTML = matrix;
}

module.exports = matrix;

该行产生以下错误：

(node:6924) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: window.matrix is not a function
    at __puppeteer_evaluation_script__:1:346
    at Array.map (<anonymous>)
    at __puppeteer_evaluation_script__:1:70
    at Object.e.w (https://www.amcharts.com/lib/4/core.js:1:94464)
    at __puppeteer_evaluation_script__:1:14
    at ExecutionContext.evaluateHandle (C:\workspace\ReportService\node_modules\puppeteer\lib\ExecutionContext.js:121:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ExecutionContext.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:110:27)   
    at ExecutionContext.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\ExecutionContext.js:48:31)
    at ExecutionContext.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:111:23)   
    at DOMWorld.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\DOMWorld.js:112:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:110:27)
    at Page.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\Page.js:782:43)
    at Page.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:111:23)
    at e (C:\workspace\ReportService\build\server.js:1:6160)
    at e.next (<anonymous>)
    at a (C:\workspace\ReportService\build\server.js:1:4946)
    at s (C:\workspace\ReportService\build\server.js:1:6831)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:6924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6924) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

（节点：6924）未处理的PromisejectionWarning:错误：评估失败：TypeError:window.matrix不是函数
在(木偶演员)(评估)(剧本):1:346
在Array.map（）处
在(木偶演员)(评估)(剧本):1:70
在Object.e.w(https://www.amcharts.com/lib/4/core.js:1:94464)
在(木偶演员)(评估)(剧本):1:14
位于ExecutionContext.evaluateHandle（C:\workspace\ReportService\node\u modules\puppeter\lib\ExecutionContext.js:121:13）
在进程中。_tick回调（内部/process/next_tick.js:68:7）
--异步的--
在执行上下文中。（C:\workspace\ReportService\node\u modules\puppeter\lib\helper.js:110:27）
在ExecutionContext.evaluate（C:\workspace\ReportService\node\u modules\puppeter\lib\ExecutionContext.js:48:31）
在执行上下文中。（C:\workspace\ReportService\node\u modules\puppeter\lib\helper.js:111:23）
在DOMWorld.evaluate（C:\workspace\ReportService\node\u modules\puppeter\lib\DOMWorld.js:112:20）
在进程中。_tick回调（内部/process/next_tick.js:68:7）
--异步的--
在画面上。（C:\workspace\ReportService\node\u modules\puppeter\lib\helper.js:110:27）
在Page.evaluate（C:\workspace\ReportService\node\u modules\puppeter\lib\Page.js:782:43）
在第页。（C:\workspace\ReportService\node\u modules\puppeter\lib\helper.js:111:23）
在e（C:\workspace\ReportService\build\server.js:1:6160）
在e.next（）
在a（C:\workspace\ReportService\build\server.js:1:4946）
在s（C:\workspace\ReportService\build\server.js:1:6831）
在进程中。_tick回调（内部/process/next_tick.js:68:7）
（节点：6924）未处理的PromisejectionWarning:未处理的承诺拒绝。此错误源于在没有catch块的异步函数中抛出，或者拒绝未使用.catch（）处理的承诺。（拒绝id:1）
（节点：6924）[DEP0018]弃用警告：未处理的承诺拒绝已弃用。将来，未处理的承诺拒绝将使用非零退出代码终止Node.js进程。

看起来一切都应该正常，函数应该将

Grid

渲染到DOM中，有人知道这里出了什么问题吗

---

提前谢谢大家

显然，该错误源于节点内错误使用

Grid

作为ES6类组件语法，因为

Grid

是由

createReactClass

创建的，即：

const Grid=React.createReactClass（{…}）

解决这些问题的选项包括：

配置webpack babel transpiler以解释ES6类：
使用：
const matrix=ReactDOMServer.renderToString(
网格（{config:{tableConfig}，数据：{values.samples[0].y}）
);

而不是：
const matrix=ReactDOMServer.renderToString(
);

可以找到更多信息@
显然，该错误源于节点内错误使用
网格
作为ES6类组件语法，因为
网格
由
createReactClass
创建，即：

const Grid=React.createReactClass（{…}）

解决这些问题的选项包括：

配置webpack babel transpiler以解释ES6类：
使用：
const matrix=ReactDOMServer.renderToString(
网格（{config:{tableConfig}，数据：{values.samples[0].y}）
);

而不是：
const matrix=ReactDOMServer.renderToString(
);

更多信息可以在@
'./src/metrics/matrix.js'运行页面的服务器中有吗？@hardkoded-肯定。/src/metrics/matrix.js'运行页面的服务器中有吗？@hardkoded-肯定。@src/metrics/matrix.js'有吗
window.matrix(data);

(node:6924) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: window.matrix is not a function
    at __puppeteer_evaluation_script__:1:346
    at Array.map (<anonymous>)
    at __puppeteer_evaluation_script__:1:70
    at Object.e.w (https://www.amcharts.com/lib/4/core.js:1:94464)
    at __puppeteer_evaluation_script__:1:14
    at ExecutionContext.evaluateHandle (C:\workspace\ReportService\node_modules\puppeteer\lib\ExecutionContext.js:121:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ExecutionContext.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:110:27)   
    at ExecutionContext.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\ExecutionContext.js:48:31)
    at ExecutionContext.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:111:23)   
    at DOMWorld.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\DOMWorld.js:112:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:110:27)
    at Page.evaluate (C:\workspace\ReportService\node_modules\puppeteer\lib\Page.js:782:43)
    at Page.<anonymous> (C:\workspace\ReportService\node_modules\puppeteer\lib\helper.js:111:23)
    at e (C:\workspace\ReportService\build\server.js:1:6160)
    at e.next (<anonymous>)
    at a (C:\workspace\ReportService\build\server.js:1:4946)
    at s (C:\workspace\ReportService\build\server.js:1:6831)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:6924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6924) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

   npm install --save-dev babel-loader@6.2.1
   npm install --save-dev babel-core@6.4.5
   npm install --save-dev babel-preset-es2015@6.3.13
   npm install --save-dev babel-preset-react@6.3.13```