upgrade to react 19 and next 15

Author: RingoDev

README.md

@@ -1,15 +1,19 @@
 # Picture-Solver
 
-This is a next.js app that uses image recognition to parse and detect a Sudoku from a picture. Additionally it allows the user to step through the sudoku step by step to get additional hints of which number could have been found next.
-
+This is a next.js app that uses image recognition to parse and detect a Sudoku from a picture. Additionally it allows
+the user to step through the sudoku step by step to get additional hints of which number could have been found next.
 
 ## Image recognition
 
-THe image recognition is done by using openCV for processing and trying to find a grid in a picture that resembles a Sudoku. Afterwards the sudoku is transposed and cut into 81 parts that are sent through the MNIST model for recognicing handwritten integers. All of this is purely done in the browser by using tensorflow JS and an openCV WebAssembly port.
+THe image recognition is done by using openCV for processing and trying to find a grid in a picture that resembles a
+Sudoku. Afterwards the sudoku is transposed and cut into 81 parts that are sent through the MNIST model for recognising
+handwritten integers. 
 
+All of this is purely done in the browser by using tensorflow JS and an openCV WebAssembly port.
 
 ## Sudoku Solving
 
-Currently the solving capabilities are quite limited and only work for "simple" cases. This could be improved in the future.
+Currently, the solving capabilities are quite limited and only work for "simple" cases. This could be improved in the
+future.
 
 ![Sudoku Solver](image.png)

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,7 +1,6 @@
 module.exports = {
-    webpack: (config) => {
-      config.resolve.fallback = { fs: false };
-  
-      return config;
-    },
-  };
+  webpack: (config) => {
+    config.resolve.fallback = { fs: false };
+    return config;
+  },
+};

package.json

@@ -3,28 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@tensorflow/tfjs": "^4.17.0",
-    "lucide-react": "^0.364.0",
-    "next": "^14.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@tensorflow/tfjs": "^4.22.0",
+    "lucide-react": "^0.468.0",
+    "next": "^15.0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.4",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
-    "autoprefixer": "^10.4.13",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.1.4",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "9.16.0",
+    "eslint-config-next": "15.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-unused-imports": "^3.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "mirada": "^0.0.15",
-    "postcss": "^8.4.18",
-    "prettier": "^3",
-    "prettier-plugin-tailwindcss": "^0.5.13",
-    "tailwindcss": "^3.2.1",
-    "typescript": "^5.4.4"
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2"
   },
   "scripts": {
     "dev": "next dev",

src/lib/hooks/useOnClickOutside.ts

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import assertIsNode from "../utils/nodeAssert";
 
 function useOnClickOutside(
-  ref: React.RefObject<HTMLDivElement>,
+  ref: React.RefObject<HTMLDivElement | null>,
   callback: () => any,
 ) {
   useEffect(() => {