Aetae

Проще всего это делается через css селектор атрибутов вида [class^="chat__root__"] . Заметьте я использовал не полное имя класса, а только начало и модификатор ^= указывающий сверять только начало(если класс не первый, то можно использовать *=). Почему? Потому что "непонятные буковки" в конце - это генерируемый при сборке хэш, который поменяется при выпуске следующей версии фронта и если вы к нему привяжитесь - ваш скрипт очень скоро перестанет работать.

Если фрейм с другого адреса, то надо создать этот userscript именно для этого адреса и уже применять там:

// @run-at document-start

function addCss(css, root = window) {
  const style = root.document.createElement('style');
  style.innerHTML = css;
  (root.document.head || root.document.documentElement).append(style);
  return style;
} 

const css = `
  [class^="chat__root__"] {
    dislpay: none !important;
  }
`;

addCss(css);

Если с этого же, то придётся заморочиться:

// @run-at document-start

const css = `
  [class^="chat__root__"] {
    dislpay: none !important;
  }
`;

// отлавливаем загрузку фреймов
new MutationObserver(() => {
  document.querySelectorAll('iframe:not([us-processed]').forEach((iframe) => {
    if (isAccessibleFrame(iframe)) {
      // добавляем наш css
      addCss(css, iframe.contentWindow);
      
      // на случай если содержимое фрейма перепишут позднее
      iframe.addEventListener('load', () => addCss(css, iframe.contentWindow));
    }
    // помечаем что обработали этот фрем, чтоб не повторять
    iframe.setAttribute('us-processed', true);
  });
}).observe(document, {childList: true, subtree: true});

// проверяем что содержимое фрейма доступно 
function isAccessibleFrame(iframe) {
  try {
    iframe.contentWindow.test
    return true
  } catch (e) {
    return false
  }
}

Делая так:
const ThemeProvider: FC = ...;
Ты говоришь ts, что у тебя ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.

Пиши либо так:
const ThemeProvider: FC<{children: ...}> = ...;

Либо так:
const ThemeProvider = ({ children }: ...) => ...;
* Кстати обрати внимание на деструктуризацию, в react component всегда приходят props, children это поле props, а не верхний аргумент.

Либо так:
const ThemeProvider: FC<PropsWithChildren> = ...
* PropsWithChildren - тип помощник, добавляющий children к объекту, например

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

но без дженерика просто отдаёт тип вида

{
    children?: ReactNode | undefined;
}

compilerOptions.path влияет только собсно на "красные подчёркивания", tsconfig никак не управляет настоящими путями.
Тебе надо руками прописывать alias в конфиге webpack.

React Native - нет, он без сборки не заведётся.
React - да, но придётся выкинуть 90% уроков из сети на помойку, так как писать придётся не на jsx, а на прямом использовании api, т.е. React.cteateElement(Component, ...) вместо <Component ...>. Про 60% библиотек и вспомогательных утилит тоже можно будет забыть, с ещё 20% придётся хорошенько повозиться чтоб запустить.

В целом же заниматься фронтом без ноды и обвеса в наше время - для сильных духом.:)

Как ты используешь этот RegisterService?
Чтоб он работал, как и написано в ошибке, он должен быть компонентом.
Т.е. <RegisterService ...> или React.createElement(RegisterService, ...) .

Второй вариант: он может быть не компонентом, а хуком. Тогда он должен вызываться внутри другого компонента, а также иметь префикс use - useRegisterService(отсутствие префикса не приведёт к ошибке, но это стандарт).

Если ты просто вызываешь его где-то вне компонента как функцию - ничего работать не будет.

Приложение собирается сборщиком. Все импорты обрабатываются на стадии сборки, и на стадии сборки же включаются в бандл(основной js файл).
Если вы указываете переменную в пути - это значит только то, что в бандл будут включены ВСЕ файлы находящиеся по такому пути.
Никакие новые файлы(отсутствующие при сборке) уже собранное приложение грузить через import не будет.

Нужна загрузка новых файлов по url? Придётся делать всё руками по-старинке.

Нужна загрузка таки уже имеющихся? Уточняйте путь до минимального:

import(`../Screen/About/${currentScreen.name}.jsx`);

И помните, что в бандле будет ВСЁ по маске `../Screen/About/*.jsx`.
Хоть какое-то уточнение стартового пути необходимо, потому что иначе сборщик бы собрал в бандл вообще все файлы на вашем компьютере, что, думаю, не желаемое поведение.

Возможно что-то поменялось для сборки через vite(т.к. он пользуется модулями), но тут не подскажу.

Почему такое происходит?
Событие load отрабатывает когда всё что уже было на странице загружено.
Проблема в том, что react-компоненты появляются динамически с помощью js, что выкидывает их из стандартной системы.

Что делать?
Вопрос не простой, ты никак не можешь отследить загрузку bg картинок напрямую.
Способ который будет работать гарантировано, но костыльный и напряжный: взять все нужные картинки и загрузить их в фоне руками через new Image, когда они все будут загружены - можно отобразить.
Иные варианты? Х.з.)

const useScreenResolution: Mock & ((<args type>) => <return type>) = (...) => {...}

?

observe.current.observe(lastElement.current);

lastElement - не элемент, а реф на элемент, о чем тебе ошибка и пишет.

Нет.

dangerouslySetInnerHTML
Как следует из названия - стоит дважды подумать, прежде чем использовать в продуктивном коде.

Тебе английским по белому написано: "Property todos does not exists", что тут непонятно?

Твой компонент TodoList не ожидает пропа todos.

declare module "custom-editor"
import Editor from 'custom-editor-lib/dist/index'

Не замечаешь разницы?

Ну в принципе можно как с любыми переменными - вынести за компонент, и даже будет работать, но так делать не надо.)

Нормальное решение - использовать context всесто ref. Сверху где-то его Provider зафигачить, а где надо useContext.