🔧 OWL Component Not Rendering in Custom Layout (Odoo 18) — Likely XML Template Issue

Hello everyone,

I'm currently working on Odoo 18 and trying to render a simple OWL component inside a custom dashboard layout. Despite successfully loading all related JS files, the component does not appear in the UI, and I suspect the issue lies in how the XML template is handled.

📁 Project Structure

My layout is defined in:

my_module/static/src/views/dashboard_page_layout.xml

My JS files are located in:

my_module/static/src/js/

📦 Files

HelloBox.js

/** @odoo-module **/

import { Component, xml } from '@odoo/owl';

export class HelloBox extends Component {}

HelloBox.template = xml`
  <div class="hello-box">
    <h1><t t-esc="props.title"/></h1>
    <button t-on-click="sayHello">Click me</button>
  </div>
`;

HelloBox.props = {
  title: { type: String },
};

HelloBox.prototype.sayHello = function () {
  alert('Hello from OWL!');
};

HelloBox.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
  <t t-name="my_module.HelloBox" owl="1">
    <div class="p-3">
      <p><t t-out="props.title"/></p>
      <button>Click me</button>
    </div>
  </t>
</templates>

init_owl.js

/** @odoo-module **/

import { mount, whenReady } from '@odoo/owl';
import { HelloBox } from './HelloBox';

whenReady(() => {
  const root = document.getElementById('hello-box-root');
  console.log('Mounting HelloBox in:', root);

  if (root) {
    mount(HelloBox, {
      target: root,
      props: { title: 'Witaj z OWL!' },
    });
  }
});

In my dashboard_page_layout.xml, I manually placed:

<div id="hello-box-root"></div>

🧩 Problem Focus

✅ The JS loads successfully, console.log confirms the mount target exists, and the component code is correct.

❌ The XML template seems to be the weak point — I suspect it may not be loaded or registered correctly, despite being included in the assets.

In some cases I even get:

TypeError: Cannot read properties of undefined (reading 'defaultProps')

Which usually indicates OWL is trying to mount an incomplete or undefined component — possibly due to the XML template not being properly compiled or injected.

📜 __manifest__.py

'assets': {
    'web.assets_frontend': [
        'my_module/static/src/js/HelloBox.xml',
        'my_module/static/src/js/HelloBox.js',
        'my_module/static/src/js/init_owl.js',
    ],
},

I've also tried adding the XML to web.assets_qweb, web.assets_backend, and changing the load order, but the issue remains.

🙏 What I'm Looking For

• How should XML templates be properly registered in OWL/Odoo 18 when working with web.assets_frontend?
• Do I need to explicitly register or reference them in a different way?
• Is there anything missing to make this work with t-name="my_module.HelloBox"?
• Is using xml\template`` inside the JS file the preferred approach instead?

Any guidance would be highly appreciated.

Thanks in advance for your support!

Karol