Aetae

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.

Можно использовать css-modules.
Можно оставить твой подход, просто пользоваться БЭМ и scss, называя корневой класс по имени компонента(тогда конфликтов никаких не будет).
Решения css-in-js типа styled - популярны, но как по мне - ересь и грязь.

Ответ Александр хорошо работает если есть дискриминатор (в приведённом примере поле type).

Если же такого уникального поля нет, то конкретно для React можно сделать на перегрузках, условно:

type ExtraProps = {
  size?: 's' | 'm' | 'l';
}

type AnchorProps = ExtraProps & {href: string};
type ButtonProps = ExtraProps & {type: string};

function TappableComponent(props: AnchorProps ): ReactNode; 
function TappableComponent(props: ButtonProps ): ReactNode;
function TappableComponent(props: AnchorProps | ButtonProps ) {
     const Component = 'href' in props ? 'a' : 'button';
     return <Component>...</Component>
}

Там множество подводных камней, но иногда удобно.

Ответ на твой вопрос на самом деле зависит от того, что за говно у тебя в cartEmptyImg.
Т.к. голый js не умеет в принципе импортировать что-то кроме js модулей - это полностью зависит от твоей конфигурации загрузчиков и настроек, о которых в вопросе не сказано ни слова.
Даже хотя-бы полный текст ошибки частично пролил бы свет на этот вопрос, но конечно же "лишняя" информация в вопросе не нужна, да.

В целом тут может быть несколько вариантов:
1. Используется простой загрузчик, который в импорт подставит простой url или data uri, тогда у тебя хреново настроен тип для png: должен быть где-то файлик условно вида:
2. Используется какая-то более продвинутая хрень(генератор спрайтов, генератор react-копонентов, и т.д.). Тут уж сам смотри что там и куда это что-то надо пихать, потому как без инфы тут можно только гадать на кофейной гуще.

https://vitejs.dev/config/server-options.html#serv...
Буквально первый параметр сервера в vite.

У тебя в тегах вебпак, а значит тебе нужны именно его алиасы.

Если ты используешь cra, то придётся костылить, через craco или подобное.

webpack - это webpack, typescript - это typescript, всекаешь?

Если нет, то поясню: это разные инструменты, которые могут прекрасно работать сами по себе и никак не пересекаться. Но в обоих случаях есть необходимость sourceMap.
Если говорить о связке webpack и typescript, при работе в лоб webpack, как сборщик, потребляет sourceMap из typescript и генерирует из них свои.

Сгенерированные из webpack sourceMap при отключении оных в typescript могут иметь разный вид в зависимости от настроек, плагинов и режимов: от нормальных, т.к. об этом позаботились плагины или вообще компиляция шла через babel, до полностью сломанных и бесполезных.

Надо явно создать union:

type ITableColumn<
  DataInterface extends object, 
  Keys extends keyof DataInterface = keyof DataInterface
> = {
  [K in Keys]: {
    key: K;
    title: React.ReactNode;
    hasSort?: boolean;
    render?: (item: DataInterface[K]) => React.ReactNode;
  }
}[Keys];