fix: incorrect code splitting causing console error

Author: imorland

js/src/@types/shims.d.ts

@@ -7,5 +7,6 @@ declare module 'flarum/common/models/User' {
     canBeFollowed(): boolean;
     followingCount(): number;
     followerCount(): number;
+    followedUsers(): User[];
   }
 }

js/src/forum/addFollowControls.tsx

@@ -2,7 +2,6 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import UserControls from 'flarum/forum/utils/UserControls';
 import Button from 'flarum/common/components/Button';
-import { SelectFollowUserTypeModal } from './components/SelectFollowLevelModal';
 import User from 'flarum/common/models/User';
 import UserCard from 'flarum/forum/components/UserCard';
 import { findFirstVdomChild } from './util/findVdomChild';
@@ -15,7 +14,7 @@ import type Mithril from 'mithril';
 function openFollowLevelModal(user: User) {
   if (!(user instanceof User)) return;
 
-  app.modal.show(SelectFollowUserTypeModal as any, { user });
+  app.modal.show(() => import('./components/SelectFollowLevelModal'), { user });
 }
 
 export default function addFollowControls() {

js/src/forum/components/ProfilePage.tsx

@@ -1,6 +1,5 @@
 import app from 'flarum/forum/app';
 import UserPage from 'flarum/forum/components/UserPage';
-import { SelectFollowUserTypeModal } from './SelectFollowLevelModal';
 import Placeholder from 'flarum/common/components/Placeholder';
 import FollowedUserListItem from './FollowedUserListItem';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
@@ -9,7 +8,7 @@ import type Mithril from 'mithril';
 
 export default class ProfilePage extends UserPage {
   loading!: boolean;
-  followedUsers!: User[];
+  followedUsers!: User[] | undefined;
 
   oninit(vnode: Mithril.Vnode) {
     super.oninit(vnode);
@@ -20,14 +19,14 @@ export default class ProfilePage extends UserPage {
   refresh(): void {
     this.loading = true;
     this.loadUser(app.session.user!.username());
-    this.followedUsers = (app.session.user as any).followedUsers();
+    this.followedUsers = app.session.user?.followedUsers();
 
     this.loading = false;
     m.redraw();
   }
 
   changeUserFollowOptions(user: User): void {
-    app.modal.show(SelectFollowUserTypeModal as any, { user });
+    app.modal.show(() => import('./SelectFollowLevelModal'), { user });
   }
 
   content(): Mithril.Children {
@@ -39,7 +38,7 @@ export default class ProfilePage extends UserPage {
       );
     }
 
-    if (this.followedUsers.length === 0) {
+    if (!this.followedUsers || this.followedUsers.length === 0) {
       return (
         <div className="DiscussionList">
           <Placeholder text={app.translator.trans('ianm-follow-users.forum.profile_page.no_following')} />

js/src/forum/components/SelectFollowLevelModal.tsx

@@ -1,25 +1,23 @@
 import app from 'flarum/forum/app';
-import FormModal from 'flarum/common/components/FormModal';
+import FormModal, { IFormModalAttrs } from 'flarum/common/components/FormModal';
 import User from 'flarum/common/models/User';
 import Button from 'flarum/common/components/Button';
 import Select from 'flarum/common/components/Select';
 import { FollowLevels } from '../../common/FollowLevels';
 import type Mithril from 'mithril';
 
-interface SelectFollowUserTypeModalAttrs {
+interface SelectFollowLevelModalAttrs extends IFormModalAttrs {
   user: User;
 }
 
-interface SelectFollowUserTypeModalState {
+interface SelectFollowLevelModalState {
   user: User | null;
   saving: boolean;
   followState: 'lurk' | 'follow' | 'unfollow' | undefined;
 }
 
-// @ts-expect-error - FormModal attrs constraint issue
-export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeModalAttrs> {
-  // @ts-expect-error - Custom state structure
-  state: SelectFollowUserTypeModalState = {
+export default class SelectFollowLevelModal extends FormModal<SelectFollowLevelModalAttrs> {
+  followState: SelectFollowLevelModalState = {
     /**
      * User being followed
      */
@@ -38,24 +36,24 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
     followState: undefined,
   };
 
-  oninit(vnode: Mithril.Vnode<SelectFollowUserTypeModalAttrs, this>) {
+  oninit(vnode: Mithril.Vnode<SelectFollowLevelModalAttrs, this>) {
     super.oninit(vnode);
 
-    this.state.user = this.attrs.user;
+    this.followState.user = this.attrs.user;
 
-    const followedStatus = this.state.user.followed();
-    this.state.followState = (followedStatus === true ? 'follow' : followedStatus) || 'unfollow';
+    const followedStatus = this.followState.user.followed();
+    this.followState.followState = (followedStatus === true ? 'follow' : followedStatus) || 'unfollow';
   }
 
   className = (): string => 'iam_follow_users-selectFollowLevelModal';
 
   title(): Mithril.Children {
-    return this.trans('title', { username: <em>{this.state.user?.displayName?.()}</em> });
+    return this.trans('title', { username: <em>{this.followState.user?.displayName?.()}</em> });
   }
 
   content(): Mithril.Children {
     // If `this.user` isn't a valid User, exit quickly to prevent complete forum errors.
-    if (!(this.state.user instanceof User)) {
+    if (!(this.followState.user instanceof User)) {
       // Show a more detailed error if this happens when the forum is in debug mode.
       return (
         <div class="Modal-body">
@@ -64,10 +62,10 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
       );
     }
 
-    const user = this.state.user;
+    const user = this.followState.user;
 
     const availableLevelOptions = FollowLevels.reduce((acc, curr) => ({ ...acc, [curr.value]: curr.name() }), {} as Record<string, string>);
-    const selectedLevel = FollowLevels.find((l) => l.value === this.state.followState);
+    const selectedLevel = FollowLevels.find((l) => l.value === this.followState.followState);
 
     if (!selectedLevel) {
       return null;
@@ -82,7 +80,7 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
             <label for="selectFollowLevelModal-select">{this.trans('follow_select_label')}</label>
 
             <Select
-              disabled={this.state.saving}
+              disabled={this.followState.saving}
               id="selectFollowLevelModal-select"
               onchange={this.onFollowLevelChange.bind(this)}
               // Dynamic attrs that change based on the input
@@ -96,10 +94,15 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
           </div>
         </fieldset>
         <fieldset class="selectFollowLevelModal-actions">
-          <Button disabled={this.state.saving} class="Button" onclick={this.hide.bind(this)}>
+          <Button disabled={this.followState.saving} class="Button" onclick={this.hide.bind(this)}>
             {this.trans('cancel_btn')}
           </Button>
-          <Button disabled={this.state.saving} class="Button Button--primary" onclick={this.saveFollowLevel.bind(this)} loading={this.state.saving}>
+          <Button
+            disabled={this.followState.saving}
+            class="Button Button--primary"
+            onclick={this.saveFollowLevel.bind(this)}
+            loading={this.followState.saving}
+          >
             {this.trans('save_btn')}
           </Button>
         </fieldset>
@@ -113,7 +116,7 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
   onFollowLevelChange(): void {
     const selectElement = this.$('.Select-input')[0] as HTMLInputElement;
 
-    this.state.followState = (selectElement.value as 'lurk' | 'follow') || 'unfollow';
+    this.followState.followState = (selectElement.value as 'lurk' | 'follow') || 'unfollow';
   }
 
   /**
@@ -131,17 +134,17 @@ export class SelectFollowUserTypeModal extends FormModal<SelectFollowUserTypeMod
    * Sends the new follow state to the server
    */
   async saveFollowLevel(): Promise<void> {
-    const newFollowState = this.state.followState === 'unfollow' ? null : this.state.followState;
+    const newFollowState = this.followState.followState === 'unfollow' ? null : this.followState.followState;
 
-    this.state.saving = true;
+    this.followState.saving = true;
 
     // Exit early if level not changed
-    if (this.state.user!.attribute('following') === newFollowState) {
+    if (this.followState.user!.attribute('following') === newFollowState) {
       this.hide();
       return;
     }
 
-    await this.state.user!.save({ followUsers: newFollowState });
+    await this.followState.user!.save({ followUsers: newFollowState });
 
     this.hide();
   }