HỆ THỐNG INFO:Webpack HMR Ném Phản ứng syntheticEvent Lỗi Do Để jsPDF
OSX 10.12.4 Sierra
Node v7.10.0
npm v4.2.0
trình duyệt thử nghiệm:
Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0
CÁC VẤN ĐỀ:
Tôi có một ứng dụng đang chạy một cách hiệu quả trong sản xuất mà tôi đã nhân bản và đang cố gắng cập nhật để chuẩn bị xây dựng phần tiếp theo. Tuy nhiên, tôi đã gặp phải sự cố Webpack lạ khi cập nhật/React/HMR cho các bản dựng mới hơn.
HMR sẽ kết nối và Webpack xuất hiện để biên dịch tốt. Tuy nhiên, tương tác với các trang (như click) tạo ra các lỗi sau:
Rõ ràng, ứng dụng này là tại thời điểm đó không còn chức năng như nhấn điều không bắn ra bất cứ điều gì. Điều thú vị là, chúng tôi cũng nhận được lỗi sau 404 trong Node giao diện điều khiển và trên trình duyệt:
(Chú ý:. Này dường như là một chuỗi truy vấn khổng lồ các chức năng bao gồm, và đặc biệt là tham khảo syntheticEvent tôi có thể in toàn bộ điều cho bạn nếu bạn muốn)
NODE v6.3.1
NPMs LIÊN QUAN:
"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']
}
]
}
};
ĐÂU CHÚNG TÔI tải lên 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));
Bây giờ, đây là một phần kỳ lạ. Babel/Webpack biên dịch mọi thứ chỉ trong chế độ sản xuất mà không cần nạp lại nóng. Ứng dụng chạy hoàn toàn tốt khi chúng tôi đặt nút Node ENV thành 'PRODUCTION' - không có lỗi syntheticEvent.
Bên cạnh đó, các ứng dụng chạy trong chế độ dev (với nạp lại nóng) tốt bằng cách sử dụng ngăn xếp trước, trong đó bao gồm các phiên bản NPM sau:
"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",
CẬP NHẬT 5/16/17:
Chúng tôi đã tách biệt sự cố khi di chuyển khỏi React/React DOM 0.14.8 thành v15.0.0.Làm như vậy ngay lập tức kích hoạt lỗi của chúng tôi - nhưng chỉ chỉ ở chế độ HMR/Dev.
Bản xây dựng sản xuất, không có HMR, biên dịch tốt; tham chiếu các tệp được rút gọn mà Webpack tạo thông qua cấu hình đó cho phép chức năng ứng dụng 100% bình thường.
cùng một cấu trúc chính xác chạy 100% tiền phạt trong React/DOM 0.14.8, ở chế độ Dev, với HMR. Nâng cấp CHỈ Webpack/HMR/webpack-hot-middleware lên phiên bản mới nhất NOT kích hoạt lỗi.
tôi đã dành một số thời gian đào vào bảng debug và thấy như sau:
Đây là một cái nhìn phong nha tại đối tượng sự kiện thực tế được tạo ra tự nhiên bởi phản ứng. Trong trường hợp này, "topClick" không được liên kết với bất kỳ trình xử lý nào chúng tôi đã tạo. Tôi thực sự có thể kích hoạt lỗi này & lỗi bằng cách nhấp vào bất kỳ đâu trên trang.
Đây là dòng nơi lỗi thực sự xảy ra. Nó đến từ phản ứng-dom/lib/SyntheticUIEvent.js - và dường như đã thất bại trong việc khởi tạo một phương pháp .call trên lớp SyntheticEvent ... 
Nó cũng đáng chú ý là giao diện điều khiển cũng bắn các lỗi sau mỗi khi bạn tải lại, điều đầu tiên.
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
Các lỗi tương tự từ các 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
** CẬP NHẬT: ** Sau khi đào sâu hơn, có vẻ như việc nâng cấp lên React v15 + là điều làm hỏng mọi thứ - nhưng tôi không chắc chắn tại sao. v14.8 hoạt động tốt và không ** xuất hiện bất kỳ thay đổi nào để triển khai HMR qua Webpack 2/webpack-middleware trung gian đã xảy ra _đây là trình xử lý tải lại nóng của chúng tôi phản ứng: _ 'if (mô-đun .hot) { module.hot.Chấp nhận(); } ' – Zfalen
bạn có thể chia sẻ mã nơi có lỗi này không? nơi bạn đang sử dụng đối tượng sự kiện? bạn đang cố gắng sử dụng đối tượng sự kiện trong một số loại hoạt động không đồng bộ? –
Tôi không nghĩ rằng nó được gây ra bởi nâng cấp phản ứng một mình. Lỗi cơ bản có nghĩa là một đối tượng sự kiện nhấp chuột được chuyển đến một trong các hàm của bạn mà hy vọng nó có phương thức 'call'. Bạn phải hiển thị mã ném ngoại lệ và tất cả * thay đổi * của package.json –