Can't see bar when I import something into index.jsx

[haxybaxy]

I am trying to add a tiny SVG icon to the left of the spaces component, so I made a component in a separate file to hold the icon, but whenever I import a file into the index.jsx file the bar will stop rendering.

I can add the SVG directly into the index file and it works, but I wanted to put it in a different file because it would be tidier this way, and it could be a nice feature to add officially since lots of sketchybar features have this.

Steps to reproduce the behavior:

1. Create a new file that returns and SVG component like this:

   
   import React from 'react';

const MyIcon = () => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24px" height="24px"

);

export default MyIcon;

2. Import the folder into index.jsx like so: 
`import MyIcon from "./lib/components/sideicon.jsx";`
3. Refresh widgets from Übersicht

This is the error I am getting in the debug console:
<img width="1127" alt="Screenshot 2024-07-16 at 23 22 43" src="https://github.com/user-attachments/assets/69833ef4-1d6a-4ae5-90ca-a22a04f14475">

- Mac OS Sonoma 14.5
- Yabai version 7.1.1
- Übersicht version 1.6

[Jean-Tinland]

I think this is simply due to the way you import React in your component. With Übersicht, you have to import React like this:

import * as Uebersicht from "uebersicht";
const { React } = Uebersicht;

Please let me know if this solves your issue!

[haxybaxy]

It does solve the issue! Thank you so much!