Fix Failed to execute 'replaceWith' on 'Element'

Author: Irvan789

resources/views/livewire/profile.blade.php

@@ -57,7 +57,7 @@ class="cursor-pointer hover:underline"
         label="Username"
         type="text"
         wire:model="username"
-        x-on:input="usernameInput"
+        x-on:input="$js.usernameInput"
       />
 
       <x-input-text
@@ -164,9 +164,11 @@ class="xs:max-w-30 ml-auto w-full text-xs/3"
     </x-form>
   </div>
 
-  <script lang="js">
-    const usernameInput = (event) => {
-      event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
-    }
-  </script>
+  @script
+    <script lang="js">
+      $js.usernameInput = (event) => {
+        event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
+      }
+    </script>
+  @endscript
 </x-contents>

resources/views/livewire/users/profile.blade.php

@@ -29,7 +29,7 @@ class="size-24 rounded-full"
         label="Username"
         type="text"
         wire:model="username"
-        x-on:input="usernameInput"
+        x-on:input="$js.usernameInput"
       />
 
       <x-input-text
@@ -142,9 +142,11 @@ class="xs:max-w-30 ml-auto w-full text-xs/3"
     </x-button>
   </div>
 
-  <script lang="js">
-    const usernameInput = (event) => {
-      event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
-    }
-  </script>
+  @script
+    <script lang="js">
+      $js.usernameInput = (event) => {
+        event.target.value = event.target.value.replaceAll(/[^a-zA-Z0-9_]/g, "_").toLowerCase()
+      }
+    </script>
+  @endscript
 </x-contents>