When using a canvas component, mountedImages[i] is undefined

[natew]

Use case like so:

import { Button } from 'reapp-kit';
import { Surface, Text } from 'react-canvas';

export default class extends React.Component {
  render() {
    return (
      <Surface width={styles.width} height={styles.height} left={0} top={0}>
        <Text style={styles.text}>
          Here is some text
        </Text>
        <Button>
          hello world
        </Button>
      </Surface>
    );
  }
};

const styles = {
  width: window.innerWidth,
  height: window.innerHeight,

  text: {
    top: 20,
    left: 20,
    width: window.innerWidth,
    height: 20,
    lineHeight: 20,
    fontSize: 12
  }
}

Button is just a simple surface, but its defined in an different module. That module does a require('react-canvas') as well though.

Error is on this line: https://github.com/Flipboard/react-canvas/blob/3ac33e05ff9364a570613e3d57d1877563163a23/lib/ContainerMixin.js#L121

When inspecting that error, mountedImages looks like:

[RenderLayer, "<canvas width="400" height="400" style="width:200px;height:200px;" data-reactid="undefined.1"></canvas>"]

Seems like the problem is that it's expecting a RenderLayer but it's getting a string (the canvas string above).

Any ideas?

[natew]

@mjohnston Wondering, any way to reach you (email)? Have some questions and thoughts for ya.

[mjohnston]

Sure, mj@flipboard.com