diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js
index efde5d0e9a2..0b0a0fb00a5 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.js
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.js
@@ -1,7 +1,10 @@
 /** @odoo-module **/
 
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
+import { useModels } from '@mail/component_hooks/use_models';
+// ensure components are registered beforehand.
+import '@mail/components/chatter/chatter';
 import { clear } from '@mail/model/model_field_command';
+import { getMessagingComponent } from "@mail/utils/messaging_component";
 
 const { Component, onWillDestroy, onWillUpdateProps } = owl;
 
@@ -27,6 +30,7 @@ export class ChatterContainer extends Component {
      * @override
      */
     setup() {
+        useModels();
         super.setup();
         this.chatter = undefined;
         this.chatterId = getChatterNextTemporaryId();
@@ -87,6 +91,7 @@ export class ChatterContainer extends Component {
 }
 
 Object.assign(ChatterContainer, {
+    components: { Chatter: getMessagingComponent('Chatter') },
     props: {
         hasActivities: {
             type: Boolean,
@@ -128,5 +133,3 @@ Object.assign(ChatterContainer, {
     },
     template: 'mail.ChatterContainer',
 });
-
-registerMessagingComponent(ChatterContainer);
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.js b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
index 6e7cc377238..4f9fea1139f 100644
--- a/addons/mail/static/src/widgets/form_renderer/form_renderer.js
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
@@ -1,8 +1,6 @@
 /** @odoo-module **/
 
-// ensure component is registered beforehand.
-import '@mail/components/chatter_container/chatter_container';
-import { getMessagingComponent } from "@mail/utils/messaging_component";
+import { ChatterContainer } from '@mail/components/chatter_container/chatter_container';
 
 import FormRenderer from 'web.FormRenderer';
 import { ComponentWrapper } from 'web.OwlCompatibility';
@@ -71,7 +69,7 @@ FormRenderer.include({
         const props = this._makeChatterContainerProps();
         this._chatterContainerComponent = new ChatterContainerWrapperComponent(
             this,
-            getMessagingComponent("ChatterContainer"),
+            ChatterContainer,
             props
         );
         // Not in custom_events because other modules may remove this listener
diff --git a/addons/mail/static/tests/helpers/test_utils.js b/addons/mail/static/tests/helpers/test_utils.js
index a807e615cb6..7b28d60cbfe 100644
--- a/addons/mail/static/tests/helpers/test_utils.js
+++ b/addons/mail/static/tests/helpers/test_utils.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { ChatterContainer } from '@mail/components/chatter_container/chatter_container';
 import { MessagingMenuContainer } from '@mail/components/messaging_menu_container/messaging_menu_container';
 import { insertAndReplace, replace } from '@mail/model/model_field_command';
 import { getMessagingComponent } from '@mail/utils/messaging_component';
@@ -377,7 +378,7 @@ function getCreateChatterContainerComponent({ afterEvent, env, target }) {
     return async function createChatterContainerComponent(props, { waitUntilMessagesLoaded = true } = {}) {
         let chatterContainerComponent;
         async function func() {
-            chatterContainerComponent = await createRootMessagingComponent(env, "ChatterContainer", {
+            chatterContainerComponent = await createRootComponent(env, ChatterContainer, {
                 props,
                 target,
             });