fixing dependency issues for building with typescript and sql.js

client/next.config.js

@@ -5,9 +5,13 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 /** @type {import('next').NextConfig} */
 module.exports = {
   basePath: process.env.BASE_PATH ?? "",
+  images: {
+    unoptimized: true, // Disable image optimization for static export
+  },
   compiler: {
     styledComponents: true,
   },
+  swcMinify: false, // Fallback to Terser if SWC fails
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.plugins.push(

client/package.json

@@ -14,7 +14,7 @@
     "antd": "^4.19.3",
     "chart.js": "^3.7.1",
     "lodash.debounce": "^4.0.8",
-    "next": "^12.1.1",
+    "next": "^12.3.4",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
     "react-dom": "^17.0.2",
@@ -32,5 +32,8 @@
     "node-polyfill-webpack-plugin": "^1.1.4",
     "path": "^0.12.7",
     "webpack": "^5.70.0"
+  },
+  "optionalDependencies": {
+    "@next/swc-linux-x64-gnu": "^12.3.4"
   }
 }

client/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { HomeOutlined } from "@ant-design/icons";
 import { Button, Row } from "antd";
+import Image from "next/image";
 import Router from "next/router";
 import React from "react";
 import styled from "styled-components";
@@ -10,7 +11,7 @@ const Menu = styled(Row)`
   align-items: center;
 `;
 
-const Back = styled(Button)<{ $dummy?: boolean }>`
+const Back = styled(Button) <{ $dummy?: boolean }>`
   background: none;
   outline: none;
   border: none;
@@ -59,7 +60,7 @@ export default function Header() {
       <Back onClick={goHome} type="ghost" icon={<HomeOutlined />} shape="circle" size="large" />
       <HeaderText href="#" onClick={goHome}>
         <h2>
-          <img src="/ACMDev-logo.png" style={Logo}/> <HeaderBold>UTD</HeaderBold> Grades
+          <Image src="/ACMDev-logo.png" alt="ACM Dev Logo" width={24} height={24} style={Logo} /> <HeaderBold>UTD</HeaderBold> Grades
         </h2>
       </HeaderText>
       <Back

client/src/components/SearchResults.tsx

@@ -1,7 +1,7 @@
 import type { RMPInstructor } from "@utd-grades/db";
 import { Col, Row } from "antd";
 import type { NextRouter } from "next/router";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useQuery } from "react-query";
 import { animateScroll as scroll } from "react-scroll";
 import styled from "styled-components";
@@ -146,12 +146,25 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
     }
   }, [instructors, section, db]);
 
+  const handleClick = useCallback((id: number) => {
+    (async function () {
+      await router.push({
+        pathname: "/results",
+        query: { search, sectionId: id },
+      });
+    })();
+
+    const scrollDistance = window.scrollY + scrollRef.current!.getBoundingClientRect().top;
+
+    scroll.scrollTo(scrollDistance);
+  }, [router, search]);
+
   useEffect(() => {
     // Automatically select section if there is only one choice
     if (sections && sections.length == 1) {
       handleClick(sections[0]!.id);
     }
-  }, [sections]);
+  }, [sections, handleClick]);
 
   function handleSubmit({ search }: SearchQuery) {
     (async function () {
@@ -162,19 +175,6 @@ export default function Results({ search, sectionId, router }: ResultsProps) {
     })();
   }
 
-  function handleClick(id: number) {
-    (async function () {
-      await router.push({
-        pathname: "/results",
-        query: { search, sectionId: id },
-      });
-    })();
-
-    const scrollDistance = window.scrollY + scrollRef.current!.getBoundingClientRect().top;
-
-    scroll.scrollTo(scrollDistance);
-  }
-
   function handleRelatedSectionClick(search: string, id: number) {
     (async function () {
       await router.push({

client/src/components/SectionContent.tsx

@@ -9,6 +9,7 @@ import {
   LinearScale,
   Tooltip as ChartTooltip,
 } from "chart.js";
+import Image from "next/image";
 import React, { useRef, useState } from "react";
 import { Bar } from "react-chartjs-2";
 import styled from "styled-components";
@@ -434,7 +435,7 @@ export default function SectiSonContent({
                     }}
                   >
                     See more on
-                    <img src="/rmp-logo.png" alt="RMP" style={{ height: "1.1rem" }} />
+                    <Image src="/rmp-logo.png" alt="Rate My Professor Logo" width={88} height={18} style={{ height: "1.1rem" }} />
                   </div>
                   <div
                     style={{

client/src/pages/index.tsx

@@ -1,4 +1,5 @@
 import { Col } from "antd";
+import Image from "next/image";
 import Router from "next/router";
 import React from "react";
 import styled from "styled-components";
@@ -71,15 +72,15 @@ export default function Home() {
     <Core>
       <Content>
         <Main>
-          <Col lg={{ span: 10, offset: 7}} xs={{ span: 20, offset: 2 }}>
+          <Col lg={{ span: 10, offset: 7 }} xs={{ span: 20, offset: 2 }}>
             <FadeIn delay={0}>
               <Header>
-                <img src="/ACMDev-logo.png" style={Logo}/> <HeaderBold>UTD</HeaderBold> Grades <SmallFont> by <HeaderBold>ACM</HeaderBold></SmallFont>
+                <Image src="/ACMDev-logo.png" alt="ACM Dev Logo" width={32} height={32} style={Logo} /> <HeaderBold>UTD</HeaderBold> Grades <SmallFont> by <HeaderBold>ACM</HeaderBold></SmallFont>
               </Header>
             </FadeIn>
             <FadeIn delay={300}>
               <Description>
-                See how students did in any given class. And it's<strong> free, forever.</strong>
+                See how students did in any given class. And it&apos;s<strong> free, forever.</strong>
               </Description>
             </FadeIn>
             <Search onSubmit={handleSubmit} />

db/package.json

@@ -11,7 +11,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "csv-parse": "^5.0.4"
+    "csv-parse": "^5.0.4",
+    "sql.js": "^1.6.2"
   },
   "devDependencies": {
     "@types/node": "^17.0.23"

db/src/import/index.ts

@@ -227,7 +227,14 @@ async function insertInstructors(db: Database, jsonFilePath: string) {
 }
 
 async function createDb(): Promise<Uint8Array> {
-  const SQL = await initSqlJs();
+  // setup sql.js using wasm file
+  const wasmPath = path.join("../node_modules/sql.js/dist/sql-wasm.wasm");
+  const wasmBuffer = await fs.readFile(wasmPath);
+  const wasmBinary = wasmBuffer.buffer as ArrayBuffer;
+
+  const SQL = await initSqlJs({
+    wasmBinary
+  });
   const db = new SQL.Database();
 
   const initScript = await fs.readFile("db_schema.sql");
@@ -294,6 +301,6 @@ async function createDb(): Promise<Uint8Array> {
 const DB_PATH = "utdgrades.sqlite3";
 
 const data = await createDb();
-await fs.writeFile(DB_PATH, Buffer.from(data));
+await fs.writeFile(DB_PATH, data);
 
 console.log(`\nDatabase successfully written to ${DB_PATH}`);