Uncaught TypeError: DDP.onReconnect is not a function

guusvanw · October 3, 2017, 2:13pm

Hi,

I’m going through my first tutorial with Meteor and React. Now I’m stuck on the 8th step “Adding User Accounts”. Seems there is an error in the accounts_client.js file (or I’m missing crucial dependencies). This issue also occurs in IE and in Safari on my iPhone.

Repro steps

Open app (localhost:3000)
Sign in using email and password (or Facebook)
Loading sign keeps playing and error thrown in app

Error in Chrome console
accounts_client.js:291 Uncaught TypeError: DDP.onReconnect is not a function
at MethodInvoker.onResultReceived [as onResultReceived] (accounts_client.js:291)
at MethodInvoker.receiveResult (livedata_connection.js:460)
at Connection.livedata_result (livedata_connection.js:1636)
at onMessage (livedata_connection.js:276)
at stream_client_sockjs.js:174
at Array.forEach ()
at Function..each..forEach (underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:149)
at SockJS.self.socket.onmessage (stream_client_sockjs.js:173)
at SockJS.REventTarget.dispatchEvent (sockjs-0.3.4.js:87)
at SockJS._dispatchMessage (sockjs-0.3.4.js:1072)

Version file
accounts-base@1.3.4
accounts-facebook@1.2.1
accounts-oauth@1.1.15
accounts-password@1.4.0
accounts-ui@1.1.9
accounts-ui-unstyled@1.2.1
allow-deny@1.0.9
autopublish@1.0.7
autoupdate@1.3.12
babel-compiler@6.20.0
babel-runtime@1.0.1
base64@1.0.10
binary-heap@1.0.10
blaze@2.3.2
blaze-tools@1.0.10
boilerplate-generator@1.2.0
caching-compiler@1.1.9
caching-html-compiler@1.1.2
callback-hook@1.0.10
check@1.2.5
ddp@1.3.1
ddp-client@2.1.2
ddp-common@1.2.9
ddp-rate-limiter@1.0.7
ddp-server@2.0.2
deps@1.0.12
diff-sequence@1.0.7
dynamic-import@0.1.3
ecmascript@0.8.3
ecmascript-runtime@0.4.1
ecmascript-runtime-client@0.4.3
ecmascript-runtime-server@0.4.1
ejson@1.0.14
email@1.2.3
es5-shim@4.6.15
facebook-config-ui@1.0.0
facebook-oauth@1.3.2
fastclick@1.0.13
geojson-utils@1.0.10
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.2.12
id-map@1.0.9
insecure@1.0.7
jquery@1.11.10
launch-screen@1.1.1
less@2.7.9
livedata@1.0.18
localstorage@1.1.1
logging@1.1.17
meteor@1.7.2
meteor-base@1.1.0
minifier-css@1.2.16
minifier-js@2.1.3
minimongo@1.3.1
mobile-experience@1.0.4
mobile-status-bar@1.0.14
modules@0.10.0
modules-runtime@0.8.0
mongo@1.2.2
mongo-dev-server@1.0.1
mongo-id@1.0.6
npm-bcrypt@0.9.3
npm-mongo@2.2.30
oauth@1.1.13
oauth2@1.1.11
observe-sequence@1.0.16
ordered-dict@1.0.9
promise@0.9.0
random@1.0.10
rate-limit@1.0.8
react-meteor-data@0.2.13
reactive-dict@1.1.9
reactive-var@1.0.11
reload@1.1.11
retry@1.0.9
routepolicy@1.0.12
service-configuration@1.0.11
session@1.1.7
sha@1.0.9
shell-server@0.2.4
spacebars@1.0.15
spacebars-compiler@1.1.3
srp@1.0.10
standard-minifier-css@1.3.5
standard-minifier-js@2.1.1
static-html@1.2.2
templating@1.2.15
templating-compiler@1.2.15
templating-runtime@1.2.15
templating-tools@1.1.2
tmeasday:check-npm-versions@0.2.0
tracker@1.1.3
underscore@1.0.10
url@1.1.0
webapp@1.3.19
webapp-hashing@1.0.9

Hope this is enough information to find issue.

stecape · October 7, 2017, 4:26pm

Hello!
I have the same problem. I have realized a Google authentication with React, wrapping Blaze LoginButton. The login operation goes straight, Google login popup appears and after that I click login, a new user will be inserted in db.User collection. The only problem is the error above and the login three balls animation that keeps running. It happens also that sometimes, I don’t know how, if I interrupt the application the loading animation ends and “Name Surname Logout” appears.

server/main.js

import { ServiceConfiguration } from 'meteor/service-configuration';
 
 
Meteor.startup(() => {
ServiceConfiguration.configurations.upsert(
  { service: 'google' },
	  {
  	  $set: {
	    	clientId: "CLIENTID",
	    	secret: "SECRET",
 	    	loginStyle: 'popup',
      },
    }
  );
});

App.jsx

import { Meteor } from 'meteor/meteor';
import React, { PureComponent } from 'react';

import AccountsUIWrapper from './Navi/AccountsUIWrapper/AccountsUIWrapper.jsx';

export default class App extends PureComponent {
[some code skipped]

  render () {
    return (
        <section>
          <main>
            <AccountsUIWrapper />
          <main>
        </section>
    )
  }

AccountsUIWrapper.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';
 
export default class AccountsUIWrapper extends Component {
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      ReactDOM.findDOMNode(this.refs.container));
  }
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  }
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
}

Error recived in google chrome console:

Uncaught TypeError: DDP.onReconnect is not a function
at MethodInvoker.onResultReceived [as onResultReceived] (accounts-base.js:407)
at MethodInvoker.receiveResult (ddp-client.js:3696)
at Connection.livedata_result (ddp-client.js:4824)
at onMessage (ddp-client.js:3525)
at ddp-client.js:2907
at Array.forEach ()
at Function..each..forEach (underscore.js:149)
at SockJS.self.socket.onmessage (ddp-client.js:2906)
at SockJS.REventTarget.dispatchEvent (ddp-client.js:141)
at SockJS._dispatchMessage (ddp-client.js:1308)
onResultReceived @ accounts-base.js:407
receiveResult @ ddp-client.js:3696
_livedata_result @ ddp-client.js:4824
onMessage @ ddp-client.js:3525
(anonymous) @ ddp-client.js:2907
.each..forEach @ underscore.js:149
self.socket.onmessage @ ddp-client.js:2906
REventTarget.dispatchEvent @ ddp-client.js:141
SockJS._dispatchMessage @ ddp-client.js:1308
SockJS._didMessage @ ddp-client.js:1374
that.ws.onmessage @ ddp-client.js:1530

Version file:

accounts-base@1.3.3
accounts-google@1.2.0
accounts-oauth@1.1.15
accounts-ui@1.1.9
accounts-ui-unstyled@1.2.1
allow-deny@1.0.9
autopublish@1.0.7
autoupdate@1.3.12
babel-compiler@6.20.0
babel-runtime@1.0.1
base64@1.0.10
binary-heap@1.0.10
blaze@2.3.2
blaze-html-templates@1.1.2
blaze-tools@1.0.10
boilerplate-generator@1.2.0
caching-compiler@1.1.9
caching-html-compiler@1.1.2
callback-hook@1.0.10
check@1.2.5
ddp@1.3.1
ddp-client@2.1.2
ddp-common@1.2.9
ddp-rate-limiter@1.0.7
ddp-server@2.0.2
deps@1.0.12
diff-sequence@1.0.7
dynamic-import@0.1.3
ecmascript@0.8.2
ecmascript-runtime@0.4.1
ecmascript-runtime-client@0.4.3
ecmascript-runtime-server@0.4.1
ejson@1.0.14
es5-shim@4.6.15
fastclick@1.0.13
fourseven:scss@4.5.4
geojson-utils@1.0.10
google-oauth@1.2.4
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.2.12
id-map@1.0.9
insecure@1.0.7
jquery@1.11.10
kadira:flow-router@2.12.1
launch-screen@1.1.1
less@2.7.9
livedata@1.0.18
localstorage@1.1.1
logging@1.1.17
meteor@1.7.2
meteor-base@1.1.0
minifier-css@1.2.16
minifier-js@2.1.3
minimongo@1.3.1
mobile-experience@1.0.4
mobile-status-bar@1.0.14
modules@0.10.0
modules-runtime@0.8.0
mongo@1.2.2
mongo-dev-server@1.0.1
mongo-id@1.0.6
npm-container@1.2.0
npm-mongo@2.2.30
oauth@1.1.13
oauth2@1.1.11
observe-sequence@1.0.16
ordered-dict@1.0.9
promise@0.9.0
random@1.0.10
rate-limit@1.0.8
react-meteor-data@0.2.13
reactive-dict@1.1.9
reactive-var@1.0.11
reload@1.1.11
retry@1.0.9
routepolicy@1.0.12
service-configuration@1.0.11
session@1.1.7
shell-server@0.2.4
spacebars@1.0.15
spacebars-compiler@1.1.3
standard-minifier-css@1.3.5
standard-minifier-js@2.1.1
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tmeasday:check-npm-versions@0.2.0
tracker@1.1.3
ui@1.0.13
underscore@1.0.10
url@1.1.0
webapp@1.3.19
webapp-hashing@1.0.9

Thankyou for help!

Edit:
I have found out how to logged in Name Surname appears:
1 - Start application, login.
2 - Error on console
3 - Edit the app (also a white space somewhere is enough) and save.
4 - As soon as the meteor server restarts the animation stops and the name surname logout appears

stecape · October 8, 2017, 12:58pm

Solved!!!
Updated Meteor to 1.5.2.2, updated all packages. Now accounts-base is at version 1.3.4