TypeError: Unable to get property 'toLowerCase' of undefined or null reference

[tanzim]

Hi,

Trying to log in into one of our products built with react-stormpath (1.3.4) results in the following exception:

TypeError: Unable to get property 'toLowerCase' of undefined or null reference
  at value(~/react-stormpath/lib/index.js:812:0)
  at handler(~/react-stormpath/lib/index.js:10197:0)
  at handler(~/react-stormpath/lib/index.js:953:0)
  at func(~/react-stormpath/lib/index.js:898:0)
  at a(~/react/lib/ReactChildren.js:51:0)
  at subtreeCount(~/react/lib/traverseAllChildren.js:81:0)
  at o(~/react/lib/traverseAllChildren.js:93:0)
  at traverseAllChildren(~/react/lib/traverseAllChildren.js:168:0)
  at _react2(~/react/lib/ReactChildren.js:71:0)
  at _this(~/react-stormpath/lib/index.js:897:0)
  at func(~/react-stormpath/lib/index.js:901:0)
  at a(~/react/lib/ReactChildren.js:51:0)
  at o(~/react/lib/traverseAllChildren.js:81:0)
  at traverseAllChildren(~/react/lib/traverseAllChildren.js:168:0)
  at _react2(~/react/lib/ReactChildren.js:71:0)
  at _this(~/react-stormpath/lib/index.js:897:0)
  at func(~/react-stormpath/lib/index.js:901:0)
  at a(~/react/lib/ReactChildren.js:51:0)
  at o(~/react/lib/traverseAllChildren.js:81:0)
  at traverseAllChildren(~/react/lib/traverseAllChildren.js:168:0)
  at _react2(~/react/lib/ReactChildren.js:71:0)
  at this(~/react-stormpath/lib/index.js:897:0)
  at fieldMap(~/react-stormpath/lib/index.js:948:0)
  at value(~/react-stormpath/lib/index.js:1031:0)
  at value(~/react-stormpath/lib/index.js:10247:0)
  at renderedElement(~/react-dom/lib/ReactCompositeComponent.js:811:0)
  at renderedElement(~/react-dom/lib/ReactCompositeComponent.js:822:0)
  at w.performInitialMount(~/react-dom/lib/ReactCompositeComponent.js:362:0)
  at w.mountComponent(~/react-dom/lib/ReactCompositeComponent.js:273:0)
  at mountImage(~/react-dom/lib/ReactReconciler.js:46:0)
  at Mixin.mountChildren(~/react-dom/lib/ReactMultiChild.js:238:0)
  at this(~/react-dom/lib/ReactDOMComponent.js:692:0)
  at h.Mixin.mountComponent(~/react-dom/lib/ReactDOMComponent.js:516:0)
  at mountComponent(~/react-dom/lib/ReactReconciler.js:46:0)
  at w.performInitialMount(~/react-dom/lib/ReactCompositeComponent.js:371:0)
  at w.mountComponent(~/react-dom/lib/ReactCompositeComponent.js:273:0)
  at mountComponent(~/react-dom/lib/ReactReconciler.js:46:0)
  at w.performInitialMount(~/react-dom/lib/ReactCompositeComponent.js:371:0)
  at w.mountComponent(~/react-dom/lib/ReactCompositeComponent.js:273:0)
  at mountComponent(~/react-dom/lib/ReactReconciler.js:46:0)
  at w.performInitialMount(~/react-dom/lib/ReactCompositeComponent.js:371:0)
  at w.mountComponent(~/react-dom/lib/ReactCompositeComponent.js:273:0)
  at mountComponent(~/react-dom/lib/ReactReconciler.js:46:0)
  at w.performInitialMount(~/react-dom/lib/ReactCompositeComponent.js:371:0)
  at w.mountComponent(~/react-dom/lib/ReactCompositeComponent.js:273:0)
  at mountImage(~/react-dom/lib/ReactReconciler.js:46:0)
  at Mixin.mountChildren(~/react-dom/lib/ReactMultiChild.js:238:0)
  at this(~/react-dom/lib/ReactDOMComponent.js:692:0)
  at h.Mixin.mountComponent(~/react-dom/lib/ReactDOMComponent.js:516:0)
  at mountComponent(~/react-dom/lib/ReactReconciler.js:46:0)

The call stack points to this

This was noticed in IE 11 (11.713.10586.0)

Sadly, we don't have access to a box with IE to test things out right now, so that's all the information we can give you which was gathered from our crash reporter. I'll update the issue when I get more context.

Thanks.

[robertjd]

Thanks @tanzim for the report, we'll look into this.

[the-overengineer]

@tanzim Thanks for the report. Unfortunately don't have access to IE at the moment either, but will try out on one ASAP.

Could you tell me if you use a custom login form? In particular one with React elements inside of it. Not entirely sure yet (without the context), but it looks like a React element is being used in a custom LoginForm, and when the SDK tries to get the name of the function for some field binding magic so it behaves like normal inputs, but IE doesn't support getting the function's name.

If that is the case, we should be able to work around it.

[tanzim]

@Tweety-FER Correct. We're using a custom login form with react elements inside, specifically react bootstrap. Here's a snippet:

<LoginForm onSubmit={this.onSubmit} >
  <div className="sp-login-form">
    <h1 className="form-login-heading">Log in to your account</h1>
    <Row>
      <Col xs={12} md={12}>
        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>
              <Glyphicon
                glyph="envelope"
              />
            </InputGroup.Addon>
            <FormControl
              id="username"
              type="email"
              name="username"
              placeholder="Username (Your email address)"
              value={this.state.username}
              onChange={this.onChange}
              autoFocus
            />
          </InputGroup>
        </FormGroup>
...
</LoginForm>