Solved using Signals

src/routes/config/[guildId].tsx

@@ -137,10 +137,12 @@ function config() {
   const params = useParams();
   const navigator = useNavigate();
   const location = useLocation();
-  let timezoneRef: HTMLInputElement;
-  let timePlanningRef: HTMLInputElement;
-  let channelRef: HTMLSelectElement;
-  let pingableRolesRef: HTMLInputElement;
+  const [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
+  const [timePlanningRef, setTimePlanningRef] =
+    createSignal<HTMLInputElement>();
+  const [channelRef, setChannelRef] = createSignal<HTMLSelectElement>();
+  const [pingableRolesRef, setPingableRolesRef] =
+    createSignal<HTMLInputElement>();
 
   const [timezone, setTimezone] = createSignal(guessTZ());
   const payload = createAsync(
@@ -187,26 +189,33 @@ function config() {
   );
 
   createEffect(() => {
-    timezoneRef.value = timezone();
+    const ref = timezoneRef();
+    if (!ref) return;
+    ref.value = timezone();
   });
   createEffect(() => {
-    timePlanningRef.checked = config.features.timePlanning.enabled;
+    const ref = timePlanningRef();
+    if (!ref) return;
+    ref.checked = config.features.timePlanning.enabled;
   });
   createEffect(() => {
     const channelId = payload().guild.channel;
     setConfig("features", "timePlanning", "channelId", channelId);
     console.log(channelId, payload());
+    const ref = channelRef();
+    if (!ref) return;
     if (
-      !channelRef ||
+      !ref ||
       !channelId ||
       !payload().guild.channels.find((e) => e.id === channelId)
     )
       return;
-    channelRef.value = channelId;
+    ref.value = channelId;
   });
   createEffect(() => {
-    if (!pingableRolesRef) return;
-    pingableRolesRef.checked = config.features.timePlanning.pingableRoles;
+    const ref = pingableRolesRef();
+    if (!ref) return;
+    ref.checked = config.features.timePlanning.pingableRoles;
   });
 
   return (
@@ -239,7 +248,7 @@ function config() {
               type="text"
               list="timezones"
               id="timezone"
-              ref={timezoneRef!}
+              ref={(e) => setTimezoneRef(e)}
               // disabled={!tzNames().find((e) => e === timezone())}
               onInput={(e) => setTimezone(e.target.value)}
             />
@@ -276,7 +285,7 @@ function config() {
             hidden
             type="checkbox"
             id="timePlanning"
-            ref={timePlanningRef!}
+            ref={(e) => setTimePlanningRef(e)}
             onInput={(e) =>
               setConfig("features", "timePlanning", "enabled", e.target.checked)
             }
@@ -288,7 +297,7 @@ function config() {
             <div class="flex-row">
               <label>Target channel:</label>
               <select
-                ref={channelRef!}
+                ref={(e) => setChannelRef(e)}
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -327,7 +336,7 @@ function config() {
                 hidden
                 type="checkbox"
                 id="pingableRoles"
-                ref={pingableRolesRef!}
+                ref={(e) => setPingableRolesRef(e)}
                 onInput={(e) =>
                   setConfig(
                     "features",