由于 jsPDF，Webpack HMR 抛出 React syntheticEvent 错误
Webpack HMR Throws React syntheticEvent Error Due To jsPDF
系统信息：
OSX 10.12.4 Sierra
Node v7.10.0
npm v4.2.0
已测试浏览器：
Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0
问题：
我有一个应用程序 运行 在生产环境中有效运行，我克隆了它并尝试更新以准备构建 sequel。但是，我已经 运行 通过将它/React / HMR 更新到更新的版本来解决一个奇怪的 Webpack 问题。
HMR 将连接，Webpack 似乎可以正常编译。但是，与页面交互 （例如单击） 会生成以下错误：
显然，该应用程序此时已无法正常运行，因为单击内容不会触发任何内容。有趣的是，我们在 Node 控制台和浏览器上也得到如下 404 错误：
（注意：这似乎是一个包含函数的巨大查询字符串，具体引用了 syntheticEvent。如果您需要，我可以为您打印整个内容）
节点 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 compile everything 在生产模式下就好了，没有热加载器。当我们将 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 / Dev 模式下。
没有 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 class... 上初始化 .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
来自节点控制台的相同错误：
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
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 库中一些模糊的部分。
此问题有两个解决方案：
- 完全删除脚本 - 这就是我们所做的，因为我们不再在我们的应用程序中使用 jsPDF。
- 更新 jsPDF - 插件现在在
v1.3.4。之前的版本 v1.2.61、 与 React v15.0.0+ 本机库脚本产生了中断冲突 。新版本不会产生冲突。
希望这对以后的人有所帮助！
仅供参考；先前的解决方案不起作用并提示我们进行上述修复：
为了推进我们的项目，我们选择了使用 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+ 的问题 - 我设置它们的方式从根本上没有什么不同我们的原始堆栈。
怎么回事，很奇怪。
系统信息：
OSX 10.12.4 Sierra
Node v7.10.0
npm v4.2.0
已测试浏览器：
Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0
问题：
我有一个应用程序 运行 在生产环境中有效运行，我克隆了它并尝试更新以准备构建 sequel。但是，我已经 运行 通过将它/React / HMR 更新到更新的版本来解决一个奇怪的 Webpack 问题。
HMR 将连接，Webpack 似乎可以正常编译。但是，与页面交互 （例如单击） 会生成以下错误：
显然，该应用程序此时已无法正常运行，因为单击内容不会触发任何内容。有趣的是，我们在 Node 控制台和浏览器上也得到如下 404 错误：
节点 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 compile everything 在生产模式下就好了，没有热加载器。当我们将 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 / Dev 模式下。
没有 HMR 的生产构建编译得很好；引用 Webpack 通过该配置生成的缩小文件可以让应用程序 100% 正常运行。
完全相同的构建 运行在 React / DOM 0.14.8 中 100% 没问题，在 Dev 模式下，使用 HMR。将 ONLY Webpack / HMR / webpack-hot-middleware 升级到最新版本确实 NOT 触发错误。
我花了一些时间深入调试面板，发现了以下内容：
同样值得注意的是，控制台也会在您每次重新加载时触发以下错误，第一件事。
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
来自节点控制台的相同错误：
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
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 库中一些模糊的部分。
此问题有两个解决方案：
- 完全删除脚本 - 这就是我们所做的，因为我们不再在我们的应用程序中使用 jsPDF。
- 更新 jsPDF - 插件现在在
v1.3.4。之前的版本v1.2.61、 与React v15.0.0+本机库脚本产生了中断冲突 。新版本不会产生冲突。
希望这对以后的人有所帮助！
仅供参考；先前的解决方案不起作用并提示我们进行上述修复：
为了推进我们的项目，我们选择了使用 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+ 的问题 - 我设置它们的方式从根本上没有什么不同我们的原始堆栈。
怎么回事，很奇怪。