Odoo15 OWL开发：网站模块聊天功能依赖缺失问题求助

我在学习OWL框架，打算在Odoo15的「网站」模块里开发聊天功能，把「沟通」模块的消息展示在网站端。已经做了一个名为「Chat」的独立标签页用来展示所有消息，但现在碰到了依赖缺失的问题——系统找不到ChatComposer变量的依赖。

主Widget代码（Portal_Chat.js） #

/** @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;
});

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

问题排查及修复步骤 #

• 模块路径与命名匹配
  检查__manifest__.py里的模块名称是否为portal_chat，把主文件中ChatComposer的导入路径改为Odoo规范格式：

  const components = {
      ChatComposer: require('portal_chat/static/src/components/chat_composer/chat_composer')
  };
  

• 组件导出规范修正
  Odoo15的模块系统需要用odoo.define注册组件，修改ChatComposer代码末尾：

  // 新增模块注册
  odoo.define('portal_chat.ChatComposer', function (require) {
      return ChatComposer;
  });
  

• 模板加载验证
  确保Portal_Chat模板在模块的XML文件中正确定义，并在__manifest__.py的data数组中包含该XML文件：

  'data': [
      'views/templates.xml',
  ],
  

• OWL兼容性检查
  确认web.OwlCompatibility依赖已加载，组件初始化时props传递无误，避免因兼容性问题导致组件无法识别。

内容的提问来源于stack exchange，提问作者Dread