Update src/App.jsx

src/App.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import QRCode from 'qrcode';
-import jsQR from 'jsQR';
-import './index.css'; // Import the external CSS file
+import jsqr from 'jsqr'; // Changed import statement to lowercase 'jsqr'
 
 // Custom Alert Modal Component
 const CustomAlert = ({ message, onClose }) => {
@@ -1268,8 +1267,9 @@ const App = () => {
 
                 const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
-                if (jsQR) {
-                    let code = jsQR(imageData.data, imageData.width, imageData.height);
+                // Use jsqr (lowercase) here
+                if (jsqr) {
+                    let code = jsqr(imageData.data, imageData.width, imageData.height);
 
                     if (!code) {
                         // Attempt to invert colors and try again
@@ -1278,7 +1278,7 @@ const App = () => {
                             imageData.data[i + 1] = 255 - imageData.data[i + 1];
                             imageData.data[i + 2] = 255 - imageData.data[i + 2];
                         }
-                        code = jsQR(imageData.data, imageData.width, imageData.height);
+                        code = jsqr(imageData.data, imageData.width, imageData.height);
                     }
 
                     if (code) {
@@ -1291,7 +1291,7 @@ const App = () => {
                         setShowSuggestedIdea(false);
                     }
                 } else {
-                    showAlert('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
+                    showAlert('QR decoder library (jsqr) not loaded. Please try again or check internet connection.');
                     setSuggestedIdea('');
                     setShowSuggestedIdea(false);
                 }