Warning: CustomDisplayObject(...): A valid React element (or null) must be returned

[michalochman]

I am trying to subclass a ReactPIXI.Sprite component, but every time I try to use it, I get the following error:

Warning: CustomDisplayObject(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

The minimal implementation of the component would be:

import ReactPIXI from 'react-pixi'

const SubSprite = ReactPIXI.CustomPIXIComponent({
  customDisplayObject: function(props) {
    console.log('this is not even called once');
    return new ReactPIXI.Sprite(props);
  },
  customDidAttach: function() {},
  customWillDetach: function() {},
  customApplyProps(oldProps, newProps) {
    this.applyDisplayObjectProps(oldProps, newProps);
  }
});

export default SubSprite

Then, when I try to use it like this:

render() {
    return React.createElement(SubSprite, { texture: PIXI.Texture.fromFrame('frame.png') }, null)
}

I get the above error.

What is the correct way to create custom components? A relevant section in the docs would be nice. I have also tried the exact code the SpinningSpriteComponent from the examples is using and I get the same error.

NB I am using:

• react@15.4.2
• pixi.js@4.3.4
• react-pixi@0.9.5

[Izzimach]

Well CustomPIXIComponent is not used much (if at all) and so hasn't been updated for more recent versions of React. With the changes to React transactions and context over the last few versions, the calls are probably broken. I'll try to check on it next week.

[michalochman]

Wouldn't it be easier to just make createPIXIComponent method public API? The same goes for various Component Mixins that make up most of ReactPIXI components. Is there any reason for it not being exposed?

[Izzimach]

The React internals churn a lot and if I exposed all that stuff things would break even more often than they do already, so I don't want to expose more stuff.

If you're wanting to make a bunch of custom PIXI components then you're probably better off forking and adding your elements in ReactPIXI.js