Проблема Redux, а может быть жопаболь? (Front-end, React + Redux Toolkit)

[Alternant]

Доброй ночи, форумчане!

Я словил жесткое отчаяние, ведь все как всегда не работает как должно.
Если к сути: Рендерится, но не отображается обьект на Rage MP. В браузере все нормально, окно появляется и все чики-пуки, но в RageMP несмотря на рендер(выводил логи в консоль) элемента тупо нет на экране.

У меня уже была подобная проблема ранее с другим элементом UI, но она решилась сама по себе(магия), сейчас появилась, но уже в новом воплощении.


Код Handler-а:

export const Inventory: React.FC = () => {
  const isOpen = useAppSelector((state) => state.inventory.isOpen);

  return isOpen && <MainInventory />;
};

export const MainInventory: React.FC = () => {
  const dispatch = useAppDispatch();
  const [activeItemIcon, setActiveItemIcon] = React.useState(null);
  const inventoryRef = React.useRef(null);
  const inventoryDragHolder = (e: DragStartEvent) => {
    setActiveItemIcon(e.active.data.current.icon);
  };
  const DndDropHolder = (e: DragEndEvent) => {
    setActiveItemIcon(null);
    if (!e.over) return;
    const draggedItemId = e.active.id.toString().split('-');
    const droppedItemId = e.over.id.toString().split('-');
    const action: TransferItemPayload = {
      item: e.active.data.current as InventoryItem,
      from: {
        cellId: Number(draggedItemId[0]),
        inventoryType: draggedItemId[1] as InventoryTypes,
      },
      to: {
        cellId: Number(droppedItemId[0]),
        inventoryType: droppedItemId[1] as InventoryTypes,
      },
    };
    dispatch(inventoryActions.transferItem(action));
  };
  return (
    <div className="inventory__holder">
      <div className="inventory" ref={inventoryRef}>
        <DndContext onDragEnd={DndDropHolder} onDragStart={inventoryDragHolder} autoScroll={false}>
          <CharacterBlock />
          <MainItemsBlock inventoryRef={inventoryRef} />
          <EnviromentBlock inventoryRef={inventoryRef} />
          <DragOverlay className={`cell`} zIndex={101}>
            {activeItemIcon && (
              <div className="cell__iconBlock">
                <img
                  className="cell__iconBlock-icon"
                  src={require('../../assets/items/pdw.png')}
                  alt=""
                />
                <img
                  className="cell__iconBlock-bgLight"
                  src={require('../../assets/bgLight.svg')}
                  alt=""
                />
              </div>
            )}
          </DragOverlay>
        </DndContext>
        <QuickSlots />
      </div>
    </div>
  );
};

Везде смотрел логи, редьюсер отрабатывает, стейт меняется, обьект рендерится. Ошибок в данных никаких нет.
Самое интересное, что если я установлю начальный state isOpen на true, то обьект появляется на экране. Перекрытий другими элементами быть не может.
В чем может быть проблема?

 

[Jerry (ChatGPT)]

Похоже, что проблема может быть связана с тем, что в приложении для Rage MP элемент не отображается, хотя он рендерится. Возможно, проблема связана с тем, что внутри компонента MainInventory используются пути к изображениям через require, что может вызывать проблемы в среде выполнения Rage MP. Попробуйте заменить такие пути на относительные или абсолютные пути к изображениям и проверьте, появится ли элемент на экране приложения Rage MP.

 

[Alternant]

К слову, реализовывал появление другого компонента РОВНО ТАКИМ ЖЕ СПОСОБОМ, но один работает, второй нет. Шо за жизнь...

 

[Alternant]

А, ой)

Не до конца уследил, просто худ перекрывал блок инвентаря, ибо находился выше него в DOM. Закрыто