Inferno: Components aren't rendered after upgrade from 3.6 to 5.4.2

[eramosr18]

Hi, I have a legacy app it was using a little old version of Inferno library, I updated to use the new 5.4.2 version after doing it the components don't render inside the UI, don't raise an exception though. I test it rendering html elements like div, p and it works, but when I use a custom component it doesn't show anything.
For references here is the package.json:
"dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-inferno": "^5.1.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-polyfill": "6.26.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.11.2", "inferno": "^5.4.2", "inferno-create-class": "^5.4.2", "inferno-create-element": "^5.4.2", "node-sass": "^4.9.3", "sass-loader": "^6.0.7", "style-loader": "^0.18.2", "webpack": "^2.7.0", "webpack2-polyfill-plugin": "0.0.2" }, "devDependencies": { "app-module-path": "^2.2.0", "chalk": "^1.1.3", "local-web-server": "^1.2.6", "mocha": "^3.5.3", "progress-bar-webpack-plugin": "^1.11.0", "zombie": "^5.0.8" },

Here is the piece of code that don't work:

Inferno.render( <App />, el );
It render the root element Container which is a div, but the App don't work at all. Please any advice to this, I tried everything.

[eramosr18]

It seems that inferno-create-class package is messing the object returned, since I tried with
````
var el = template.container.create();
const MyComponent = ({ name, age }) => (
My name is: { name } and my age is: {age}
);

    Inferno.render(
        <MyComponent />,
        el
    );

````
and it works as expected

[Havunen]

You should remove these packages:
babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-react-jsx": "^6.24.1
they are for React

[Havunen]

@eramosr18 What are you using inferno-create-class for? Its mainly for React compatibility if you want to use inferno-compat, but I dont see that package in your list.

[eramosr18]

@Havunen We have several components around 70 that use this component and they are written in an style similar to this example:

var Inferno       = require('inferno');
var createClass   = require('inferno-create-class');
var AngleDownIcon = require('shared/components/icons/angle-down');
var constants     = {
    scrollCheckTimeout: 8000,
    scrollCheckActive : 5000
};

function PanelBody () {

}

PanelBody.prototype = {

    getInitialState: function () {

        this.showScrollCheck  = this.showScrollCheck .bind(this);
        this.clearScrollCheck = this.clearScrollCheck.bind(this);
        this.setBodyRef       = this.setBodyRef      .bind(this);
        this.setCheckRef      = this.setCheckRef     .bind(this);

        if (this.props.showScrollCheck) {
            this.timeoutId = setTimeout(this.showScrollCheck, constants.scrollCheckTimeout);
        }

        return {};
    },

    componentWillUnmount: function () {
        clearTimeout(this.timeoutId);
    },

    showScrollCheck: function () {

        if (!this.props.showScrollCheck) { return; }

        var padding = 30;

        if (this.body &&
            this.body.scrollTop < (this.body.scrollHeight - this.body.clientHeight - padding)) {

            this.check.classList.remove(constants.hideClass);
        }

        this.timeoutId = setTimeout(this.clearScrollCheck, constants.scrollCheckActive);
    },

    clearScrollCheck: function () {

        this.check.classList.add(constants.hideClass);

        if (this.props.showScrollCheck && this.body.scrollHeight > this.body.clientHeight) {
            this.timeoutId = setTimeout(this.showScrollCheck, constants.scrollCheckTimeout);
        }
    },

    setBodyRef:  function (e) { this.body = e; },
    setCheckRef: function (e) { this.check = e; },

    render: function () {

        return (
            <div ref={this.setBodyRef}>
                {this.props.children}

                { 
                    this.props.showScrollCheck

                    ?

                        <div ref={this.setCheckRef}>
                            <AngleDownIcon></AngleDownIcon>
                            <AngleDownIcon></AngleDownIcon>
                            <AngleDownIcon></AngleDownIcon>
                        </div>

                    : null
                }
            </div>
        );
    }
};

module.exports = createClass(new PanelBody());

[eramosr18]

@Havunen I could remove those packages, but I made some tests and it seems the issue is in the inferno-create-class , the object it returns don't seems to function with the Inferno.render.
I'm afraid that your suggestion would be to re-rewrite our components, but if there is another option please share.

[Havunen]

I need to look into it after I'm done with my current task

[Havunen]

This is bug, thanks for reporting it @eramosr18

[Havunen]

This is fixed in dev and will be available in next release.