I am using ReactJS and Flux in my app and everything is working fine with node 0.10. version and i upgraded to 0.12 and now i am getting errors in Flux Dispatcher.js file.
Here is the Error i am getting:
Uncaught TypeError: this._callbacks[id] is not a function.
The Code that's causing the issue is:
Dispatcher.prototype._invokeCallback = function _invokeCallback(id) {
this._isPending[id] = true;
this._callbacks[id](this._pendingPayload);
this._isHandled[id] = true;
};
Do i need to change the Dispatcher to conform to ES6 Syntax.
I needed to change my app specific classes for upgrade.
I think the change i made below is causing the issue.
// This is what i ad before the upgrade
//this.subscribe(() => this._registerToActions.bind(this));
// I changed it to below after the upgrade as i was getting errors.
this._registerToActions = this._registerToActions.bind(this);
I had to change this as i was getting the Error:
Uncaught TypeError: this.subscribe is not a function
Here is complete stack trace:
Uncaught TypeError: this._callbacks[id] is not a function_invokeCallback @ build.js:212dispatch @ build.js:188loginUser @ build.js:28479login @ build.js:28893executeDispatch @ build.js:6975SimpleEventPlugin.executeDispatch @ build.js:21216forEachEventDispatch @ build.js:6963executeDispatchesInOrder @ build.js:6984executeDispatchesAndRelease @ build.js:6353forEachAccumulated @ build.js:23237EventPluginHub.processEventQueue @ build.js:6560runEventQueueInBatch @ build.js:14926ReactEventEmitterMixin.handleTopLevel @ build.js:14952handleTopLevelImpl @ build.js:15038Mixin.perform @ build.js:22192ReactDefaultBatchingStrategy.batchedUpdates @ build.js:13370batchedUpdates @ build.js:20363ReactEventListener.dispatchEvent @ build.js:15132
Here are the dependencies i am using
"dependencies": {
"bootstrap": "^3.3.0",
"flux": "^2.1.1",
"jwt-decode": "^1.1.0",
"react": "^0.13.3",
"react-mixin": "^1.1.0",
"react-router": "^0.13.2",
"reqwest": "^1.1.5",
"when" :"^3.7.2"
},
"devDepedencies":{
"babelify": "^6.1.0",
"browser-sync": "^2.1.6",
"browserify": "^8.0.3",
"clean-css": "^3.1.9",
"eslint": "^0.14.1",
"rework": "^1.0.1",
"rework-npm": "^1.0.0",
"rework-npm-cli": "^0.1.1",
"serve": "^1.4.0",
"uglify-js": "^2.4.15",
"watchify": "^2.1.1"
}
Dispatcher code from node_modules\flux\dist\Flux.js
var Dispatcher = (function () {
function Dispatcher() {
_classCallCheck(this, Dispatcher);
this._callbacks = {};
this._isDispatching = false;
this._isHandled = {};
this._isPending = {};
this._lastID = 1;
}
/**
* Registers a callback to be invoked with every dispatched payload. Returns
* a token that can be used with `waitFor()`.
*/
Dispatcher.prototype.register = function register(callback) {
var id = _prefix + this._lastID++;
this._callbacks[id] = callback;
return id;
};
/**
* Removes a callback based on its token.
*/
Dispatcher.prototype.unregister = function unregister(id) {
!this._callbacks[id] ? true ? invariant(false, 'Dispatcher.unregister(...): `%s` does not map to a registered callback.', id) : invariant(false) : undefined;
delete this._callbacks[id];
};
/**
* Waits for the callbacks specified to be invoked before continuing execution
* of the current callback. This method should only be used by a callback in
* response to a dispatched payload.
*/
Dispatcher.prototype.waitFor = function waitFor(ids) {
!this._isDispatching ? true ? invariant(false, 'Dispatcher.waitFor(...): Must be invoked while dispatching.') : invariant(false) : undefined;
for (var ii = 0; ii < ids.length; ii++) {
var id = ids[ii];
if (this._isPending[id]) {
!this._isHandled[id] ? true ? invariant(false, 'Dispatcher.waitFor(...): Circular dependency detected while ' + 'waiting for `%s`.', id) : invariant(false) : undefined;
continue;
}
!this._callbacks[id] ? true ? invariant(false, 'Dispatcher.waitFor(...): `%s` does not map to a registered callback.', id) : invariant(false) : undefined;
this._invokeCallback(id);
}
};
/**
* Dispatches a payload to all registered callbacks.
*/
Dispatcher.prototype.dispatch = function dispatch(payload) {
!!this._isDispatching ? true ? invariant(false, 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.') : invariant(false) : undefined;
this._startDispatching(payload);
try {
for (var id in this._callbacks) {
if (this._isPending[id]) {
continue;
}
this._invokeCallback(id);
}
} finally {
this._stopDispatching();
}
};
/**
* Is this Dispatcher currently dispatching.
*/
Dispatcher.prototype.isDispatching = function isDispatching() {
return this._isDispatching;
};
/**
* Call the callback stored with the given id. Also do some internal
* bookkeeping.
*
* @internal
*/
Dispatcher.prototype._invokeCallback = function _invokeCallback(id) {
this._isPending[id] = true;
this._callbacks[id](this._pendingPayload);
this._isHandled[id] = true;
};
/**
* Set up bookkeeping needed when dispatching.
*
* @internal
*/
Dispatcher.prototype._startDispatching = function _startDispatching(payload) {
for (var id in this._callbacks) {
this._isPending[id] = false;
this._isHandled[id] = false;
}
this._pendingPayload = payload;
this._isDispatching = true;
};
/**
* Clear bookkeeping used for dispatching.
*
* @internal
*/
Dispatcher.prototype._stopDispatching = function _stopDispatching() {
delete this._pendingPayload;
this._isDispatching = false;
};
return Dispatcher;
})();
When i tried to debug i had 4 elements in this._callbacks
{ "ID_1": undefined, "ID_2": undefined, "ID_3": undefined, "ID_4": undefined, }
and this.pendingPayload is an Object with proper values. how ever the values in _callbacks are undefined and hence the Error.
Thanks
