Fixes base url

src/components/SideMenu.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { SUPPORTED_LANGUAGES } from '../i18n/config';
-import Flags from 'country-flag-icons/react/3x2';
+import * as Flags from 'country-flag-icons/react/3x2';
 import { Link } from 'react-router-dom';
 
 function Flag({className, code}: {className?: string, code: string}) {

src/index.tsx

@@ -17,20 +17,19 @@ function Redirect({ to }: { to: string }) {
   return null;
 }
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Home />,
-  },
-  {
-    path: "/pairing",
-    element: <Pairing />,
-  },
-  {
-    path: "/pairing.html",
-    element: <Redirect to="/pairing" />
-  }
-]);
+const router = createBrowserRouter([{
+  path: "/",
+  element: <Home />,
+}, {
+  path: "/pairing",
+  element: <Pairing />,
+}, {
+  path: "/pairing.html",
+  element: <Redirect to="/pairing" />
+}], {
+  // @ts-ignore
+  basename: import.meta.env.BASE_URL,
+});
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

src/pages/Home.tsx

@@ -52,7 +52,7 @@ export function Home() {
   };
 
   const getAssignmentLink = async (giver: string, receiver: string) => {
-    const baseUrl = window.location.origin;
+    const baseUrl = `${window.location.origin}${window.location.pathname.replace(/\/[^/]*$/, '')}`;
     const encryptedReceiver = await encryptText(receiver);
     return `${baseUrl}/pairing?from=${encodeURIComponent(giver)}&to=${encodeURIComponent(encryptedReceiver)}`;
   };

tsconfig.json

@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "ES2022",                                  /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "bundler",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */

vite.config.ts

@@ -2,5 +2,6 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
+  base: '/secretsanta/',
   plugins: [react()],
 })