Aetae

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

Нормальное решение - использовать 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];

Мужик. Ты спик инглиш или как? MouseEventHandler переводится как "дрессировщик мышей для эвента" "обработчик событий мыши". KeyboardEventHandler как что? Правильно, "обработчик событий клавиатуры".
Давайте подумаем, что же функция с такими типам может ожидать на вход, а? Может, соответственно, события мыши или клавиатуры(MouseEvent/KeyboardEvent)? Да не, бред какой-то.

Но окей, дальше мы назначили пропсам интерфейс, где getCity таки имеет такой тип. И куда же мы передаём этот getCity? А передаём мы его в onSubmit. Скажи же мне, друже, submit - это событие клавиатуры? Или может быть это событие мыши? Ты уверен? Вот и мне кажется что нет.

Вот это вот:

root.render(
    <Header/>
);

Это магия под названием jsx. Она будет работать только если использовать специальные механизмы сборки, которые превратят сие непотребство в нормальный javascript.

Если же ты хочешь просто вставить свой код на страницу без предвариательных танцев, то тебе придётся писать на чистом javascript, условно так:
<script src="index.js" type="module"></script>

import Header from './Header.js';

const domContainer = document.querySelector('#container');
const root = ReactDOM.createRoot(domContainer);
root.render(
  React.createElement(Header)
);

function Header() { 
  return React.createElement('div', null, 'hsas')
}
export default Header;

console.log.toString()
Сайт подменяет консоль.

Если используешь юзерскрипты, то можешь забрать консоль до того как её подменят:

// @run-at document-start
const myConsole = window.console;

Если нет, но очень надо - можешь создать фрейм и забрать консоль оттуда.)

Ну собсно по хардкору:
1. Invalidate Caches если ещё не сделал.
2. Закрыть, удалить папку .idea, открыть чтоб распарсил заново.
3. Создать новый проект с заведомо рабочим конфигом и перекидывать туда кусками пока не сломается и так найти виновника.

Ну очевидно, что NavLink не принимает функцию в качестве children. Могу предположить, что код у тебя для одной версии роутера, а используется другая.

У тебя две совершенно разные проблемы в одном вопросе:

1. TS тебе пишет ошибку, что тип Date не может быть children'ом для компонента, и это так. Однако дело в том, что тип у тебя задан неверно, на самом деле у тебя там никакой не Date а банальный string. Если ты поправишь типы, то всё заработает и выведет тебе то что ты передаёшь, т.е. 2012-03-23T08:25:44.962Z.

2. Чтоб превратить строку 2012-03-23T08:25:44.962Z в строку Created 7 years ago надо либо руками написать соответствующую функцию, либо воспользоваться какой-либо библиотекой для работы с датами. Например с помощью moment это будет выглядеть примерно так:

const createdFromNow = `Created ${
  moment.duration(moment().diff(data.createdAt)).humanize()
} ago`;

useMemo - это не магическое заклинание. Оно работает сверяя изменения переданных props не более того.
В твоём случае в useMemomemo надо обернуть сам компонент Replay, а не голый jsx.

Не используйте localStorage напрямую, напишите минимальюную обёртку-hook, положите в context или используйте одну из 100500 готовых библиотек для store в react.

type Extensions = {
  Category: typeof LayoutMenuCategory;
  Item: typeof LayoutMenuItem;
};

Иначе оно для ts может быть также и undefined, а undefined - то, что написано в ошибке.