[2.x] No module found error

luceos

Uncaught Error: No module found for flarum-messages:forum/components/MessagesPage
    at Object.get (ExportRegistry.ts:42:13)
    at ext:flarum/messages/forum/components/MessagesPage (MessagesPage')":1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/forum/index.ts (NavBar.tsx:22:1)
    at __webpack_require__ (bootstrap:19:1)
    at make namespace object:7:1
    at forum.ts:1:30
    at forum.ts:1:30

I'm trying to make sense of this error based on this code:

import MessagesPage from 'ext:flarum/messages/forum/components/MessagesPage';

flarum/frameworkblob/2.x/extensions/messages/js/src/forum/components/MessagesPage.tsx

I'm curious to know how one would debug this.

luceos

I assume this is because flarum/messages has no exports? But aren't they supposed to be exported by default in 2.x anyway?

I will confirm that the loading order is set up properly, it might be that modifying the new optional dependency didn't make it into the sorting of the loading sequence.

Sequence is actually ok, the extension is loaded after flarum-messages 🤔

["flarum-flags","flarum-tags","flarum-approval","flarum-messages","flarum-suspend","flarum-subscriptions","flarum-sticky","flarum-statistics","flarum-mentions","flarum-markdown","flarum-lock","flarum-likes","flarum-lang-english","flarum-extension-manager","flarum-emoji","flarum-bbcode","some-theme"]

SychO

That is a lazy loaded component, so you cannot directly import it, which is why you see the error, because the module is not part of the default JS bundle.

flarum/frameworkblob/2.x/extensions/messages/js/src/forum/extend.ts#L11

If you need to extend/override a method within it, check: https://docs.flarum.org/2.x/extend/frontend#changing-the-ui-part-3

If you need to do something else, then use a dynamic import: https://docs.flarum.org/2.x/extend/code-splitting#importing-split-modules-from-core-or-other-extensions

luceos

import app from 'flarum/forum/app';
import HeaderSecondary from 'flarum/forum/components/HeaderSecondary';
import NavBar from './components/NavBar';
import { extend, override } from 'flarum/common/extend';
import GroupsTopBar from './components/GroupsTopBar';
import ExtendedTagsPage from './components/ExtendedTagsPage';
import IndexSidebar from 'flarum/forum/components/IndexSidebar';
import TagsPage from 'ext:flarum/tags/forum/components/TagsPage';
import HeaderDropdown from 'flarum/forum/components/HeaderDropdown';
import ExtendedHeaderDropdown from './components/ExtendedHeaderDropdown';
import SessionDropdown from 'flarum/forum/components/SessionDropdown';
import ExtendedSessionDropdown from './components/ExtendedSessionDropdown';
import HeaderPrimary from 'flarum/forum/components/HeaderPrimary';
import HeaderLogo from './components/HeaderLogo';
import ExtendedMessagesPage from './components/ExtendedMessagesPage';

app.initializers.add('some-theme', () => {
    // Messages
    if ('flarum-messages' in flarum.extensions) {
        override('ext:flarum/messages/forum/components/MessagesPage', 'view', function (original) {
            return ExtendedMessagesPage.prototype.view.call(this);
        });
    }
});

import app from 'flarum/forum/app';
import PageStructure from 'flarum/forum/components/PageStructure';
import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
import InfoTile from 'flarum/common/components/InfoTile';
import DialogSection from 'ext:flarum/messages/forum/components/DialogSection';
import DialogList from 'ext:flarum/messages/forum/components/DialogList';
import MessagesSidebar from 'ext:flarum/messages/forum/components/MessagesSidebar';
import listItems from 'flarum/common/helpers/listItems';

export default class ExtendedMessagesPage  {
    view() {
        return (
            <PageStructure className="MessagesPage Page--vertical" loading={false} hero={this.hero.bind(this)} sidebar={() => <MessagesSidebar />}>
                {app.dialogs.isLoading() ? (
                    <LoadingIndicator />
                ) : !app.dialogs.hasItems() ? (
                    <InfoTile icon="far fa-envelope-open">{app.translator.trans('flarum-messages.forum.messages_page.empty_text')}</InfoTile>
                ) : (
                    <div className="MessagesPage-content">
                        <div className="MessagesPage-sidebar" key="sidebar">
                            <div className="IndexPage-toolbar" key="toolbar">
                                <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
                                <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
                            </div>
                            <DialogList key="list" state={app.dialogs} activeDialog={this.selectedDialog()} />
                        </div>
                        {this.selectedDialog() ? (
                            <DialogSection key="dialog" dialog={this.selectedDialog()} />
                        ) : (
                            <LoadingIndicator key="loading" display="block" />
                        )}
                    </div>
                )}
            </PageStructure>
        );
    }
}

The components the ExtendedMessagesPage tries to import are not yet available. What would be the best way to import them on lazy components?

mount-redraw.js:13 
 Error: The selector must be either a string or a component.
    at r (patchMithril.js:8:33)
    at Object.sidebar (ExtendedMessagesPage.tsx:15:1)
    at l.sidebarItems (PageStructure.tsx:57:59)
    at l.sidebar (PageStructure.tsx:63:13)
    at l.containerItems (PageStructure.tsx:46:31)
    at l.container (PageStructure.tsx:53:13)
    at l.mainItems (PageStructure.tsx:29:33)
    at l.main (PageStructure.tsx:42:66)

SychO

In this case you have to make your component lazy as well, so that it is only loaded when the modules it needs are loaded.

Something along the lines of:

app.initializers.add('some-theme', () => {
    // Messages
    if ('flarum-messages' in flarum.extensions) {
        override('ext:flarum/messages/forum/components/MessagesPage', 'view', function (original) {
            let ExtendedMessagesPage = null;

            import('./components/ExtendedMessagesPage').then(({ default }) => {
                ExtendedMessagesPage = default;
            });

            if (! ExtendedMessagesPage) return <LoadingIndicator />;

            return ExtendedMessagesPage.prototype.view.call(this);
        });
    }
});

for reference, a php extender is required for this: https://docs.flarum.org/2.x/extend/code-splitting#how-to-split-your-code

Though it would be cleaner to override the entire page component, i haven't checked, but you should be able to redefine the routes:

new Extend.Routes() //
    .add('messages', '/messages', () => import('./components/MessagesPage').then(() => import('./components/ExtendedMessagesPage')))
    .add('dialog', '/messages/dialog/:id', () => import('./components/MessagesPage').then(() => import('./components/ExtendedMessagesPage')))
    .add('dialog.message', '/messages/dialog/:id/:near', () => import('./components/MessagesPage').then(() => import('./components/ExtendedMessagesPage')))

then


export default class ExtendedMessagesPage extends MessagesPage { ... }

What's the goal of overriding the view of this component though? maybe there is a better way to achieve the desired result than overriding.

luceos

SychO What's the goal of overriding the view of this component though? maybe there is a better way to achieve the desired result than overriding.

We want to hide the sidenav showing other recipients for normal users 😉

What I'm confused about is this:

app.initializers.add('some-theme', () => {
    // Messages
    if ('flarum-messages' in flarum.extensions) {
        override('ext:flarum/messages/forum/components/MessagesPage', 'view', function (original) {
            let ExtendedMessagesPage = null;

            import('./components/ExtendedMessagesPage').then(({ default }) => {
                ExtendedMessagesPage = default;
            });

            if (! ExtendedMessagesPage) return <LoadingIndicator />;

            return ExtendedMessagesPage.prototype.view.call(this);
        });
    }
});

In this example you lazy load the ExtendedMessagesPage, because you assume dependencies are then lazy loaded too? Because if I look at this code I would assume our ExtendedMessagesPage should be included once the vanilla MessagesPage is loaded?

        import('ext:flarum/messages/forum/components/MessagesPage')
            .then(({ default: MessagesPage}) => {
                override(MessagesPage, 'view', function (original) {
                    return ExtendedMessagesPage.prototype.view.call(this);
                })
            });

Even with the above code, which waits with overriding based on the availability, it errors as the MessagesSidebar seems to be not available:

Application.tsx:226 
 Error: The selector must be either a string or a component.
    at r (patchMithril.js:8:33)
    at Object.sidebar (ExtendedMessagesPage.tsx:15:1)
    at l.sidebarItems (PageStructure.tsx:57:59)
    at l.sidebar (PageStructure.tsx:63:13)
    at l.containerItems (PageStructure.tsx:46:31)
    at l.container (PageStructure.tsx:53:13)
    at l.mainItems (PageStructure.tsx:29:33)
    at l.main (PageStructure.tsx:42:66)

SychO

luceos We want to hide the sidenav showing other recipients for normal users

css not enough? you could also search the view node's children for the element with the class MessagesPage-sidebar and delete that. Saves you time and uses simpler code than having to deal with lazy loading.

luceos In this example you lazy load the ExtendedMessagesPage, because you assume dependencies are then lazy loaded too? Because if I look at this code I would assume our ExtendedMessagesPage should be included once the vanilla MessagesPage is loaded?

The override/extend method only execute when the lazy loaded module is first loaded, so at that time we are certain messages page is available.

luceos Even with the above code, which waits with overriding based on the availability, it errors as the MessagesSidebar seems to be not available:

That just seems to be an issue with what the view method actually returns, my code is not tested, it's just a general idea of what you can/should go for.

check the line of your code it's pointing to perhaps: at Object.sidebar (ExtendedMessagesPage.tsx:15:1)

SychO

luceos import('ext:flarum/messages/forum/components/MessagesPage')
.then(({ default: MessagesPage}) => {
override(MessagesPage, 'view', function (original) {
return ExtendedMessagesPage.prototype.view.call(this);
})
});

this won't work, pass the full name of the module as a string to override, otherwise you have to use an import statement that is accessed before the loading of the actual module is over.

luceos Does the extend/override function have internal logic to handle lazy components then? Just to get facts straight here 👍️

yes, when you pass the full name/namespace of the module as a string. It executes your callback after the module is loaded.

But also, you don't want to load your extended component before the main one, it has to load after. (hence why my suggestion was the way it was)

luceos That's where it instantiates the sidebar:

My guess is your Extended component is still somehow not lazy loaded (check any import statements to it)

luceos I wish. We want to show the side bar based on permission or certain user attribute 🙈

We can probably improve the view of that component into more item lists to isolate the sidebar for beta 3

luceos

SychO css not enough? you could also search the view node's children for the element with the class MessagesPage-sidebar and delete that. Saves you time and uses simpler code than having to deal with lazy loading.

I wish. We want to show the side bar based on permission or certain user attribute 🙈

SychO The override/extend method only execute when the lazy loaded module is first loaded, so at that time we are certain messages page is available.

Does the extend/override function have internal logic to handle lazy components then? Just to get facts straight here 👍️

SychO check the line of your code it's pointing to perhaps: at Object.sidebar (ExtendedMessagesPage.tsx:15:1)

That's where it instantiates the sidebar:

sidebar: () => m(MessagesSidebar, null)

SychO

here is a tested proof of concept

overriding routes does not work with the js extender unfortunately so this is needed:

// index.js
app.initializers.add('acme', () => {
  const component = () =>
    import('ext:flarum/messages/forum/components/MessagesPage').then(async () => {
      return await import('./components/ExtendedMessagesPage');
    });

  app.routes['messages'] = { path: '/messages', component };

  app.routes['dialog'] = { path: '/messages/dialog/:id', component };

  // for beta 3
  // app.routes['dialog.message'] = { path: '/messages/dialog/:id/:near', component };
});

import PageStructure from 'flarum/forum/components/PageStructure';
import MessagesSidebar from 'ext:flarum/messages/forum/components/MessagesSidebar';
import app from 'flarum/forum/app';
import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
import InfoTile from 'flarum/common/components/InfoTile';
import classList from 'flarum/common/utils/classList';
import listItems from 'flarum/common/helpers/listItems';
import DialogList from 'ext:flarum/messages/forum/components/DialogList';
import DialogSection from 'ext:flarum/messages/forum/components/DialogSection';
import MessagesPage from 'ext:flarum/messages/forum/components/MessagesPage';

export default class ExtendedMessagesPage extends MessagesPage {
  view() {
    return (
      <PageStructure className="MessagesPage Page--vertical" loading={false} hero={this.hero.bind(this)} sidebar={() => <MessagesSidebar />}>
        {app.dialogs.isLoading() ? (
          <LoadingIndicator />
        ) : !app.dialogs.hasItems() ? (
          <InfoTile icon="far fa-envelope-open">{app.translator.trans('flarum-messages.forum.messages_page.empty_text')}</InfoTile>
        ) : (
          <div
            className={classList('MessagesPage-content', {
              'MessagesPage-content--onDialog': this.currentDialogId,
            })}
          >
            {this.selectedDialog() ? (
              <DialogSection
                key="dialog"
                dialog={this.selectedDialog()}
                onback={() => {
                  this.currentDialogId = null;
                }}
              />
            ) : (
              <LoadingIndicator key="loading" display="block" />
            )}
          </div>
        )}
      </PageStructure>
    );
  }
}

envolutions

Would it be possible to directly inject the MessageComposer instead of requiring the user to click on 'write a reply'?

So if I would extend the MessageStream is there a way to always have the MessageComposer show in the ExtendedMessageStream:

export default class ExtendedMessageStream extends MessageStream {
    content() {
    const items: Mithril.Children[] = [];

    const messages = this.attrs.state.getAllItems().sort((a, b) => a.createdAt().getTime() - b.createdAt().getTime());

    const ReplyPlaceholder = this.replyPlaceholderComponent();
    const LoadingPost = this.loadingPostComponent();

    if (messages[0].id() !== (this.attrs.dialog.data.relationships?.firstMessage.data as ModelIdentifier).id) {
      items.push(
        <div className="MessageStream-item" key="loadPrevious">
          <Button
            onclick={() => this.whileMaintainingScroll(() => this.attrs.state.loadNext())}
            type="button"
            className="Button Button--block MessageStream-loadPrev"
          >
            {app.translator.trans('flarum-messages.forum.messages_page.stream.load_previous_button')}
          </Button>
        </div>
      );

      if (LoadingPost) {
        items.push(
          <div className="MessageStream-item" key="loading-prev">
            <LoadingPost />
          </div>
        );
      }
    }

    messages.forEach((message, index) => items.push(this.messageItem(message, index)));

    if (ReplyPlaceholder) {
      items.push(
        <div className="MessageStream-item" key="reply" /*data-index={this.attrs.state.count()}*/>
          <ReplyPlaceholder
            discussion={this.attrs.dialog}
            onclick={() => {
              import('flarum/forum/components/ComposerBody').then(() => {
                app.composer
                  .load(() => import('./MessageComposer'), {
                    user: app.session.user,
                    replyingTo: this.attrs.dialog,
                    onsubmit: () => {
                      this.attrs.state.refresh().then(() => setTimeout(() => this.scrollToBottom(), 50));
                    },
                  })
                  .then(() => app.composer.show());
              });
            }}
            composingReply={() => app.composer.composingMessageTo(this.attrs.dialog)}
          />
        </div>
      );
    }

    return items;
  }
}

SychO

envolutions I'm not sure, it might be possible, but would probably need certain custom changes. You could start by loading the ComposerBody and the MessageComposer components, then try using the MessageComposer component inline

You can load it the same way the ReplyPlaceholder is loaded and used: flarum/frameworkblob/2.x/extensions/messages/js/src/forum/components/MessageStream.tsx#L32-L37

This is how the default composer renders the MessageComposer (ComposerBody): flarum/frameworkblob/3294941226da644f52fd8baa313b8a872e65b6a2/framework/core/js/src/forum/components/Composer.js#L59

envolutions

I have also extended the MessageStream with the purpose of sending some parameters along to the messageItem (nextMessage, previousMessage). First of all I wonder if there is a better way to do this and if there isn't I have a problem. This is my ExtendedMessageStream:

export default class ExtendedMessageStream extends MessageStream {
    content() {
        const items: Mithril.Children[] = [];

        const messages = this.attrs.state.getAllItems().sort((a, b) => a.createdAt().getTime() - b.createdAt().getTime());

        const ReplyPlaceholder = this.replyPlaceholderComponent();
        const LoadingPost = this.loadingPostComponent();

        if (messages[0].id() !== (this.attrs.dialog.data.relationships?.firstMessage.data as ModelIdentifier).id) {
            items.push(
                <div className="MessageStream-item" key="loadPrevious">
                    <Button
                        onclick={() => this.whileMaintainingScroll(() => this.attrs.state.loadNext())}
                        type="button"
                        className="Button Button--block MessageStream-loadPrev"
                    >
                        {app.translator.trans('flarum-messages.forum.messages_page.stream.load_previous_button')}
                    </Button>
                </div>
            );

            if (LoadingPost) {
                items.push(
                    <div className="MessageStream-item" key="loading-prev">
                        <LoadingPost />
                    </div>
                );
            }
        }

        messages.forEach((message, index) => {
            const nextMessage = messages[index + 1];
            const sameUserAsNext = nextMessage && nextMessage.user().id() === message.user().id();
            const previousMessage = messages[index - 1];
            const sameUserAsPrevious = previousMessage && previousMessage.user().id() === message.user().id();
            items.push(this.messageItem(message, index, sameUserAsNext, sameUserAsPrevious));
        });

        if (ReplyPlaceholder) {
            items.push(
                <div className="MessageStream-item" key="reply" /*data-index={this.attrs.state.count()}*/>
                    <ReplyPlaceholder
                        discussion={this.attrs.dialog}
                        onclick={() => {
                            import('flarum/forum/components/ComposerBody').then(() => {
                                app.composer
                                .load(() => import('ext:flarum/messages/forum/components/MessageComposer'), {
                                    user: app.session.user,
                                    replyingTo: this.attrs.dialog,
                                    onsubmit: () => {
                                        this.attrs.state.refresh().then(() => setTimeout(() => this.scrollToBottom(), 50));
                                    },
                                })
                                .then(() => app.composer.show());
                            });
                        }}
                        composingReply={() => app.composer.composingMessageTo(this.attrs.dialog)}
                    />
                </div>
            );
        }

        return items;
    }
}

The problem is that when I now click on the ReplyPlaceholder, it will show the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'bind')
    at h.view (ComposerBody.tsx:55:31)
    at view.c (render.js:37:16)
    at render.js:156:45
    at render.js:161:3
    at h (render.js:73:8)
    at d (render.js:57:5)
    at render.js:135:5
    at h (render.js:70:14)
    at d (render.js:57:5)
    at render.js:135:5

And every time I click it afterward it shows

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onremove')
    at S (render.js:657:59)
    at S (render.js:666:25)
    at S (render.js:666:25)
    at S (render.js:660:32)
    at S (render.js:660:32)
    at C (render.js:611:4)
    at k (render.js:585:23)
    at p (render.js:274:51)
    at render.js:935:4
    at r.mount (mount-redraw.js:39:4)

I then added the following in place of the .then

.then(composer => {
	if (composer && composer.show) {
		composer.show();
	} else {
		console.error('Composer could not be loaded or shown');
	}
})

And this logged the error.

Lastly, I tried importing the MessageComposer normally as the stream component is already lazy imported:
import MessageComposer from 'ext:flarum/messages/forum/components/MessageComposer';

if (ReplyPlaceholder) {
    items.push(
        <div className="MessageStream-item" key="reply">
            <ReplyPlaceholder
                discussion={this.attrs.dialog}
                onclick={() => {
                    app.composer
                        .load(MessageComposer, {
                            user: app.session.user,
                            replyingTo: this.attrs.dialog,
                            onsubmit: () => {
                                this.attrs.state.refresh().then(() => setTimeout(() => this.scrollToBottom(), 50));
                            },
                        })
                        .then(() => app.composer.show());
                }}
                composingReply={() => app.composer.composingMessageTo(this.attrs.dialog)}
            />
        </div>
    );
}

But this gave an error stating it couldn't find the module:

Error: No module found for flarum-messages:forum/components/MessageComposer
    at Object.get (ExportRegistry.ts:42:13)
    at ext:flarum/messages/forum/components/MessageComposer (MessageComposer')":1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/forum/components/messages/ExtendedMessageStream.tsx (ExtendedMessage.tsx:38:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/forum/components/messages/ExtendedDialogSection.tsx (ExtendedComment.tsx:32:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/forum/components/messages/ExtendedMessagesPage.tsx (ExtendedMessageStream.tsx:91:1)
    at __webpack_require__ (bootstrap:19:1)
    at async index.ts:47:1
a @ router.js:84
Promise.then
t @ router.js:119
N @ router.js:88
M @ router.js:192
mount @ Application.tsx:226
mount @ ForumApplication.tsx:88
boot @ Application.tsx:188
(anonymous) @ messages:106

I really wonder if the MessageComposer can work this way or if there is a better way to get the next and previous message into the messageItem.

SychO

envolutions I have also extended the MessageStream with the purpose of sending some parameters along to the messageItem (nextMessage, previousMessage). First of all I wonder if there is a better way to do this and if there isn't I have a problem.

You could just use the ID of the current message to get message id - 1 and message id + 1 from the store (not an exact +1, -1 but you get the idea), without modifying the stream component. Actually using the created at field would be better

app.store.all('dialog-messages') will give you a list of all loaded messages

envolutions Lastly, I tried importing the MessageComposer normally as the stream component is already lazy imported:

The stream and composer are not part of the same chunk. So you still have to lazy load the composer first, you can do it the same way the ReplyPlaceholder is loaded and used