From 9a42aacc3afdd1f7e6b67021923ad74770d22eec Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Fri, 30 May 2025 11:49:13 +0200
Subject: [PATCH] Enhance Barcode Input and File Input Components with
 Client-Only Wrapper

- Updated `nuxt.config.ts` to include `@zxing/library` in the transpile list, ensuring compatibility with the new barcode scanning functionality.
- Modified `BarcodeInput.vue` and `FileInput.vue` components to wrap the `CameraUpload` component in a `<ClientOnly>` tag, preventing server-side rendering issues and improving the user experience during barcode scanning.

These changes aim to enhance the functionality of the barcode scanning feature while ensuring proper rendering in client-side environments.
---
 client/components/forms/BarcodeInput.vue | 2 ++
 client/components/forms/FileInput.vue    | 4 +++-
 client/nuxt.config.ts                    | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/components/forms/BarcodeInput.vue b/client/components/forms/BarcodeInput.vue
index f283459e..a7f1414e 100644
--- a/client/components/forms/BarcodeInput.vue
+++ b/client/components/forms/BarcodeInput.vue
@@ -8,12 +8,14 @@
       v-if="isScanning"
       class="relative w-full"
     >
+      <ClientOnly>
       <CameraUpload
         :is-barcode-mode="true"
         :decoders="decoders"
         @stop-webcam="stopScanning"
         @barcode-detected="handleBarcodeDetected"
       />
+      </ClientOnly>
     </div>
 
     <div
diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index 9677bb02..004428a2 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -10,12 +10,14 @@
         theme.fileInput.minHeight
       ]"
     >
-      <camera-upload
+      <ClientOnly>
+      <CameraUpload
         v-if="cameraUpload"
         :theme="theme"
         @upload-image="cameraFileUpload"
         @stop-webcam="isInWebcam=false"
       />
+      </ClientOnly>
     </div>
     <div
       v-else
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index b6eec302..cc31b9d4 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -22,7 +22,7 @@ export default defineNuxtConfig({
   ],
 
   build: {
-      transpile: ["vue-notion", "query-builder-vue-3", "vue-signature-pad"],
+      transpile: ["vue-notion", "query-builder-vue-3", "vue-signature-pad", "@zxing/library"],
   },
 
   i18n: {