सिस्टम जानकारी फेंकताWebpack HMR प्रतिक्रिया syntheticEvent त्रुटि कारण jsPDF
Chrome 58.0.3029.110
Safari 10.1
Firefox 53.0
समस्या:
मेरे पास एक ऐसा ऐप है जो उत्पादन में प्रभावी ढंग से चल रहा है जिसे मैंने क्लोन किया है और एक अनुक्रम बनाने के लिए तैयारी में अद्यतन करने का प्रयास कर रहा हूं। हालांकि, मैंने हाल ही में निर्माण के लिए इसे/प्रतिक्रिया/एचएमआर अपडेट करके एक अजीब वेबपैक मुद्दे में भाग लिया है।
एचएमआर कनेक्ट होगा, और वेबपैक ठीक से संकलित प्रतीत होता है। हालांकि, पेज (जैसे क्लिक के रूप में) के साथ बातचीत निम्न त्रुटि उत्पन्न करता है: जाहिर है
, अनुप्रयोग नहीं रह बातें कुछ भी बंद आग नहीं करता है क्लिक करने के रूप कार्यात्मक उस बिंदु पर है। दिलचस्प बात यह है, हम भी नोड कंसोल में निम्नलिखित 404 त्रुटि हो और ब्राउज़र पर:
(नोट:। इस एक विशाल क्वेरी स्ट्रिंग सहित काम करता है, और विशेष रूप से syntheticEvent संदर्भित हो गया लगता है मैं पूरी बात मुद्रित कर सकते हैं
नोड v6.3.1
प्रासंगिक NPMs के लिए 210
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));
अब, यहाँ अजीब हिस्सा है। बेबेल/वेबपैक संकलन सब कुछ हॉट रीलोडर के बिना, उत्पादन मोड में बस ठीक है। जब हम नोड एनएनवी को 'प्रोडक्शन' पर सेट करते हैं तो ऐप पूरी तरह से ठीक चलता है - कोई सिंथेटिक इवेंट त्रुटियां नहीं।
इसके अलावा, एप्लिकेशन देव मोड (गर्म पुन: लोड के साथ) में चलाता है ठीक पिछले ढेर है, जो निम्नलिखित 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:
हमने प्रतिक्रिया/प्रतिक्रिया डीओएम 0.14.8 से v15.0.0 पर माइग्रेशन करने की समस्या को अलग कर दिया है।ऐसा करने से तत्काल हमारी त्रुटि को ट्रिगर करता है - लेकिन केवल एचएमआर/देव मोड में।
एचएमआर के बिना उत्पादन निर्माण, बस ठीक है; संशोधित फ़ाइलों का संदर्भ देना वेबपैक उस कॉन्फ़िगरेशन के माध्यम से उत्पन्न करता है, ऐप को सामान्य रूप से 100% कार्य करने देता है।
ठीक उसी का निर्माण प्रतिक्रिया/डोम 0.14.8, देव मोड में, HMR साथ में 100% ठीक चलाता है। का उन्नयन केवल नवीनतम संस्करणों के लिए वेबपैक/एचएमआर/वेबपैक-हॉट-मिडलवेयर त्रुटि को ट्रिगर नहीं करता है।
मैं कुछ समय बिताया डीबग पैनल में खुदाई और निम्नलिखित पाया:
यह वास्तविक घटना वस्तु पर एक सभ्य नज़र प्रतिक्रिया द्वारा मूल रूप से उत्पन्न किया जा रहा है। इस मामले में, एक "टॉपक्लिक" जो हमारे द्वारा बनाए गए किसी भी हैंडलर से संबद्ध नहीं है। मैं पृष्ठ पर कहीं भी क्लिक करके इस & त्रुटि को सचमुच आग लगा सकता हूं।
इस लाइन जहां त्रुटि वास्तव में होता है। यह प्रतिक्रिया-डोम/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
** अद्यतन: ** आगे खुदाई करने पर, यह प्रतीत होता है उन्नयन प्रतिक्रिया करने के लिए है कि v15 + क्या बातें टूट जाता है - लेकिन मैं बिल्कुल यकीन है कि क्यों नहीं कर रहा हूँ। v14.8 ठीक काम करता है, और यह ** ** ** प्रकट नहीं होता है कि वेबपैक 2/वेबपैक-हॉट-मिडलवेयर के माध्यम से एचएमआर को कार्यान्वित करने में कोई भी बदलाव हुआ है _this हमारे गर्म पुनः लोड हैंडलर प्रतिक्रिया में है: _ 'if (मॉड्यूल .hot) { module.hot।स्वीकार करना(); } ' – Zfalen
क्या आप उस कोड को साझा कर सकते हैं जहां यह त्रुटि उत्पन्न की जा रही है? आप घटना वस्तु का उपयोग कर रहे हैं? क्या आप घटना ऑब्जेक्ट को किसी प्रकार के एसिंक ऑपरेशन में उपयोग करने का प्रयास कर रहे हैं? –
मुझे नहीं लगता कि यह अकेले प्रतिक्रिया अपग्रेड के कारण होता है। त्रुटि का मूल रूप से एक क्लिक इवेंट ऑब्जेक्ट आपके फ़ंक्शन में से एक को पास किया जाता है, जो उम्मीद करता है कि यह 'कॉल' विधि हो। आपको उस कोड को दिखाना होगा जो अपवाद फेंकता है और आपके पैकेज के सभी * परिवर्तन * .0son –