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设置为＆＃39; PRODUCTION＆＃39; - 没有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",

更新5/16/17：

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

没有HMR的生产版本编译得很好;引用Webpack通过该配置生成的缩小文件让应用程序正常运行100％。

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

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

这是对React本机生成的实际事件对象的一个不错的看法。在这种情况下，＆＃34; topClick＆＃34;与我们创建的任何处理程序无关。我可以直接解雇这个＆amp;单击页面上的任意位置即可显示错误。

这是实际发生错误的行。它来自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

节点控制台出现同样的错误：

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

更新5/24/17：

我们终于找到了问题 - 一个经典的错误！

将整个堆栈重组为更符合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堆栈以及我们的Node / Express内容： https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

在一天结束时，这实现了我们将新堆栈推向最新技术的目标。并且，它可能比我们之前运行的更清洁。

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

无论发生什么事，都很奇怪。

Webpack HMR因jsPDF

1 个答案: