Fix JSX Syntax Errors Blocking Electron Dev

Problem

npm run dev:electron fails with two issues:

Sidebar.jsx:632 — Fatal: "Adjacent JSX elements must be wrapped in an enclosing tag"
ScreenShareModal.jsx:70 — Warning: Duplicate width key in object literal

Root Cause Analysis

Sidebar.jsx — Duplicate opening `<div>`

Lines 402 and 403 are identical:

<div style={{ display: 'flex', flex: 1, minHeight: 0 }}>  // line 402 ← DUPLICATE
<div style={{ display: 'flex', flex: 1, minHeight: 0 }}>  // line 403

Line 403's div closes at line 632, but line 402's div never closes. This leaves the Voice Connection Panel (line 633), UserControlPanel (line 681), and modals (line 684+) as adjacent siblings without a common parent.

ScreenShareModal.jsx — Duplicate style key

Line 70 has width specified twice:

style={{ position: 'relative', width: '100%', height: '250px', width: '450px', ... }}

The second width: '450px' silently overrides width: '100%'.

Fix

1. Sidebar.jsx — Remove duplicate div (line 402)

File: FrontEnd/Electron/src/components/Sidebar.jsx

Delete line 402 entirely. The remaining structure becomes:

Line 401: <div className="sidebar">           ← outermost
Line 403:   <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>  ← flex container
              ...server-list + channel-list...
Line 632:   </div>                             ← closes flex container
            Voice Connection Panel, UserControlPanel, Modals
Line 701: </div>                               ← closes sidebar

2. ScreenShareModal.jsx — Remove duplicate width

File: FrontEnd/Electron/src/components/ScreenShareModal.jsx

On line 70, remove the first width: '100%', — keep only width: '450px'.

Verification

Run npm run dev:electron — Vite should compile without errors
The Electron window should open and render the sidebar correctly

1.9 KiB Raw Blame History