Step 1: Remove all usage of @replaceableComponent

src/components/views/emojipicker/Category.tsx

@@ -21,7 +21,6 @@ import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPic
 import LazyRenderList from "../elements/LazyRenderList";
 import { DATA_BY_CATEGORY, IEmoji } from "../../../emoji";
 import Emoji from './Emoji';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const OVERFLOW_ROWS = 3;
 
@@ -48,7 +47,6 @@ interface IProps {
     onMouseLeave(emoji: IEmoji): void;
 }
 
-@replaceableComponent("views.emojipicker.Category")
 class Category extends React.PureComponent<IProps> {
     private renderEmojiRow = (rowIndex: number) => {
         const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;

src/components/views/emojipicker/Emoji.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 
 import { MenuItem } from "../../structures/ContextMenu";
 import { IEmoji } from "../../../emoji";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
@@ -29,7 +28,6 @@ interface IProps {
     onMouseLeave(emoji: IEmoji): void;
 }
 
-@replaceableComponent("views.emojipicker.Emoji")
 class Emoji extends React.PureComponent<IProps> {
     render() {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;

src/components/views/emojipicker/EmojiPicker.tsx

@@ -26,7 +26,6 @@ import Search from "./Search";
 import Preview from "./Preview";
 import QuickReactions from "./QuickReactions";
 import Category, { ICategory, CategoryKey } from "./Category";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export const CATEGORY_HEADER_HEIGHT = 20;
 export const EMOJI_HEIGHT = 35;
@@ -50,7 +49,6 @@ interface IState {
     viewportHeight: number;
 }
 
-@replaceableComponent("views.emojipicker.EmojiPicker")
 class EmojiPicker extends React.Component<IProps, IState> {
     private readonly recentlyUsed: IEmoji[];
     private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;

src/components/views/emojipicker/Header.tsx

@@ -20,7 +20,6 @@ import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { CategoryKey, ICategory } from "./Category";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
@@ -29,7 +28,6 @@ interface IProps {
     onAnchorClick(id: CategoryKey): void;
 }
 
-@replaceableComponent("views.emojipicker.Header")
 class Header extends React.PureComponent<IProps> {
     private findNearestEnabled(index: number, delta: number) {
         index += this.props.categories.length;

src/components/views/emojipicker/Preview.tsx

@@ -18,13 +18,11 @@ limitations under the License.
 import React from 'react';
 
 import { IEmoji } from "../../../emoji";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
 }
 
-@replaceableComponent("views.emojipicker.Preview")
 class Preview extends React.PureComponent<IProps> {
     render() {
         const { unicode, label, shortcodes: [shortcode] } = this.props.emoji;

src/components/views/emojipicker/QuickReactions.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { getEmojiFromUnicode, IEmoji } from "../../../emoji";
 import Emoji from "./Emoji";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // We use the variation-selector Heart in Quick Reactions for some reason
 const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
@@ -40,7 +39,6 @@ interface IState {
     hover?: IEmoji;
 }
 
-@replaceableComponent("views.emojipicker.QuickReactions")
 class QuickReactions extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/emojipicker/ReactionPicker.tsx

@@ -23,7 +23,6 @@ import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
 import EmojiPicker from "./EmojiPicker";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Action } from '../../../dispatcher/actions';
 import RoomContext from "../../../contexts/RoomContext";
 import { FocusComposerPayload } from '../../../dispatcher/payloads/FocusComposerPayload';
@@ -38,7 +37,6 @@ interface IState {
     selectedEmojis: Set<string>;
 }
 
-@replaceableComponent("views.emojipicker.ReactionPicker")
 class ReactionPicker extends React.Component<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;

src/components/views/emojipicker/Search.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 
@@ -28,7 +27,6 @@ interface IProps {
     onEnter(): void;
 }
 
-@replaceableComponent("views.emojipicker.Search")
 class Search extends React.PureComponent<IProps> {
     private inputRef = React.createRef<HTMLInputElement>();