Inferno: Creating Component vNodes using createVNode is not allowed (inferno4)

[kurdin]

I am trying to convert my inferno v3 component to v4 and I have problem with this error:

Inferno Error: Creating Component vNodes using createVNode is not allowed. Use Inferno.createComponentVNode method.

What is guideline for replacing createVNode with createComponentVNode in inferno 4 ?
Should I use createComponentVNode only if type is Component and createVNode for everything else? if so, why this code throw Error? createVNode(2, 'div', props); type 2 is HTMLElement.

BTW, this is where I am trying to make it works:
https://github.com/infernojs/inferno-transition-group/blob/next/src/TransitionGroup.js#L176

[Havunen]

Yep you are right, except type 1 is html element :)

https://github.com/infernojs/inferno/blob/master/packages/inferno-vnode-flags/src/index.ts#L4

Maybe you forgot to update package?

[kurdin]

@Havunen no, I want to reuse inferno-transition-group package but looks like it was not correctly updated to use with v4, so I created local copy to play with it.

What would be the right way to update this code to work with 4?

return createVNode(typeof component === 'string' ? 2 : 16, component, props && props.className, childrenToRender, props);

https://github.com/infernojs/inferno-transition-group/blob/next/src/TransitionGroup.js#L176

[Havunen]

Yeah, looks like it old. Let me update it quickly. Maybe somebody else is having same issue

[Havunen]

There is now 3.0.1 (next) for inferno-transition-group, It should work.

[Havunen]

Please re-open if there is still issue.

[kurdin]

@Havunen wow, so many changes )) Thank you for doing this. I could not figure this out on my own.
What the difference between cloneVNode and directClone ?

Another question that makes v3 components harder to cover to v4. What code/technique should we use instead var node = Inferno.findDOMNode(this); this is quite common in some React components.

[Havunen]

You can check our inferno-compat implementation for that, its pretty good (fast and small)

[kurdin]

@Havunen
After your update, first render of items is fine but then on adding new item to group I have error in performEnter method:

TransitionGroup.js:108 Uncaught (in promise) 
TypeError: Cannot read property 'componentWillEnter' of undefined
    at TransitionGroup._this.performEnter (TransitionGroup.js:108)

let component = this.refs[key]; this new key item could not be found in
this.refs it's not updated with new item's key.

https://github.com/infernojs/inferno-transition-group/blob/next/src/TransitionGroup.js#L101

Look like this method not executed for new items.
el.ref = instance => this.refs[key] = instance;

https://github.com/infernojs/inferno-transition-group/blob/next/src/TransitionGroup.js#L174

Can you look please?

[kurdin]

@Havunen looks like the problem in not in TransitionGroup but in Inferno v4. When I have list and I add new item at the beginning of that list, Inferno executes mountClassComponentCallbacks with vNode that last in the list (and was already there). Pushing element to the end of the list works as expected and there is no problem with TransitionGroup.

code is here:
https://github.com/kurdin/inferno-animate-css/tree/inferno4
inferno4 branch

$ npm install

$ npm run demo

[Havunen]

Ok, lets re-open this. I will look into this at some point. I'm busy atm.

[Havunen]

@kurdin If you got time, could you try to provide test case to inferno-transition-group repo?

[kurdin]

@Havunen ok, will do

[kurdin]

@Havunen I rewrite tests to reflect my situation and everything works as expected. No errors. So this must be a problem with my parent component InfernoCSSTransitionGroupChild that I moving to inferno4. I think you can close this issue, 'inferno-transition-group' works as expected.

[Havunen]

Ok, sure. If you still run into an issue please open new ticket :)

[jadeyabot]

@kurdin do u have a fix already for inferno ver 5?

[jadeyabot]

nevermind i tried your inferno4 pacakge and it worked. thanks!