diff --git a/.eslintrc.json b/.eslintrc.json
index 5802418918..0bf5e1d021 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -138,7 +138,6 @@
                 "color_data": false,
                 "compose": false,
                 "compose_actions": false,
-                "compose_fade": false,
                 "compose_state": false,
                 "compose_ui": false,
                 "composebox_typeahead": false,
diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js
index 218c26666e..3753eaf4fd 100644
--- a/frontend_tests/node_tests/compose.js
+++ b/frontend_tests/node_tests/compose.js
@@ -1142,7 +1142,7 @@ test_ui("update_fade", () => {
     let set_focused_recipient_checked = false;
     let update_all_called = false;
 
-    set_global("compose_fade", {
+    rewiremock("../../static/js/compose_fade").with({
         set_focused_recipient(msg_type) {
             assert.equal(msg_type, "private");
             set_focused_recipient_checked = true;
diff --git a/frontend_tests/node_tests/compose_actions.js b/frontend_tests/node_tests/compose_actions.js
index 7df91fc9c0..9e90a0e8d2 100644
--- a/frontend_tests/node_tests/compose_actions.js
+++ b/frontend_tests/node_tests/compose_actions.js
@@ -31,9 +31,12 @@ set_global("notifications", {
     clear_compose_notifications: noop,
 });
 
-const compose_fade = set_global("compose_fade", {
+const compose_fade = {
+    __esModule: true,
     clear_compose: noop,
-});
+};
+
+rewiremock("../../static/js/compose_fade").with(compose_fade);
 
 rewiremock("../../static/js/drafts").with({
     update_draft: noop,
diff --git a/frontend_tests/node_tests/dispatch_subs.js b/frontend_tests/node_tests/dispatch_subs.js
index 6eb069adef..544b226ac6 100644
--- a/frontend_tests/node_tests/dispatch_subs.js
+++ b/frontend_tests/node_tests/dispatch_subs.js
@@ -13,7 +13,8 @@ const events = require("./lib/events");
 const event_fixtures = events.fixtures;
 const test_user = events.test_user;
 
-const compose_fade = set_global("compose_fade", {});
+const compose_fade = {__esModule: true};
+rewiremock("../../static/js/compose_fade").with(compose_fade);
 const stream_events = set_global("stream_events", {});
 const subs = set_global("subs", {});
 
diff --git a/static/js/buddy_data.js b/static/js/buddy_data.js
index 64d65a87c3..9f3d05f58d 100644
--- a/static/js/buddy_data.js
+++ b/static/js/buddy_data.js
@@ -1,5 +1,6 @@
 "use strict";
 
+const compose_fade = require("./compose_fade");
 const people = require("./people");
 const user_status = require("./user_status");
 const util = require("./util");
diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index 8d4bd3e4ac..3fca6a0335 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -24,7 +24,6 @@ import "../widgetize";
 import "../message_list";
 import "../narrow";
 import "../reload";
-import "../compose_fade";
 import "../markdown";
 import "../local_message";
 import "../sent_messages";
diff --git a/static/js/compose.js b/static/js/compose.js
index e916a81de0..de256017ed 100644
--- a/static/js/compose.js
+++ b/static/js/compose.js
@@ -11,6 +11,7 @@ const render_compose_private_stream_alert = require("../templates/compose_privat
 
 const channel = require("./channel");
 const common = require("./common");
+const compose_fade = require("./compose_fade");
 const compose_pm_pill = require("./compose_pm_pill");
 const drafts = require("./drafts");
 const echo = require("./echo");
diff --git a/static/js/compose_actions.js b/static/js/compose_actions.js
index 609598790b..f5a0b59675 100644
--- a/static/js/compose_actions.js
+++ b/static/js/compose_actions.js
@@ -6,6 +6,7 @@ const fenced_code = require("../shared/js/fenced_code");
 
 const channel = require("./channel");
 const common = require("./common");
+const compose_fade = require("./compose_fade");
 const compose_pm_pill = require("./compose_pm_pill");
 const drafts = require("./drafts");
 const message_viewport = require("./message_viewport");
diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js
index 16550af0a4..150df2edeb 100644
--- a/static/js/compose_fade.js
+++ b/static/js/compose_fade.js
@@ -1,20 +1,18 @@
-"use strict";
+import _ from "lodash";
 
-const _ = require("lodash");
-
-const message_viewport = require("./message_viewport");
-const people = require("./people");
-const rows = require("./rows");
-const util = require("./util");
+import * as message_viewport from "./message_viewport";
+import * as people from "./people";
+import * as rows from "./rows";
+import * as util from "./util";
 
 let focused_recipient;
 let normal_display = false;
 
-exports.should_fade_message = function (message) {
+export function should_fade_message(message) {
     return !util.same_recipient(focused_recipient, message);
-};
+}
 
-exports.set_focused_recipient = function (msg_type) {
+export function set_focused_recipient(msg_type) {
     if (msg_type === undefined) {
         focused_recipient = undefined;
     }
@@ -40,7 +38,7 @@ exports.set_focused_recipient = function (msg_type) {
         focused_recipient.reply_to = reply_to;
         focused_recipient.to_user_ids = people.reply_to_to_user_ids_string(reply_to);
     }
-};
+}
 
 function display_messages_normally() {
     const table = rows.get_table(current_msg_list.table_name);
@@ -71,7 +69,7 @@ function fade_messages() {
     for (i = 0; i < visible_groups.length; i += 1) {
         first_row = rows.first_message_in_group(visible_groups[i]);
         first_message = current_msg_list.get(rows.id(first_row));
-        should_fade_group = exports.should_fade_message(first_message);
+        should_fade_group = should_fade_message(first_message);
 
         change_fade_state($(visible_groups[i]), should_fade_group);
     }
@@ -95,9 +93,7 @@ function fade_messages() {
             // sorted as it would be displayed in the message view
             for (i = 0; i < all_groups.length; i += 1) {
                 const group_elt = $(all_groups[i]);
-                should_fade_group = exports.should_fade_message(
-                    rows.recipient_from_group(group_elt),
-                );
+                should_fade_group = should_fade_message(rows.recipient_from_group(group_elt));
                 change_fade_state(group_elt, should_fade_group);
             }
 
@@ -109,7 +105,7 @@ function fade_messages() {
     );
 }
 
-exports.would_receive_message = function (user_id) {
+export function would_receive_message(user_id) {
     if (focused_recipient.type === "stream") {
         const sub = stream_data.get_sub_by_id(focused_recipient.stream_id);
         if (!sub) {
@@ -124,7 +120,7 @@ exports.would_receive_message = function (user_id) {
 
     // PM, so check if the given email is in the recipients list.
     return util.is_pm_recipient(user_id, focused_recipient);
-};
+}
 
 const user_fade_config = {
     get_user_id(li) {
@@ -140,7 +136,7 @@ const user_fade_config = {
 
 function update_user_row_when_fading(li, conf) {
     const user_id = conf.get_user_id(li);
-    const would_receive = exports.would_receive_message(user_id);
+    const would_receive = would_receive_message(user_id);
 
     if (would_receive || people.is_my_user_id(user_id)) {
         conf.unfade(li);
@@ -204,43 +200,43 @@ function do_update_all() {
 // This one only updates the users, not both, like update_faded_messages.
 // This is for when new presence information comes in, redrawing the presence
 // list.
-exports.update_faded_users = function () {
+export function update_faded_users() {
     const user_items = buddy_list.get_items();
 
-    exports.update_user_info(user_items, user_fade_config);
-};
+    update_user_info(user_items, user_fade_config);
+}
 
-exports.update_user_info = function (items, conf) {
+export function update_user_info(items, conf) {
     if (want_normal_display()) {
         display_users_normally(items, conf);
     } else {
         fade_users(items, conf);
     }
-};
+}
 
 // This gets called on keyup events, hence the throttling.
-exports.update_all = _.debounce(do_update_all, 50);
+export const update_all = _.debounce(do_update_all, 50);
 
-exports.start_compose = function (msg_type) {
-    exports.set_focused_recipient(msg_type);
+export function start_compose(msg_type) {
+    set_focused_recipient(msg_type);
     do_update_all();
-};
+}
 
-exports.clear_compose = function () {
+export function clear_compose() {
     focused_recipient = undefined;
     display_messages_normally();
-    exports.update_faded_users();
-};
+    update_faded_users();
+}
 
-exports.update_message_list = function () {
+export function update_message_list() {
     if (want_normal_display()) {
         display_messages_normally();
     } else {
         fade_messages();
     }
-};
+}
 
-exports.update_rendered_message_groups = function (message_groups, get_element) {
+export function update_rendered_message_groups(message_groups, get_element) {
     if (want_normal_display()) {
         return;
     }
@@ -251,9 +247,7 @@ exports.update_rendered_message_groups = function (message_groups, get_element)
     for (const message_group of message_groups) {
         const elt = get_element(message_group);
         const first_message = message_group.message_containers[0].msg;
-        const should_fade = exports.should_fade_message(first_message);
+        const should_fade = should_fade_message(first_message);
         change_fade_state(elt, should_fade);
     }
-};
-
-window.compose_fade = exports;
+}
diff --git a/static/js/drafts.js b/static/js/drafts.js
index 64ab43315d..633f46c8e9 100644
--- a/static/js/drafts.js
+++ b/static/js/drafts.js
@@ -3,6 +3,7 @@ import Handlebars from "handlebars/runtime";
 
 import render_draft_table_body from "../templates/draft_table_body.hbs";
 
+import * as compose_fade from "./compose_fade";
 import {localstorage} from "./localstorage";
 import * as people from "./people";
 import * as util from "./util";
diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index aca5865b3d..a13ed3501e 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -17,7 +17,6 @@ declare let color_data: any;
 declare let compose: any;
 declare let compose_actions: any;
 declare let composebox_typeahead: any;
-declare let compose_fade: any;
 declare let compose_state: any;
 declare let compose_ui: any;
 declare let condense: any;
diff --git a/static/js/message_events.js b/static/js/message_events.js
index 46640f2a21..1e8272ce82 100644
--- a/static/js/message_events.js
+++ b/static/js/message_events.js
@@ -2,6 +2,7 @@
 
 const alert_words = require("./alert_words");
 const channel = require("./channel");
+const compose_fade = require("./compose_fade");
 const huddle_data = require("./huddle_data");
 const message_edit_history = require("./message_edit_history");
 const narrow_state = require("./narrow_state");
diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js
index efc4a8af70..0fa84219c8 100644
--- a/static/js/message_list_view.js
+++ b/static/js/message_list_view.js
@@ -6,6 +6,7 @@ import render_message_group from "../templates/message_group.hbs";
 import render_recipient_row from "../templates/recipient_row.hbs";
 import render_single_message from "../templates/single_message.hbs";
 
+import * as compose_fade from "./compose_fade";
 import * as message_viewport from "./message_viewport";
 import * as narrow_state from "./narrow_state";
 import * as people from "./people";
diff --git a/static/js/narrow.js b/static/js/narrow.js
index e166f68039..02d4b4f4a3 100644
--- a/static/js/narrow.js
+++ b/static/js/narrow.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const channel = require("./channel");
+const compose_fade = require("./compose_fade");
 const {Filter} = require("./filter");
 const {MessageListData} = require("./message_list_data");
 const narrow_state = require("./narrow_state");
diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js
index 64ed8d5331..c0c62ea098 100644
--- a/static/js/server_events_dispatch.js
+++ b/static/js/server_events_dispatch.js
@@ -1,6 +1,7 @@
 import * as emoji from "../shared/js/emoji";
 
 import * as alert_words from "./alert_words";
+import * as compose_fade from "./compose_fade";
 import * as muting_ui from "./muting_ui";
 import * as narrow_state from "./narrow_state";
 import * as peer_data from "./peer_data";