React: Default props for inherited components not working in IE10

[joeporpeglia]

Default props declared on a base class are not found by inheriting classes in IE10. This was observed in react 0.14.7 and 15.1.0. The example and codepen below should help reproduce.

http://codepen.io/anon/pen/zBxBwV?editors=0011

class TestBase extends React.Component {
  constructor(props) {
    super(props);
  }
}

TestBase.defaultProps = {
  message: 'this is a test message',
};

class Test extends TestBase {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.message}</div>;
  }
}

ReactDOM.render(
  <Test />,
  document.querySelector('main')
);

[vickenliu]

on the codepen page, it works fine. it renders 'this is a test message' @joevp

[joeporpeglia]

Using IE10? Hmm, is your browser configured in some way other than the default?

Edit for clarification: I tested on a clean modern.IE VM

Further edit for clarification: Appears to work in IE11+

[jimfb]

Confirmed, I see the same behavior on IE10.

@joevp The inheritance pattern is not a priority for us (also this affects only legacy browsers), but we would probably take a PR to fix this if you'd like to write up a fix.

[jimfb]

It's also not clear to me if this is a babel bug or a React bug. My intuition is that this looks like a babel bug, whereby the property isn't inherited properly on IE10.

cc @hzoo @kittens

[hzoo]

@joevp I would try the classes transform with loose mode + transform-proto-to-assign if you are using babel - ref http://babeljs.io/docs/usage/caveats/#internet-explorer

[jimfb]

Thanks @hzoo!

Yep, I think that mostly solves this mystery. I'm going to close this out as not-a-react-bug. But @joevp, if you see an easy workaround that would allow us to support this in the core, we'd likely take such a PR.

[joeporpeglia]

Looks like this might be a potential fix, but I haven't tested for any other side effects yet:

1. Update the original example to set default props on the base component's prototype (TestBase.prototype.defaultProps = ...)
2. Update this logic in ReactElement to look at type.prototype.defaultProps as well.

[hannesj]

@jimfb It seems this was fixed recently (6.14.0) in babel (https://github.com/babel/babel/pull/3527). Should I do a PR to update babel-plugin-transform-es2015-classes or dou you have another process for keeping the dependencies up to date?

[jimfb]

@hannesj I think Paul usually updates the dependencies in batches, but yeah, I suspect a PR would be welcomed. cc @zpao

[xfields]

Try this https://github.com/xfields/ie-class-inheritance-polyfill