TypeError: Cannot read properties of undefined (reading 'iconType') in render function - vue 3

I am migrating my vue application from vue 2 to vue 3. I am getting this error while deleting (functional: true) option from a functional component. In my vue 2 application,i was using render function by passing props,data and listeners as parameters. Now, i have gone through the official docs but not able to understand how to pass parameters? Here is my vue 2 render function.

render(h, {props, data,listeners, children = []}) {
    let moreIcons = {};
    let cType = props.iconType || props.type;
    if(!cType) {
        cType = props.picto ? 'picto' : 'line'; 
    }
    if (cType === 'picto') {
        moreIcons = moreIconsPicto;
    } else if (cType === 'line') {
        moreIcons = moreIconsLine;
    }
    let cColor ='';
    if (props.primary||props.prim) { cColor= 'primary'; }
    else if (props.point||props.pnt) { cColor= 'point'; }
    else if (props.default||props.dft) { cColor= 'default'; }
    else if (!!props.color||!!props.col) { cColor= props.color||props.col; }

    let cSize = '' ;
    if(props.large || props.lg) {cSize= 'large';}
    else if(props.medium || props.md) {cSize= 'medium';}
    else if(props.small || props.sm) {cSize= 'small';}
    else if(props.xsmall || props.xs) {cSize= 'xsmall';}
    else if(props.full) {cSize= 'full';}

    let customSize = props.iconSize || props.size;
    if(parseInt(customSize, 10)) {customSize = customSize + 'px';}

    let iconName = props.icon || children.default().text;
    let options = {
        class: [
            'ur-icon',
            'ur-icon--'+cType,
            cColor && 'ur-icon--'+cColor,
            cSize &&'ur-icon--'+cSize,
            props.spacing && 'ur-icon--spacing'
        ],
        style: {
            fontSize: customSize
        },
        on: listeners
    };
    if(data.class) {
        if(Array.isArray(data.class)) {
            options.class = options.class.concat(data.class);
        }
        if(typeof data.class === 'string' || typeof data.class === 'object') {
            options.class.push(data.class);
        }
    }
    if(data.style) {
        options.style = Object.assign(data.style, options.style);
    }
    let child = [];
    if (moreIcons[iconName] !== undefined) {
        options.class.push('more-icon__'+iconName);
        let svg = moreIcons[iconName];
        if(!props.focusable) {svg = svg.replace('<svg ','<svg focusable="false" ');}
        options.domProps={innerHTML:svg};
    } else {
        // 1. icon class
        options.class.push('fa-'+iconName);
        // 2. type class
        if     ( props.brand )   { options.class.push('fab'); }
        else if( props.fab)      { options.class.push('fab'); }
        else if( props.regular ) { options.class.push('far'); }/* pro only */
        else if( props.far )     { options.class.push('far'); }/* pro only */
        else if( props.light)    { options.class.push('fal'); }/* pro only */
        else if( props.fal)      { options.class.push('fal'); }/* pro only */
        else if( props.old)      { options.class.push('fa'); }/* font-awesome 4.0*/
        else if( props.fa)       { options.class.push('fa'); }/* font-awesome 4.0*/
        else { options.class.push("fas"); }
    }
    return h('i',Object.assign(data, options));
},

How to migrate it to vue 3 render function or need to use setup function? If i use setup function then how can i pass data and listeners as params?

Updated 2022-01-14 11:18:47Z by user7411584

The h function should be imported from vue not used as parameter, I recommend to use the render function with setup hook as follows :

import { defineComponent, h } from "vue";

export default defineComponent({
  props: {
    ...
  },
  setup(props, { slots }) {
    let moreIcons = {};
    let cType = props.iconType || props.type;
     ...
     ....
    return () => h('i',Object.assign(data, options));
  },
});


Updated 2022-01-14 11:27:23Z by Boussadjra Brahim