chore: configure path aliases and update imports to use ~ prefix in tanstack-start example

Author: yamcodes

examples/with-tanstack-start/src/components/secret-leak-button.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { env } from "../env";
+import { env } from "~/env";
 
 function LeakedSecret() {
 	// Accessing server-only DATABASE_URL directly in client render tree throws an error

examples/with-tanstack-start/src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
-import { SecretLeakButton } from "../components/secret-leak-button";
-import { env } from "../env";
+import { SecretLeakButton } from "~/components/secret-leak-button";
+import { env } from "~/env";
 
 const getDatabaseHost = createServerFn({ method: "GET" }).handler(() => {
 	// Server functions can safely read server secrets without leaking them to the client:

examples/with-tanstack-start/tsconfig.json

@@ -1,6 +1,9 @@
 {
 	"include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
 	"compilerOptions": {
+		"paths": {
+			"~/*": ["./src/*"]
+		},
 		"strict": true,
 		"esModuleInterop": true,
 		"jsx": "react-jsx",

examples/with-tanstack-start/vite.config.ts

@@ -4,6 +4,9 @@ import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 export default defineConfig({
+	resolve: {
+		tsconfigPaths: true,
+	},
 	server: {
 		port: 3000,
 	},