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

.eslintrc.js

@@ -102,6 +102,7 @@ module.exports = {
       {
         vars: 'all',
         args: 'after-used',
+        destructuredArrayIgnorePattern: '^_',
         ignoreRestSiblings: true,
       },
     ],
@@ -208,6 +209,9 @@ module.exports = {
         ],
       },
     ],
+    'import/no-amd': 'error',
+    'import/no-commonjs': 'error',
+    'import/no-import-module-exports': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
     'promise/always-return': 'off',
@@ -255,6 +259,7 @@ module.exports = {
         '*.config.js',
         '.*rc.js',
         'ide-helper.js',
+        'config/webpack/**/*',
       ],
 
       env: {
@@ -264,6 +269,10 @@ module.exports = {
       parserOptions: {
         sourceType: 'script',
       },
+
+      rules: {
+        'import/no-commonjs': 'off',
+      },
     },
     {
       files: [
@@ -298,5 +307,13 @@ module.exports = {
         jest: true,
       },
     },
+    {
+      files: [
+        'streaming/**/*',
+      ],
+      rules: {
+        'import/no-commonjs': 'off',
+      },
+    },
   ],
 };

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');
+import { unicodeToUnifiedName } from './unicode_to_unified_name';
-const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed');
+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
+  _skins,
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _categories,
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _short_names,
   emojisWithoutShortCodes,
-] = require('./emoji_compressed');
+] = emojiCompressed;
-const { unicodeToFilename } = require('./unicode_to_filename');
 
 // 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';
-
+import * as perf from 'mastodon/performance';
-const perf = require('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');

app/javascript/packs/admin.jsx

@@ -1,6 +1,8 @@
 import './public-path';
 import { delegate } from '@rails/ujs';
 import ready from '../mastodon/ready';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 const setAnnouncementEndsAttributes = (target) => {
   const valid = target?.value && target?.validity?.valid;
@@ -223,9 +225,6 @@ ready(() => {
     setAnnouncementEndsAttributes(announcementStartsAt);
   }
 
-  const React    = require('react');
-  const ReactDOM = require('react-dom');
-
   [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
     const componentName  = element.getAttribute('data-admin-component');
     const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));

app/javascript/packs/mailer.js

@@ -1,3 +1,3 @@
-require('../styles/mailer.scss');
+import '../styles/mailer.scss';
 
 require.context('../icons');

app/javascript/packs/public.jsx

@@ -1,13 +1,24 @@
 import './public-path';
-import escapeTextContentForBrowser from 'escape-html';
 import loadPolyfills from '../mastodon/load_polyfills';
-import ready from '../mastodon/ready';
 import { start } from '../mastodon/common';
+
+import escapeTextContentForBrowser from 'escape-html';
+import ready from '../mastodon/ready';
 import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
 import 'cocoon-js-vanilla';
 import axios from 'axios';
 import { throttle } from 'lodash';
 import { defineMessages } from 'react-intl';
+import * as IntlMessageFormat  from 'intl-messageformat';
+import { timeAgoString }  from '../mastodon/components/relative_timestamp';
+import { delegate }  from '@rails/ujs';
+import * as emojify  from '../mastodon/features/emoji/emoji';
+import { getLocale }  from '../mastodon/locales';
+import React  from 'react';
+import ReactDOM  from 'react-dom';
+import { createBrowserHistory }  from 'history';
+
+start();
 
 const messages = defineMessages({
   usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
@@ -15,8 +26,6 @@ const messages = defineMessages({
   passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
 });
 
-start();
-
 window.addEventListener('message', e => {
   const data = e.data || {};
 
@@ -33,16 +42,8 @@ window.addEventListener('message', e => {
   });
 });
 
-function main() {
+function loaded() {
-  const IntlMessageFormat = require('intl-messageformat').default;
-  const { timeAgoString } = require('../mastodon/components/relative_timestamp');
-  const { delegate } = require('@rails/ujs');
-  const emojify = require('../mastodon/features/emoji/emoji').default;
-  const { getLocale } = require('../mastodon/locales');
   const { localeData } = getLocale();
-  const React = require('react');
-  const ReactDOM = require('react-dom');
-  const { createBrowserHistory } = require('history');
 
   const scrollToDetailedStatus = () => {
     const history = createBrowserHistory();
@@ -341,6 +342,11 @@ function main() {
   });
 }
 
+
+function main() {
+  ready(loaded);
+}
+
 loadPolyfills()
   .then(main)
   .then(loadKeyboardExtensions)

app/javascript/packs/share.jsx

@@ -1,23 +1,26 @@
 import './public-path';
 import loadPolyfills from '../mastodon/load_polyfills';
 import { start } from '../mastodon/common';
+import ready from '../mastodon/ready';
+import ComposeContainer  from '../mastodon/containers/compose_container';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 start();
 
 function loaded() {
-  const ComposeContainer = require('../mastodon/containers/compose_container').default;
-  const React = require('react');
-  const ReactDOM = require('react-dom');
   const mountNode = document.getElementById('mastodon-compose');
 
-  if (mountNode !== null) {
+  if (mountNode) {
-    const props = JSON.parse(mountNode.getAttribute('data-props'));
+    const attr = mountNode.getAttribute('data-props');
+    if(!attr) return;
+
+    const props = JSON.parse(attr);
     ReactDOM.render(<ComposeContainer {...props} />, mountNode);
   }
 }
 
 function main() {
-  const ready = require('../mastodon/ready').default;
   ready(loaded);
 }
 

package.json

@@ -76,6 +76,7 @@
     "jsdom": "^21.1.2",
     "lodash": "^4.17.21",
     "mark-loader": "^0.1.6",
+    "marky": "^1.2.5",
     "mini-css-extract-plugin": "^1.6.2",
     "mkdirp": "^2.1.6",
     "npmlog": "^7.0.1",
@@ -192,7 +193,6 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.2.2",
-    "marky": "^1.2.5",
     "prettier": "^2.8.8",
     "raf": "^3.4.1",
     "react-intl-translations-manager": "^5.0.3",