'Missing dependencies' OWL Odoo15

Question

I'm currently learning OWL and I want to do something like chat in the "Web Site" module (To display messages from the "Communication" module on the site). I created a separate tab called "Chat" (I will output all messages from the "Communication" module there). But here I encountered a problem, namely: Missing dependencies

This is my code, it complains about this code, namely - can't find the dependency of the ChatComposer variable (as I understand it)

/** @odoo-module **/

odoo.define('Portal_Chat', function (require) {
    'use strict';

    const session = require("web.session");
    const publicWidget = require('web.public.widget');

    const { ComponentWrapper } = require('web.OwlCompatibility');
    console.log("lalalalalal");
    
    const components = {
        ChatComposer: require('/portal_chat/static/src/components/chat_composer/chat_composer.js')
    };

    publicWidget.registry.PortalChatWidget = publicWidget.Widget.extend({
        selector: '.portal_chat',
        init: function(parent, options) {
            this.options = _.defaults(options || {}, {});
            this.component = false;

            return this._super.apply(this, arguments)
        },
        async start() {
            const partner_id = await this._rpc({ route: '/chat/get_partner_id' });
            const props = {
                partner_id: partner_id,
                do_warn: this.do_warn,
                onSeenChannel: (ev) => this.call('chat_service', 'checkUnreadMessages'),
            };

            this.component = new ComponentWrapper(this, components.ChatComposer, props);

            await session.load_qweb('portal_chat');
            await this.component.env.qweb.addTemplates(session.owlTemplates);

            this.call('chat_service', 'onOpenChannel', this, this._onOpenChannel);
            this.call('chat_service', 'onReceiveMessage', this, this._onReceiveMessage);

            return this.component.mount(this.el);
        },
        _onOpenChannel: function (data) {
            if(this.component) this.component.componentRef.comp.channels.comp.addChannel(data);
        },
        _onReceiveMessage: function (data) {
            if(this.component) this.component.componentRef.comp.channels.comp.receiveMessage(data);
            if(this.component) this.component.componentRef.comp.messages.comp.receiveMessage(data);
        },
    });

    return publicWidget.registry.PortalChatWidget;
});

This is my ChatComposer:

/** @odoo-module **/

import { Component } from owl;
import { useState, useRef } from owl.hooks
import { _ } from owl;

import { ChatChannels } from '@portal_chat/components/chat_channels/ChatChannels';
import { ChatMessagesHeader } from '@portal_chat/components/chat_messages_header/ChatMessagesHeader';
import { ChatMessages } from '@portal_chat/components/chat_messages/ChatMessages';
import { ChatInput } from '@portal_chat/components/chat_input/ChatInput';

export class ChatComposer extends Component {
    
    state = useState({
        current_channel: false
    });

    channels = useRef("channels");
    messages = useRef("messages");

    constructor(parent, props) {
        super(parent, props);
        this.state = useState(props);
    }

    setChannel(ev) {
        this.state.current_channel = ev.detail;
    }

    onSeenChannel(ev) {
        this.state.onSeenChannel(ev);
    }

    onScrollBottom(ev) {
        this.channels.comp.clearCurrentChannelCounter(ev);
    }
}
ChatComposer.components = { ChatChannels, ChatMessagesHeader, ChatMessages, ChatInput };
ChatComposer.template = "Portal_Chat";
return ChatComposer

score 2 · Accepted Answer · answered Apr 06 '23 at 12:50

Odoo should raise the following error message when loading the ChatComposer:

Uncaught SyntaxError: missing ) after argument list

You need to change owl imports to:

import { Component } = owl;
import { useState, useRef } = owl.hooks;

Make sure you have portal_chat in addons and use the correct path.

You can find more details in Native Javascript Modules documentation:

Every file located in an Odoo addon some_addon/static/src/path/to/file.js will be assigned a name prefixed by the addon name like this: @some_addon/path/to/file.

'Missing dependencies' OWL Odoo15

1 Answers1