studiointeract / accounts-ui

Accounts UI for React in Meteor 1.3+
MIT License
196 stars 80 forks source link

TypeError: onSubmitHook is not a function #122

Open sunlee-newyork opened 7 years ago

sunlee-newyork commented 7 years ago

Getting a type error originating from LoginForm component whenever a user is logged in with password:

meteor.js?hash=27829e9…:930 Exception in delivering result of invoking 'login': TypeError: onSubmitHook is not a function
    at https://localhost:3100/packages/std_accounts-ui.js?hash=18f1530d5d91a1746c405a2f0d81642f360bd4d2:2239:11
    at userCallback (https://localhost:3100/packages/accounts-password.js?hash=789606fc243ef7a21700cde709da427760db5073:105:21)
    at https://localhost:3100/packages/accounts-base.js?hash=cb3fcc0aec610d0c3194e574b77a7ce74e33b5a1:384:26
    at https://localhost:3100/packages/underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:794:19
    at loggedInAndDataReadyCallback (https://localhost:3100/packages/accounts-base.js?hash=cb3fcc0aec610d0c3194e574b77a7ce74e33b5a1:499:5)
    at MethodInvoker._callback (https://localhost:3100/packages/meteor.js?hash=27829e936d09beae3149ecfbf3332c42ccb1596f:1105:22)
    at MethodInvoker._maybeInvokeCallback (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3678:12)
    at MethodInvoker.receiveResult (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3698:10)
    at Connection._livedata_result (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:4816:9)
    at onMessage (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3525:206)

I noticed that the other onSubmitHook calls are called via this.state.onSubmitHook except this one.

Update

Error also occurs when you submit Forgot Password.

Update No.2

Also getting the same error for onPreSignUpHook during password sign up:

Uncaught TypeError: this.state.onPreSignUpHook is not a function
    at LoginFormExtended.signUp (std_accounts-ui.js?hash=d220771…:2446)
    at LoginFormExtended.signUp (app.js?hash=3802fc1…:6347)
    at EnhancedButton._this.handleTouchTap (modules.js?hash=f1e3258…:44868)
    at Object.ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (modules.js?hash=f1e3258…:13022)
    at executeDispatch (modules.js?hash=f1e3258…:12803)
    at Object.executeDispatchesInOrder (modules.js?hash=f1e3258…:12826)
    at executeDispatchesAndRelease (modules.js?hash=f1e3258…:12162)
    at executeDispatchesAndReleaseTopLevel (modules.js?hash=f1e3258…:12173)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (modules.js?hash=f1e3258…:13129)

signUp | @ | std_accounts-ui.js?hash=d220771…:2446
-- | -- | --
  | signUp | @ | app.js?hash=3802fc1…:6347
  | EnhancedButton._this.handleTouchTap | @ | modules.js?hash=f1e3258…:44868
  | ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback | @ | modules.js?hash=f1e3258…:13022
  | executeDispatch | @ | modules.js?hash=f1e3258…:12803
  | executeDispatchesInOrder | @ | modules.js?hash=f1e3258…:12826
  | executeDispatchesAndRelease | @ | modules.js?hash=f1e3258…:12162
  | executeDispatchesAndReleaseTopLevel | @ | modules.js?hash=f1e3258…:12173
  | forEachAccumulated | @ | modules.js?hash=f1e3258…:13129
  | processEventQueue | @ | modules.js?hash=f1e3258…:12376
  | runEventQueueInBatch | @ | modules.js?hash=f1e3258…:20852
  | handleTopLevel | @ | modules.js?hash=f1e3258…:20863
  | handleTopLevelImpl | @ | modules.js?hash=f1e3258…:25924
  | perform | @ | modules.js?hash=f1e3258…:17096
  | batchedUpdates | @ | modules.js?hash=f1e3258…:25837
  | batchedUpdates | @ | modules.js?hash=f1e3258…:15766
  | dispatchEvent | @ | modules.js?hash=f1e3258…:25999
sunlee-newyork commented 7 years ago

These hooks didn't work for me on Accounts.ui.config() nor as props to Accounts.ui.Form, and I finally figured out a temp solution to these errors: adding them to the state of my extended component:

class LoginFormExtended extends Accounts.ui.LoginForm {
    constructor(props) {
        super(props);
        this.state = {
            formState: props.type || STATES.SIGN_IN,
            // NOTE: Works here! Empty functions are placeholders to prevent std:accounts-ui error log
            onSignedInHook: () => {success("Welcome back! :)")},
            onPostSignUpHook: () => {success("Thanks for registering! Check your email for the verification link.")},
            onSubmitHook: ()=>{},
            onPreSignUpHook: ()=>{}
        };
    }

    ...etc.

Leaving this open until someone from std:accounts-ui responds with an official answer, and for anyone else who may be encountering the same issue.

EDIT

After posting this comment I suddenly realized that my constructor state is probably overriding the Accounts.ui.LoginForm state, which is where the error is originating from. Since I need to control the formState value while triggering LoginFormExtended, I'm leaving the state override in there, including the hooks. Would still appreciate the official response but so far it's working well, with the exception of a .createUser error message:

Exception in delivering result of invoking 'createUser': TypeError: _this7.setState is not a function
  at https://localhost:3100/packages/std_accounts-ui.js?hash=d220771dc51443a05888f7f71674abb24eaafdda:2424:20
    at https://localhost:3100/packages/accounts-base.js?hash=cb3fcc0aec610d0c3194e574b77a7ce74e33b5a1:384:26
    at https://localhost:3100/packages/underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:794:19
    at loggedInAndDataReadyCallback (https://localhost:3100/packages/accounts-base.js?hash=cb3fcc0aec610d0c3194e574b77a7ce74e33b5a1:499:5)
    at MethodInvoker._callback (https://localhost:3100/packages/meteor.js?hash=27829e936d09beae3149ecfbf3332c42ccb1596f:1105:22)
    at MethodInvoker._maybeInvokeCallback (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3678:12)
    at MethodInvoker.receiveResult (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3698:10)
    at Connection._livedata_result (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:4816:9)
    at onMessage (https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3525:206)
    at https://localhost:3100/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:2908:9
sunlee-newyork commented 7 years ago

If anyone is interested, solved the issue - it's because my extended component <LoginFormExtended /> had its own constructor overwriting <LoginForm /> and therefore the original component lost its this pointer. In the extended component, I set all my states (including login hooks) in componentWillMount (making sure to call super.componentWillMount() at the end.