SYSTEM INFO:
OSX 10.12.4 Sierra
Node v7.10.0
npm v4.2.0
BROWSERS TESTED:
Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0
THE PROBLEM:
我有一个在 生产环境 中有效运行的应用程序，我已经克隆并且正在尝试更新以准备构建续集 . 但是，我通过将它/ React / HMR更新到更新的版本来遇到一个奇怪的Webpack问题 .
HMR将连接，Webpack似乎编译得很好 . 但是，与页面交互（例如单击）会生成以下错误：
显然，应用程序在那时不再起作用，因为点击事物不会触发任何事情 . 有趣的是，我们还在Node控制台和浏览器中收到以下404错误：
（注意：这似乎是一个包含函数的巨型查询字符串，特别是引用syntheticEvent . 如果你愿意，我可以为你打印整件事）
NODE v6.3.1
RELEVANT NPMs:
"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']
}
]
}
};
WHERE WE LOAD UP 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'时，应用程序运行完全正常 - 没有syntheticEvent错误 .
此外，应用程序以开发模式（使用热重新加载）运行，使用前一个堆栈，包括以下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",
UPDATE 5/16/17:
我们已将问题从React / React DOM 0.14.8 迁移到 v15.0.0 . 这样做 immediately 会触发我们的错误 - 但 only in HMR / Dev mode.
没有HMR的 生产环境 版本编译得很好;引用Webpack通过该配置生成的缩小文件让应用程序正常运行100％ .
使用HMR，在Dev模式下， exact same build 在React / DOM 0.14.8 中运行100％ . 将 ONLY Webpack / HMR / webpack-hot-middleware升级到最新版本 NOT 会触发错误 .
我花了一些时间深入调试面板，发现以下内容：
这是对React本机生成的实际事件对象的一个不错的看法 . 在这种情况下，__995374_与我们创建的任何处理程序都没有关联 . 我可以通过单击页面上的任意位置来解决此问题和错误 .
这是实际发生错误的行 . 它来自react-dom / lib / SyntheticUIEvent.js - 似乎无法在SyntheticEvent类上初始化.call方法...
值得注意的是，控制台还会触发以下错误 every time you reload ，第一件事 .
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
The same error from the Node console:
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
1 回答
UPDATE 5/24/17:
我们终于找到了问题 - 一个经典的错误！
在将整个堆栈重组为更符合
create-react-app后，我将之前的React应用程序迁移到开发服务器索引文件中 . 按预期工作，虽然没有正确的HTML包装和样式等 .但是，当我将我们渲染应用程序的完整HTML页面迁移到
<div id="root>元素时，它再次开始吐出SyntheticEvent错误！许多工作和重组最终将问题分离到HTML文件（实际上，实际上，它实际上是一个EJS文件，主要包含基本骨架以及SEO跟踪）Here's the rub: 我们有一个过时的
<script/>标签正在呼叫jsPDF v1.2.61（https://github.com/MrRio/jsPDF） . 我们 are no longer actually using this plugin 并且由于合并冲突，脚本似乎已经回到了我们的代码中 .回想起来，OP中发布的代码确实引用了jsPDF插件，但是从应用程序的一开始就没有触及插件的堆栈跟踪，并采用了另一种方法，名称没有't ring any bells - given the later calls to React' s脚本，我只是假设堆栈跟踪的前三行左右表示jspdf是React库的一些不起眼的部分 .
这个问题有两个不对之处：
Remove the script entirely - 这就是我们所做的，因为我们不再在我们的应用程序中使用jsPDF .
Update jsPDF - 该插件现在位于
v1.3.4. 先前版本，v1.2.61， generates a breaking conflict ，带有React v15.0.0+本机库脚本 . 新版本 DOES NOT 产生冲突 .希望这将有助于未来的人！
Reference only; prior solution that did not work and tipped us off to the fix above:
为了推进我们的项目，我们选择了使用
create-react-app和custom-react-scripts的替代堆栈 .https://github.com/facebookincubator/create-react-app
https://github.com/kitze/custom-react-scripts
最终，我们（松散地）遵循这种模式同时运行CRA堆栈以及我们的Node / Express内容：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/
在一天结束时，这实现了我们将新堆栈推向最新的目标技术 . 并且，它可能比我们以前运行的更清洁 .
但是，我仍然对上述错误的起源感到十分困惑 . 我似乎复制了问题w /
Webpack 2和React 15+- 并且我从原始堆栈设置它们的方式没有根本不同 .无论发生什么事，都很奇怪 .