node.js - 由于 jsPDF，Webpack HMR 抛出 React syntheticEvent 错误

Question

系统信息:

OSX 10.12.4 Sierra
Node v7.10.0
npm v4.2.0

已测试的浏览器:

Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0

问题:

我有一个在生产环境中有效运行的应用程序，我克隆了它并尝试更新以准备构建续集。但是，我通过将它/React/HMR 更新为更新的版本而遇到了一个奇怪的 Webpack 问题。

HMR 将连接，Webpack 似乎可以正常编译。但是，与页面交互(例如单击) 会生成以下错误:

显然，该应用程序此时已无法正常运行，因为点击内容不会触发任何内容。有趣的是，我们在 Node 控制台和浏览器上也收到了以下 404 错误:

(注意:这似乎是一个包含函数的巨大查询字符串，并且具体引用了 syntheticEvent。如果您愿意，我可以为您打印整个内容)

Node v6.3.1

相关 NPM:

"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.4",

"webpack": "^2.5.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"

"babel-cli": "^6.11.4",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.1",
"babel-loader": "^7.0.0",
"babel-plugin-array-includes": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.0.0",
"babel-plugin-transform-object-assign": "^6.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.24.1",

WEBPACK.CONFIG.DEV.JS:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var hotMiddlewareScript = 'webpack-hot-middleware/client';

console.log('using the dev config file');
console.log('THE PUBLIC PATH: ' + path.join(__dirname, '/CLIENTSIDE/static'));

module.exports = {
  devtool: 'eval',
  entry: {
    background: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/background')],
    uniqueShare: ['webpack-hot-middleware/client',  path.join(__dirname, '/CLIENTSIDE/components/uniqueShare')],
    starRating: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/starRating')],
    testingPage: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/testingPage')],
    style: ['webpack-hot-middleware/client', path.join(__dirname, '/CLIENTSIDE/components/style')]
  },
  output: {
    path: path.join(__dirname, '/CLIENTSIDE/static'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              cacheDirectory: true,
              presets: ['react', 'es2015', 'stage-1'],
              plugins: ['transform-decorators-legacy', 'transform-object-assign', 'array-includes'],
            },
        },
        {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    }
  };

我们在哪里加载 HMR:

  console.log('****************************** RUNNING IN DEV MODE ******************************');
  var webpack = require('webpack');
  var webpackConfig = require('./webpack.config.dev');
  var compiler = webpack(webpackConfig);

  console.log('Looking for the HMR here: ' + webpackConfig.output.publicPath);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
  }));

  app.use(require('webpack-hot-middleware')(compiler));

现在，这是奇怪的部分。 Babel/Webpack 在生产模式下编译一切都很好，没有热重新加载器。当我们将 Node ENV 设置为“PRODUCTION”时，应用程序运行得非常好——没有合成事件错误。

此外，该应用程序在开发模式下运行(带热重载)使用之前的堆栈就可以了，其中包括以下 NPM 版本:

"react": "^0.14.8",
"react-dom": "^0.14.3",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.0",

"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"

"babel": "^6.5.2",
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.0.2",
"babel-plugin-transform-react-constant-elements": "^6.0.2",
"babel-preset-es2015": "^6.0.8",
"babel-preset-react": "^6.0.2",

2017 年 5 月 16 日更新:

我们已将问题从 React/React DOM 0.14.8 迁移到 v15.0.0。这样做立即会触发我们的错误 - 但仅在 HMR/开发模式下。

没有 HMR 的生产构建编译得很好；引用 Webpack 通过该配置生成的缩小文件可以让应用程序 100% 正常运行。

完全相同的构建 在 React/DOM 0.14.8 中运行 100%，在 Dev 模式下，使用 HMR。将 ONLY Webpack/HMR/webpack-hot-middleware 升级到最新版本NOT 不会触发错误。

我花了一些时间深入调试面板，发现了以下内容:

这是对 React 原生生成的实际事件对象的一瞥。在本例中，“topClick”不与我们创建的任何处理程序相关联。我可以通过单击页面上的任意位置来触发此错误。

这是实际发生错误的行。它来自 react-dom/lib/SyntheticUIEvent.js - 并且似乎无法初始化 SyntheticEvent 类上的 .call 方法...

还值得注意的是，控制台还会在每次重新加载时触发以下错误，首先。

GET http://localhost:3333/[object%20Object]?url=function%20SyntheticEvent(dispa…d%20%3D%20emptyFunction.thatReturnsFalse%3B%0A%20%20return%20this%3B%0A%7D 404 (Not Found)
(anonymous) @ jspdf.debug.js:17350
l @ jspdf.min.js:284
u @ jspdf.min.js:284
XHR @ jspdf.debug.js:17334
Proxy @ jspdf.debug.js:16928
(anonymous) @ SyntheticEvent.js:188
(anonymous) @ SyntheticEvent.js:268
(anonymous) @ background.js:805
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ SyntheticCompositionEvent.js:13
(anonymous) @ background.js:2110
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ BeforeInputEventPlugin.js:16
(anonymous) @ background.js:1767
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ ReactDefaultInjection.js:14
(anonymous) @ background.js:1963
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ ReactDOM.js:16
(anonymous) @ ReactDOM.js:111
(anonymous) @ background.js:1844
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ index.js:3
(anonymous) @ background.js:812
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ background.js:9
(anonymous) @ background.js:3178
__webpack_require__ @ background.js:658
fn @ background.js:86
(anonymous) @ background:2
(anonymous) @ background.js:3287
__webpack_require__ @ background.js:658
(anonymous) @ background.js:707
(anonymous) @ background.js:710

来自 Node 控制台的相同错误:

GET /[object%20Object]?url=function%20SyntheticEvent(dispatchConfig%2C%20targetInst%2C%20nativeEvent%2C%20nativeEventTarget)%20%7B%0A%20%20if%20(process.env.NODE_ENV%20!%3D%3D%20%27production%27)%20%7B%0A%20%20%20%20%2F%2F%20these%20have%20a%20getter%2Fsetter%20for%20warnings%0A%20%20%20%20delete%20this.nativeEvent%3B%0A%20%20%20%20delete%20this.preventDefault%3B%0A%20%20%20%20delete%20this.stopPropagation%3B%0A%20%20%7D%0A%0A%20%20this.dispatchConfig%20%3D%20dispatchConfig%3B%0A%20%20this._targetInst%20%3D%20targetInst%3B%0A%20%20this.nativeEvent%20%3D%20nativeEvent%3B%0A%0A%20%20var%20Interface%20%3D%20this.constructor.Interface%3B%0A%20%20for%20(var%20propName%20in%20Interface)%20%7B%0A%20%20%20%20if%20(!Interface.hasOwnProperty(propName))%20%7B%0A%20%20%20%20%20%20continue%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(process.env.NODE_ENV%20!%3D%3D%20%27production%27)%20%7B%0A%20%20%20%20%20%20delete%20this%5BpropName%5D%3B%20%2F%2F%20this%20has%20a%20getter%2Fsetter%20for%20warnings%0A%20%20%20%20%7D%0A%20%20%20%20var%20normalize%20%3D%20Interface%5BpropName%5D%3B%0A%20%20%20%20if%20(normalize)%20%7B%0A%20%20%20%20%20%20this%5BpropName%5D%20%3D%20normalize(nativeEvent)%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20if%20(propName%20%3D%3D%3D%20%27target%27)%20%7B%0A%20%20%20%20%20%20%20%20this.target%20%3D%20nativeEventTarget%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20this%5BpropName%5D%20%3D%20nativeEvent%5BpropName%5D%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20var%20defaultPrevented%20%3D%20nativeEvent.defaultPrevented%20!%3D%20null%20%3F%20nativeEvent.defaultPrevented%20%3A%20nativeEvent.returnValue%20%3D%3D%3D%20false%3B%0A%20%20if%20(defaultPrevented)%20%7B%0A%20%20%20%20this.isDefaultPrevented%20%3D%20emptyFunction.thatReturnsTrue%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20this.isDefaultPrevented%20%3D%20emptyFunction.thatReturnsFalse%3B%0A%20%20%7D%0A%20%20this.isPropagationStopped%20%3D%20emptyFunction.thatReturnsFalse%3B%0A%20%20return%20this%3B%0A%7D 404 4.745 ms - 35162

Answer 1

2017 年 5 月 24 日更新:

我们终于弄清楚了这个问题 - 一个典型的错误!

在重组我们的整个堆栈以更符合 create-react-app 之后，我将我们之前的 React 应用程序迁移到开发服务器索引文件中。按预期工作，尽管没有正确的 HTML 包装和样式等。

但是，当我将呈现应用程序的完整 HTML 页面迁移到 <div id="root> 时元素，它又开始吐出 SyntheticEvent 错误!大量工作和重组最终将问题隔离到 HTML 文件(实际上，它最初实际上是一个 EJS 文件，主要包含基本框架和 SEO 跟踪)

问题在于:我们有一个过时的 <script/>正在调用 jsPDF v1.2.61 的标签( https://github.com/MrRio/jsPDF )。我们实际上不再使用这个插件，并且由于合并冲突，脚本似乎已经偷偷回到我们的代码中。

回想起来，OP 中发布的代码确实 引用了 jsPDF 插件，但堆栈跟踪并没有真正提供任何错误起源的指示。因为我们从应用程序的一开始就没有接触过这个插件，而是采用了一种替代方法，这个名字没有响起任何铃声 - 考虑到后来对 React 脚本的调用，我简单地假设了前三行左右堆栈跟踪表明 jspdf 是 React 库中一些模糊的部分。

此问题有两个解决方案:

1. 完全删除脚本 -这就是我们所做的，因为我们不再在我们的应用程序中使用 jsPDF。
2. 更新 jsPDF - 插件现在位于 v1.3.4 .先前版本，v1.2.61 , 与 React v15.0.0+ 产生中断冲突 native 库脚本。新版本不会产生冲突。

希望这对以后的人有所帮助!

仅供引用；先前的解决方案不起作用，并提示我们进行上述修复:

为了推进我们的项目，我们选择了使用 create-react-app 的替代堆栈。和 custom-react-scripts .

https://github.com/facebookincubator/create-react-app

https://github.com/kitze/custom-react-scripts

最终，我们(松散地)遵循这种模式来同时运行 CRA Stack 和我们的 Node/Express 东西: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

归根结底，这实现了我们将新堆栈推向最新技术的目标。而且，它可能比我们之前运行的要干净一些。

但是，对于上述错误的来源，我仍然完全不解。我已经在一堆其他测试堆栈中移动了东西，但似乎无法用 Webpack 2 复制问题和 React 15+ - 我从原始堆栈设置它们的方式没有根本不同。

无论发生什么，都非常奇怪。