I have a such seat map template that is registered in my seat_map.js

<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">
    <t t-name="my_module.SeatMapTemplate" owl="1">
        //////////
    </t>
</templates>

export class SeatMapTemplate extends Component {
// My code
}

SeatMapTemplate.template = "my_module.SeatMapTemplate";

registry.category("components").add("seat_map_modal", SeatMapTemplate);

But when I try to render this template in other template using t-component, it shows error

    <t t-if="showSeatMap">
        <t t-component="seat_map_component" />
    </t>

Caused by: TypeError: Cannot read properties of undefined (reading 'name')
    at TicketSearchResults.template (eval at compile (http://localhost:8069/web/assets/1761-d0cd20b/web.assets_common.min.js:2075:421), <anonymous>:197:159)

I correctly imported all in my manifest

I have a such seat map template that is registered in my seat_map.js

<?xml version="1.0" encoding="utf-8"?>
<templates xml:space="preserve">
    <t t-name="my_module.SeatMapTemplate" owl="1">
        //////////
    </t>
</templates>

export class SeatMapTemplate extends Component {
// My code
}

SeatMapTemplate.template = "my_module.SeatMapTemplate";

registry.category("components").add("seat_map_modal", SeatMapTemplate);

But when I try to render this template in other template using t-component, it shows error

    <t t-if="showSeatMap">
        <t t-component="seat_map_component" />
    </t>

Caused by: TypeError: Cannot read properties of undefined (reading 'name')
    at TicketSearchResults.template (eval at compile (http://localhost:8069/web/assets/1761-d0cd20b/web.assets_common.min.js:2075:421), <anonymous>:197:159)

I correctly imported all in my manifest

• odoo
• owl-carousel

• do you really mean seat_map_component in the t-component part, instead of seat_map_modal? – farisfath25 Commented Mar 21 at 2:28

2 Answers 2

t-component mainly uses a variable or method to evaluate.
try adding this in the main component.

get seat_map_component(){
        return registry.category('components').get('seat_map_modal');
    };

The "t-component" directive used to accept dynamic values in a template.

you can refere below code example.

+++++ Xml +++++

<t t-component="state.currentComponent" t-props="frontdeskProps"/>

+++++ JS +++++

export class Frontdesk extends Component {

   setup() {

               this.state = useState({currentComponent: !this.props.isMobile ? WelcomePage :       VisitorForm,});

}

}