Fix constructor

components/bottom-sidebar/Card.jsx

@@ -2,8 +2,12 @@ import React from "react";
 import { HiOutlineQrcode } from "react-icons/hi";
 import { colorsList, shadowList } from "../../utils/bgColors";
 import { useTheme } from "next-themes";
-import QRCode from "./QRCode";
 import { RiCloseFill } from "react-icons/ri";
+import dynamic from "next/dynamic";
+
+const QRCode = dynamic(() => import("./QRCode"), {
+  ssr: false,
+});
 
 const Card = ({ link, linkIndex, qrCodeIndex, setQRCodeIndex }) => {
   const { theme, setTheme } = useTheme();

components/bottom-sidebar/QRCode.jsx

@@ -2,24 +2,24 @@ import React, { useEffect, useRef, useState } from "react";
 import QRCodeStyling from "qr-code-styling";
 import { BASE_URL } from "../../utils/config";
 
-const qrCode = new QRCodeStyling({
-  width: 200,
-  height: 200,
-  image: BASE_URL + "fire.png",
-  dotsOptions: {
-    color: "#1c1917",
-    type: "rounded",
-  },
-  imageOptions: {
-    crossOrigin: "anonymous",
-    margin: 5,
-  },
-});
-
 const QRCode = ({ qrCodeLink, instantDownload }) => {
   const [fileExt, setFileExt] = useState("png");
   const ref = useRef(null);
 
+  const qrCode = new QRCodeStyling({
+    width: 200,
+    height: 200,
+    image: BASE_URL + "fire.png",
+    dotsOptions: {
+      color: "#1c1917",
+      type: "rounded",
+    },
+    imageOptions: {
+      crossOrigin: "anonymous",
+      margin: 5,
+    },
+  });
+
   useEffect(() => {
     qrCode.append(ref.current);
   }, []);

components/bottom-sidebar/ScrollingCards.jsx

@@ -1,19 +1,12 @@
-import { colorsList, shadowList } from "../../utils/bgColors";
 import { cardsOpenState } from "../../atoms/cardsOpenState";
 import { linksState } from "../../atoms/linksState";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { BsFillXCircleFill } from "react-icons/bs";
-import { HiOutlineQrcode } from "react-icons/hi";
 import { useSwipeable } from "react-swipeable";
 import { useAtom } from "jotai";
 import { useTheme } from "next-themes";
-import dynamic from "next/dynamic";
 import Card from "./Card";
 
-const QRCode = dynamic(() => import("./QRCode"), {
-  ssr: false,
-});
-
 const ScrollingCards = () => {
   // !THIRD PARTY HOOKS
   const { theme, setTheme } = useTheme();

package.json

@@ -35,6 +35,6 @@
     "tailwindcss": "^3.4.1"
   },
   "volta": {
-    "node": "18.19.0"
+    "node": "20.11.0"
   }
 }