Dont use CommonJS (require, module.exports) anywhere (#24913)

app/javascript/mastodon/common.js

@@ -1,7 +1,7 @@
 import Rails from '@rails/ujs';
+import 'font-awesome/css/font-awesome.css';
 
 export function start() {
-  require('font-awesome/css/font-awesome.css');
   require.context('../images/', true);
 
   try {

app/javascript/mastodon/features/emoji/emoji_compressed.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here due to preval */
 // @preval
 // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
 // This file contains the compressed version of the emoji data from

app/javascript/mastodon/features/emoji/emoji_mart_data_light.js

@@ -1,8 +1,10 @@
 // The output of this module is designed to mimic emoji-mart's
 // "data" object, such that we can use it for a light version of emoji-mart's
 // emojiIndex.search functionality.
-const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
-const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed');
+import { unicodeToUnifiedName } from './unicode_to_unified_name';
+import emojiCompressed from './emoji_compressed';
+
+const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
 
 const emojis = {};
 
@@ -33,7 +35,7 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
   };
 });
 
-module.exports = {
+export {
   emojis,
   skins,
   categories,

app/javascript/mastodon/features/emoji/emoji_mart_search_light.js

@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 import { getData, getSanitizedData, uniq, intersect } from './emoji_utils';
 
 let originalPool = {};

app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js

@@ -2,14 +2,17 @@
 // (i.e. the svg filename) and a shortCode intended to be shown
 // as a "title" attribute in an HTML element (aka tooltip).
 
+import emojiCompressed from './emoji_compressed';
+
+import { unicodeToFilename } from './unicode_to_filename';
+
 const [
   shortCodesToEmojiData,
-  skins, // eslint-disable-line @typescript-eslint/no-unused-vars
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _skins,
+  _categories,
+  _short_names,
   emojisWithoutShortCodes,
-] = require('./emoji_compressed');
-const { unicodeToFilename } = require('./unicode_to_filename');
+] = emojiCompressed;
 
 // decompress
 const unicodeMapping = {};
@@ -32,4 +35,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
 });
 emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
 
-module.exports = unicodeMapping;
+export default unicodeMapping;

app/javascript/mastodon/features/emoji/emoji_utils.js

@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 
 const buildSearch = (data) => {
   const search = [];

app/javascript/mastodon/features/emoji/unicode_to_filename.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 // taken from:
 // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
 exports.unicodeToFilename = (str) => {

app/javascript/mastodon/features/emoji/unicode_to_unified_name.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 function padLeft(str, num) {
   while (str.length < num) {
     str = '0' + str;

app/javascript/mastodon/main.jsx

@@ -5,8 +5,7 @@ import Mastodon from 'mastodon/containers/mastodon';
 import { store } from 'mastodon/store/configureStore';
 import { me } from 'mastodon/initial_state';
 import ready from 'mastodon/ready';
-
-const perf = require('mastodon/performance');
+import * as perf from 'mastodon/performance';
 
 /**
  * @returns {Promise<void>}

app/javascript/mastodon/performance.js

@@ -2,9 +2,8 @@
 // Tools for performance debugging, only enabled in development mode.
 // Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
 // Also see config/webpack/loaders/mark.js for the webpack loader marks.
-//
 
-let marky;
+import * as marky from 'marky';
 
 if (process.env.NODE_ENV === 'development') {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
@@ -13,7 +12,6 @@ if (process.env.NODE_ENV === 'development') {
     performance.setResourceTimingBufferSize(Infinity);
   }
 
-  marky = require('marky');
   // allows us to easily do e.g. ReactPerf.printWasted() while debugging
   //window.ReactPerf = require('react-addons-perf');
   //window.ReactPerf.start();

app/javascript/mastodon/service_worker/web_push_locales.js

@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 /* @preval */
 
 const fs   = require('fs');