Change relative to absolute paths

apps/frontend/package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@tanstack/router-devtools": "^1.82.2",
     "@tanstack/router-plugin": "^1.81.9",
+    "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vanilla-extract/vite-plugin": "^4.0.17",

apps/frontend/src/components/section-hello/section-hello.tsx

@@ -1,9 +1,8 @@
 import { memo } from "react";
-import { Button } from "../button";
-import { BurgerMenu } from "../burger-menu";
-import { Menu } from "../menu";
+import { Button } from "~/components/button";
+import { Menu } from "~/components/menu";
 
-import img from "../../assets/images/sectionHello.png";
+import img from "~/assets/images/sectionHello.png";
 import "./_section-hello.sass";
 
 const SectionHelloComponent = function SectionHello() {

apps/frontend/src/routes/(auth)/_auth.lazy.tsx

@@ -11,7 +11,7 @@ import { useState } from "react";
 
 import styles from "./_auth.module.sass";
 import clsx from "clsx";
-import { OutletWithPresence } from "../../components/outlet";
+import { OutletWithPresence } from "~/components/outlet";
 
 export const Route = createLazyFileRoute("/(auth)/_auth")({
   component: RouteComponent,

apps/frontend/src/routes/__root.tsx

@@ -1,5 +1,5 @@
 import { Lenis } from "@star4/react";
-import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { lazy, Suspense } from "react";
 
 const TanStackRouterDevtools =
@@ -14,15 +14,6 @@ const TanStackRouterDevtools =
 export const Route = createRootRoute({
   component: () => (
     <>
-      {/* <div>
-        <Link to="/">
-          Home
-        </Link>{' '}
-        <Link to="/about">
-          About
-        </Link>
-      </div>
-      <hr /> */}
       <Lenis>
         <Outlet />
         <Suspense>

apps/frontend/src/routes/index.lazy.tsx

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { SectionHello } from "../components/section-hello";
-import { Hero } from "../components/hero";
+import { SectionHello } from "~/components/section-hello";
+import { Hero } from "~/components/hero";
 
 export const Route = createLazyFileRoute("/")({
   component: Index,

apps/frontend/src/styles/theme.css.ts

@@ -1,5 +1,5 @@
 import { assignVars, createGlobalTheme, globalStyle } from "@vanilla-extract/css";
-import { theme, THEME } from "../theme";
+import { theme, THEME } from "~/theme";
 
 const LIGHT_THEME = theme("light");
 const DARK_THEME = theme("dark");

apps/frontend/tsconfig.app.json

@@ -20,6 +20,10 @@
     "strict": true,
     "noImplicitOverride": true,
     "forceConsistentCasingInFileNames": true,
+
+    "paths": {
+      "~/*": ["./src/*"],
+    },
   },
   "include": ["src"]
 }

apps/frontend/vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+import { resolve } from "path";
 
 // Renaming all imported plugins to follow our naming convention
 import { TanStackRouterVite as tanStackRouter } from "@tanstack/router-plugin/vite";
@@ -14,4 +15,9 @@ export default defineConfig({
     vanillaExtract(),
     react(),
   ],
+  resolve: {
+    alias: {
+      "~": resolve(__dirname, "src"),
+    },
+  },
 })

yarn.lock

@@ -275,6 +275,7 @@ __metadata:
     "@tanstack/react-router": "npm:^1.82.2"
     "@tanstack/router-devtools": "npm:^1.82.2"
     "@tanstack/router-plugin": "npm:^1.81.9"
+    "@types/node": "npm:^22.9.1"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18.3.1"
     "@vanilla-extract/css": "npm:^1.16.0"
@@ -1516,7 +1517,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*":
+"@types/node@npm:*, @types/node@npm:^22.9.1":
   version: 22.9.1
   resolution: "@types/node@npm:22.9.1"
   dependencies: