Hello everyone, I am developing a small Todo List app on Odoo 17 to learn Owl. Everything was progressing smoothly until I attempted to dynamically fetch and display data using orm with useService. I encountered the following error:

Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'orm' in undefined

I have extensively tried to resolve the issue by consulting the Owl and Odoo documentation, as well as searching for solutions online, but without success. The code adheres to the documentation, and I am uncertain about the source of this error.

Steps to Reproduce:

1. clone this repo somewhere

2. start odoo with this repo in the addons-path, on a recent version (odoo 17)

3. install the odoo_owl_app addon

4. go to the /owl-app route to see the result.

Code:

The root.js file contains the following codes:

/** @odoo-module */

import { Component, useState, useSubEnv, onWillStart } from "@odoo/owl";

import { useService } from "@web/core/utils/hooks";

import { WebsiteLayout } from "./layouts/website/layout"

import { TodoForm } from "./components/todo_form/todo_form";

import { Todos } from "./components/todos/todos";

export class Root extends Component {

    static template = "odoo_owl_app.root";

    static components = { WebsiteLayout, TodoForm, Todos };

    static props = {};

    setup() {

        this.todos = useState([]);

        this.orm = useService("orm");

        this.model = 'odoo_owl_app.todo';

        this.handleChangeState = (event) => {

            const id = event.target.value;

            const index = this.todos.findIndex(todo => todo.id === parseInt(id))

            this.todos[index].is_completed = !this.todos[index].is_completed

        };

        this.handleEdit = (id, title) => {

            const index = this.todos.findIndex(todo => todo.id === parseInt(id))

            this.todos[index].title = title

        };

        this.handleRemove = (id) => {

            console.log('remove', id)

            const index = this.todos.findIndex(todo => todo.id === parseInt(id))

            this.todos.splice(index, 1);

        };

        this.onAdd = (title) => {

            const todo = {

                userId: 1,

                id: new Date().getTime(),

                title,

                is_completed: false

            }

            this.todos.push(todo)

        };

    }

}

When this code  this.orm = useService("orm"); is added to the setup, the following error is issued:

Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'orm' in undefined

Screenshot:


Additional Information:

- Odoo Version: 17

Projects:

-  this repo

I appreciate any assistance in resolving this issue and gaining a better understanding of using Owl with Odoo.