@wasp.sh/wasp-cli-darwin-arm64-unknown 0.24.0 → 0.25.0

package/data/Cli/starters/basic/main.wasp.ts

@@ -11,8 +11,8 @@ import { tasksSpec } from "./src/tasks/task.wasp";
 
 export default app({
   name: "__waspAppName__",
-  title: "__waspProjectName__",
   wasp: { version: "__waspVersion__" },
+  title: "__waspProjectName__",
   head: ["<link rel='icon' href='/favicon.ico' />"],
   auth: {
     userEntity: "User",

package/data/Cli/starters/basic/package.json

@@ -9,7 +9,7 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-hook-form": "^7.69.0",
-    "react-router": "^7.12.0",
+    "react-router": "^8.0.1",
     "tailwind-merge": "~3.4.0",
     "tailwindcss": "^4.1.18"
   },
@@ -18,7 +18,7 @@
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.3.1",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-react": "^7.37.5",
@@ -26,10 +26,10 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "prisma": "5.19.1",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "typescript-eslint": "^8.32.1",
-    "vite": "^7.0.6",
-    "vitest": "^4.0.16",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
     "@wasp.sh/spec": "__waspSpecPackageSpecifier__"
   }
 }

package/data/Cli/starters/basic/src/App.css

@@ -5,17 +5,18 @@
   --text-tiny--line-height: 1rem;
 
   /* Created using https://www.tints.dev */
-  --color-primary-50: #fffbeb;
-  --color-primary-100: #fff7d6;
-  --color-primary-200: #ffefad;
-  --color-primary-300: #ffe680;
-  --color-primary-400: #ffda47;
-  --color-primary-500: #ffcc00;
-  --color-primary-600: #e6b800;
-  --color-primary-700: #cca300;
-  --color-primary-800: #a88700;
-  --color-primary-900: #7a6200;
-  --color-primary-950: #574500;
+  /* Defaults settings, #f5c842 locked at 500 */
+  --color-primary-50: #fef9ef;
+  --color-primary-100: #fef2df;
+  --color-primary-200: #fde9c3;
+  --color-primary-300: #fcdc97;
+  --color-primary-400: #fcd26a;
+  --color-primary-500: #f5c842;
+  --color-primary-600: #c09c32;
+  --color-primary-700: #8c7122;
+  --color-primary-800: #5e4b13;
+  --color-primary-900: #322706;
+  --color-primary-950: #1e1703;
 }
 
 body {

package/data/Cli/starters/basic/src/assets/wasp-logo-rounded.svg

@@ -0,0 +1 @@
+<svg width="1520" height="1520" version="1.1" viewBox="0 0 1520 1520" xmlns="http://www.w3.org/2000/svg"><g><rect width="1520" height="1520" rx="300" fill="#f5c842"/><g fill="#111"><path d="m1007 300-156.98 2e-3 0.499 142.51h85.857c0.0239 2e-3 18.763 1.566 30.461 7.9108 13.537 7.3425 14.626 10.763 21.704 20.417 3.0674 4.1835 4.9651 10.687 6.0494 16.123 1.0827 5.4284 1.3754 9.7642 1.3762 9.7762v144.33l2e-3 0.0252s0.583 7.1093 1.796 15.918c1.213 8.809 3.0448 19.305 5.6079 26.205 4.3676 11.759 13.62 26.659 21.633 36.363 9.3866 11.367 22.228 20.124 34.969 27.568 11.294 6.5984 32.628 11.542 33.548 11.754v2.1847c-0.9202 0.21233-22.254 5.1555-33.548 11.754-12.741 7.4439-25.583 16.201-34.97 27.568-8.0134 9.7041-17.266 24.604-21.633 36.363-2.5631 6.9007-4.3948 17.396-5.6078 26.205-1.213 8.809-1.796 15.918-1.796 15.918l-2e-3 0.0271v144.33c-8.2e-4 0.012-0.29348 4.3478-1.3762 9.7762-1.0842 5.4359-2.982 11.94-6.0494 16.123-7.0789 9.6547-8.1671 13.075-21.704 20.418-11.698 6.3448-30.437 7.9107-30.461 7.9107h-85.857l-0.499 142.51h156.99s7.5461-0.1872 16.483-0.629c8.9371-0.4418 19.238-1.1296 24.889-2.1653 7.1809-1.3165 20.102-3.1616 33.53-9.0719 13.329-5.8668 16.299-7.3647 22.443-10.939 11.758-6.8408 24.169-19.146 34.441-32.311s18.389-27.167 21.463-37.524c6.1235-20.632 6.382-47.126 6.382-47.126v-195.36c0-0.0207 0.145-2.5801 0.505-5.7396 0.3614-3.1722 0.956-6.9416 1.7742-9.1512 0.9504-2.5664 2.8911-7.2999 5.3504-11.905 2.4592-4.6049 5.481-9.0841 8.3701-11.115 5.643-3.9674 12.809-9.5822 20.29-10.61 5.9133-0.81252 13.182-1.4397 13.202-1.4417h53.892v-149.83h-53.892c-0.019-2e-3 -7.2884-0.62915-13.202-1.4417-7.4814-1.028-14.648-6.6429-20.29-10.61-2.8891-2.0312-5.9109-6.5104-8.3701-11.115-2.4593-4.6049-4.4-9.3384-5.3504-11.905-0.8182-2.2095-1.4128-5.9789-1.7742-9.1512-0.36-3.1595-0.5038-5.7188-0.505-5.7396v-195.36s-0.2585-26.494-6.382-47.126c-3.0739-10.357-11.191-24.359-21.463-37.524s-22.683-25.47-34.441-32.311c-6.1438-3.5745-9.1141-5.0723-22.443-10.939-13.427-5.9102-26.349-7.7554-33.53-9.0718-5.6503-1.0358-15.952-1.7236-24.889-2.1654-8.9366-0.4418-16.483-0.62892-16.483-0.62892z" stop-color="#000000"/><rect x="250" y="830" width="500" height="160" stroke-width="1.3472"/><rect x="250" y="530" width="500" height="160" stroke-width="1.3472"/></g></g></svg>

package/data/Cli/starters/basic/src/shared/components/Header.tsx

@@ -1,6 +1,6 @@
 import { logout, useAuth } from "wasp/client/auth";
 import { Link } from "wasp/client/router";
-import Logo from "../../assets/logo.svg";
+import Logo from "../../assets/wasp-logo-rounded.svg";
 import { Button, ButtonLink } from "./Button";
 
 export function Header() {
@@ -10,8 +10,8 @@ export function Header() {
     <header className="sticky top-0 z-10 flex justify-center border-b border-neutral-200 bg-white shadow-sm">
       <div className="flex w-full max-w-(--breakpoint-lg) items-center justify-between p-4 px-12">
         <Link to="/" className="flex items-center gap-2">
-          <img src={Logo} alt="Todo App Logo" className="h-10 w-10" />
-          <h1 className="text-2xl font-semibold">Todo App</h1>
+          <img src={Logo} alt="Wasp logo" className="h-10 w-10" />
+          <h1 className="text-2xl font-semibold">ToDo App</h1>
         </Link>
         <nav>
           <ul className="flex gap-4 font-semibold">

package/data/Cli/starters/minimal/main.wasp.ts

@@ -3,8 +3,8 @@ import { MainPage } from "./src/MainPage" with { type: "ref" };
 
 export default app({
   name: "__waspAppName__",
-  title: "__waspProjectName__",
   wasp: { version: "__waspVersion__" },
+  title: "__waspProjectName__",
   head: ["<link rel='icon' href='/favicon.ico' />"],
   spec: [
     route("RootRoute", "/", page(MainPage)),

package/data/Cli/starters/minimal/package.json

@@ -5,16 +5,16 @@
   "dependencies": {
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "react-router": "^7.12.0"
+    "react-router": "^8.0.1"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "prisma": "5.19.1",
-    "typescript": "5.9.3",
-    "vite": "^7.0.6",
-    "vitest": "^4.0.16",
+    "typescript": "6.0.3",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
     "@wasp.sh/spec": "__waspSpecPackageSpecifier__"
   }
 }

package/data/Cli/starters/minimal/src/Main.css

@@ -64,8 +64,8 @@ body {
 
 .button-filled {
   color: black;
-  background-color: #ffcc00;
-  border: 2px solid #ffcc00;
+  background-color: #f5c842;
+  border: 2px solid #f5c842;
 
   transition: all 0.2s ease-in-out;
 }
@@ -77,7 +77,7 @@ body {
 .button-outlined {
   color: black;
   background-color: transparent;
-  border: 2px solid #ffcc00;
+  border: 2px solid #f5c842;
 
   transition: all 0.2s ease-in-out;
 }
@@ -88,9 +88,9 @@ body {
 
 code {
   border-radius: 5px;
-  border: 1px solid #ffcc00;
+  border: 1px solid #f5c842;
   padding: 0.2rem;
-  background: #ffcc0044;
+  background: #f5c84244;
   font-family:
     Menlo,
     Monaco,

package/data/Cli/starters/minimal/src/MainPage.tsx

@@ -1,10 +1,10 @@
-import Logo from "./assets/logo.svg";
+import Logo from "./assets/wasp-logo-rounded.svg";
 import "./Main.css";
 
 export function MainPage() {
   return (
     <main className="container">
-      <img className="logo" src={Logo} alt="wasp" />
+      <img className="logo" src={Logo} alt="Wasp logo" />
 
       <h2 className="title">Welcome to Wasp!</h2>
 

package/data/Cli/starters/minimal/src/assets/wasp-logo-rounded.svg

@@ -0,0 +1 @@
+<svg width="1520" height="1520" version="1.1" viewBox="0 0 1520 1520" xmlns="http://www.w3.org/2000/svg"><g><rect width="1520" height="1520" rx="300" fill="#f5c842"/><g fill="#111"><path d="m1007 300-156.98 2e-3 0.499 142.51h85.857c0.0239 2e-3 18.763 1.566 30.461 7.9108 13.537 7.3425 14.626 10.763 21.704 20.417 3.0674 4.1835 4.9651 10.687 6.0494 16.123 1.0827 5.4284 1.3754 9.7642 1.3762 9.7762v144.33l2e-3 0.0252s0.583 7.1093 1.796 15.918c1.213 8.809 3.0448 19.305 5.6079 26.205 4.3676 11.759 13.62 26.659 21.633 36.363 9.3866 11.367 22.228 20.124 34.969 27.568 11.294 6.5984 32.628 11.542 33.548 11.754v2.1847c-0.9202 0.21233-22.254 5.1555-33.548 11.754-12.741 7.4439-25.583 16.201-34.97 27.568-8.0134 9.7041-17.266 24.604-21.633 36.363-2.5631 6.9007-4.3948 17.396-5.6078 26.205-1.213 8.809-1.796 15.918-1.796 15.918l-2e-3 0.0271v144.33c-8.2e-4 0.012-0.29348 4.3478-1.3762 9.7762-1.0842 5.4359-2.982 11.94-6.0494 16.123-7.0789 9.6547-8.1671 13.075-21.704 20.418-11.698 6.3448-30.437 7.9107-30.461 7.9107h-85.857l-0.499 142.51h156.99s7.5461-0.1872 16.483-0.629c8.9371-0.4418 19.238-1.1296 24.889-2.1653 7.1809-1.3165 20.102-3.1616 33.53-9.0719 13.329-5.8668 16.299-7.3647 22.443-10.939 11.758-6.8408 24.169-19.146 34.441-32.311s18.389-27.167 21.463-37.524c6.1235-20.632 6.382-47.126 6.382-47.126v-195.36c0-0.0207 0.145-2.5801 0.505-5.7396 0.3614-3.1722 0.956-6.9416 1.7742-9.1512 0.9504-2.5664 2.8911-7.2999 5.3504-11.905 2.4592-4.6049 5.481-9.0841 8.3701-11.115 5.643-3.9674 12.809-9.5822 20.29-10.61 5.9133-0.81252 13.182-1.4397 13.202-1.4417h53.892v-149.83h-53.892c-0.019-2e-3 -7.2884-0.62915-13.202-1.4417-7.4814-1.028-14.648-6.6429-20.29-10.61-2.8891-2.0312-5.9109-6.5104-8.3701-11.115-2.4593-4.6049-4.4-9.3384-5.3504-11.905-0.8182-2.2095-1.4128-5.9789-1.7742-9.1512-0.36-3.1595-0.5038-5.7188-0.505-5.7396v-195.36s-0.2585-26.494-6.382-47.126c-3.0739-10.357-11.191-24.359-21.463-37.524s-22.683-25.47-34.441-32.311c-6.1438-3.5745-9.1141-5.0723-22.443-10.939-13.427-5.9102-26.349-7.7554-33.53-9.0718-5.6503-1.0358-15.952-1.7236-24.889-2.1654-8.9366-0.4418-16.483-0.62892-16.483-0.62892z" stop-color="#000000"/><rect x="250" y="830" width="500" height="160" stroke-width="1.3472"/><rect x="250" y="530" width="500" height="160" stroke-width="1.3472"/></g></g></svg>

package/data/Cli/starters/skeleton/tsconfig.src.json

@@ -22,7 +22,8 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
     "allowJs": true,
-    "outDir": ".wasp/out/user"
+    "outDir": ".wasp/out/user",
+    "types": ["react", "node"]
   },
   "include": ["src"],
   "exclude": ["**/*.wasp.ts"]

package/data/Cli/starters/skeleton/tsconfig.wasp.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "skipLibCheck": true,
-    "target": "ES2022",
+    "target": "ES2025",
     "isolatedModules": true,
     "moduleDetection": "force",
     "strict": true,
@@ -12,7 +12,8 @@
     "jsx": "preserve",
     "allowJs": true,
     "noEmit": true,
-    "lib": ["ES2023"]
+    "lib": ["ES2025"],
+    "types": ["node"]
   },
   "include": ["**/*.wasp.ts", ".wasp/out/types/spec"]
 }

package/data/Generator/templates/sdk/wasp/api/index.ts

@@ -1,6 +1,6 @@
 import ky, { isHTTPError } from 'ky'
-import { config } from 'wasp/client'
-import { storage } from 'wasp/core/storage'
+import { config } from '../client/index.js'
+import { storage } from '../core/storage.js'
 import { apiEventsEmitter } from './events.js'
 
 const WASP_APP_AUTH_SESSION_ID_NAME = 'sessionId'

package/data/Generator/templates/sdk/wasp/auth/email/actions/login.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api';
+import { api, handleApiError } from '../../../api/index.js';
 import { initSession } from '../../helpers/user';
 import { SessionResponseSchema } from '../../responseSchemas';
 

package/data/Generator/templates/sdk/wasp/auth/email/actions/passwordReset.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api';
+import { api, handleApiError } from '../../../api/index.js';
 import { SuccessResponseSchema } from '../../responseSchemas';
 
 // PUBLIC API

package/data/Generator/templates/sdk/wasp/auth/email/actions/signup.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api';
+import { api, handleApiError } from '../../../api/index.js';
 import { SuccessResponseSchema } from '../../responseSchemas';
 {=# emailUserSignupFields.isDefined =}
 import { type UserEmailSignupFields } from '../../providers'

package/data/Generator/templates/sdk/wasp/auth/email/actions/verifyEmail.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api'
+import { api, handleApiError } from '../../../api/index.js'
 import { SuccessResponseSchema } from '../../responseSchemas'
 
 // PUBLIC API

package/data/Generator/templates/sdk/wasp/auth/forms/internal/auth-styles.css

@@ -6,7 +6,7 @@
   */
 
   /* Colors */
-  --color-waspYellow: #ffcc00;
+  --color-waspYellow: #f5c842;
   --color-gray700: #a1a5ab;
   --color-gray600: #d1d5db;
   --color-gray500: gainsboro;
@@ -17,7 +17,7 @@
 
   /* Semantic colors */
   --color-brand: var(--color-waspYellow);
-  --color-brandAccent: #ffdb46;
+  --color-brandAccent: #fccf49;
   --color-errorBackground: var(--color-red);
   --color-errorText: #2D3748;
   --color-successBackground: var(--color-green);

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -2,7 +2,7 @@
 import { useForm, UseFormReturn } from 'react-hook-form'
 import styles from './LoginSignupForm.module.css'
 import '../auth-styles.css'
-import { config } from 'wasp/client'
+import { config } from '../../../../client/index.js'
 import { clsx } from '../util'
 
 import { useAuthContext } from '@wasp.sh/lib-auth/browser'

package/data/Generator/templates/sdk/wasp/auth/helpers/_Provider.tsx

@@ -1,6 +1,6 @@
 {{={= =}=}}
 
-import { config } from 'wasp/client'
+import { config } from '../../client/index.js'
 import { SocialButton } from '../forms/internal/social/SocialButton'
 import * as SocialIcons from '../forms/internal/social/SocialIcons'
 

package/data/Generator/templates/sdk/wasp/auth/helpers/user.ts

@@ -1,4 +1,4 @@
-import { setSessionId } from 'wasp/client/api'
+import { setSessionId } from '../../api/index.js'
 import { invalidateAndRemoveQueries } from '../../client/operations/internal/resources.js'
 
 // PRIVATE API

package/data/Generator/templates/sdk/wasp/auth/jwt.ts

@@ -1,6 +1,6 @@
 import { createJWTHelpers } from "@wasp.sh/lib-auth/node";
 
-import { config } from "wasp/server";
+import { config } from "../server/index.js";
 
 const JWT_SECRET = new TextEncoder().encode(config.auth.jwtSecret);
 const JWT_ALGORITHM = "HS256";

package/data/Generator/templates/sdk/wasp/auth/logout.ts

@@ -1,4 +1,4 @@
-import { api, removeLocalUserData } from 'wasp/client/api'
+import { api, removeLocalUserData } from '../api/index.js'
 import { invalidateAndRemoveQueries } from '../client/operations/internal/resources.js'
 
 // PUBLIC API

package/data/Generator/templates/sdk/wasp/auth/lucia.ts

@@ -1,8 +1,8 @@
 {{={= =}=}}
 import { Lucia } from "lucia";
 import { PrismaAdapter } from "@lucia-auth/adapter-prisma";
-import { prisma } from 'wasp/server'
-import { type {= userEntityUpper =} } from "wasp/entities"
+import { prisma } from '../server/index.js'
+import { type {= userEntityUpper =} } from "../entities/index.js"
 
 const prismaAdapter = new PrismaAdapter(
   prisma.{= sessionEntityLower =},

package/data/Generator/templates/sdk/wasp/auth/providers/types.ts

@@ -1,7 +1,7 @@
 {{={= =}=}}
 import type { Router, Request } from 'express'
 import type { Prisma } from '@prisma/client'
-import type { Expand, Exact } from 'wasp/universal/types'
+import type { Expand, Exact } from '../../universal/types.js'
 import type { ProviderName } from '../utils'
 
 // PUBLIC API

package/data/Generator/templates/sdk/wasp/auth/session.ts

@@ -8,7 +8,7 @@ import { auth } from "./lucia.js";
 import type { Session } from "lucia";
 import { createInvalidCredentialsError } from "./utils.js";
 
-import { prisma } from 'wasp/server';
+import { prisma } from '../server/index.js';
 import { createAuthUserData } from "../server/auth/user.js";
 
 // PRIVATE API

package/data/Generator/templates/sdk/wasp/auth/types.ts

@@ -1,2 +1,2 @@
 // todo(filip): turn into a proper import/path
-export type { ProviderName } from 'wasp/server/_types' 
+export type { ProviderName } from './utils.js'

package/data/Generator/templates/sdk/wasp/auth/useAuth.ts

@@ -1,9 +1,9 @@
 {{={= =}=}}
-import { deserialize } from 'wasp/core/serialization'
-import { useQuery, buildAndRegisterQuery } from 'wasp/client/operations'
-import type { QueryFunction, Query  } from 'wasp/client/operations/rpc'
-import { api, handleApiError } from 'wasp/client/api'
-import { HttpMethod } from 'wasp/client'
+import { deserialize } from '../core/serialization/index.js'
+import { useQuery, buildAndRegisterQuery } from '../client/operations/index.js'
+import type { QueryFunction, Query  } from '../client/operations/rpc.js'
+import { api, handleApiError } from '../api/index.js'
+import { HttpMethod } from '../client/index.js'
 import type { AuthUser, AuthUserData } from '../server/auth/user.js'
 import { makeAuthUserIfPossible } from '../auth/user.js'
 import { UseQueryResult } from '@tanstack/react-query'

package/data/Generator/templates/sdk/wasp/auth/username/actions/login.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api'
+import { api, handleApiError } from '../../../api/index.js'
 import { initSession } from '../../helpers/user'
 import { SessionResponseSchema } from '../../responseSchemas'
 

package/data/Generator/templates/sdk/wasp/auth/username/actions/signup.ts

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import { api, handleApiError } from 'wasp/client/api'
+import { api, handleApiError } from '../../../api/index.js'
 {=# usernameAndPasswordUserSignupFields.isDefined =}
 import { type UserUsernameAndPasswordSignupFields } from '../../providers'
 {=/ usernameAndPasswordUserSignupFields.isDefined =}

package/data/Generator/templates/sdk/wasp/auth/utils.ts

@@ -1,12 +1,12 @@
 {{={= =}=}}
 import { hashPassword } from './password.js'
-import { prisma, HttpError } from 'wasp/server'
-import { sleep } from 'wasp/server/utils'
+import { prisma, HttpError } from '../server/index.js'
+import { sleep } from '../server/utils.js'
 import {
   type {= userEntityUpper =},
   type {= authEntityUpper =},
   type {= authIdentityEntityUpper =},
-} from 'wasp/entities'
+} from '../entities/index.js'
 import { Prisma } from '@prisma/client';
 
 import { throwValidationError } from './validation.js'

package/data/Generator/templates/sdk/wasp/auth/validation.ts

@@ -1,4 +1,4 @@
-import { HttpError } from 'wasp/server';
+import { HttpError } from '../server/index.js';
 
 export const PASSWORD_FIELD = 'password';
 const USERNAME_FIELD = 'username';

package/data/Generator/templates/sdk/wasp/client/app/layout.tsx

@@ -1,6 +1,5 @@
 {{={= =}=}}
-import { StrictMode, type ReactNode } from "react";
-import { useIsClient } from "./hooks/useIsClient.js"
+import { StrictMode, type ReactNode, useSyncExternalStore } from "react";
 
 export function Layout({
   children,
@@ -11,31 +10,7 @@ export function Layout({
   isFallbackPage?: boolean;
   clientEntrySrc?: string;
 }) {
-  const isClient = useIsClient()
-
-  /*
-    From the Vite SSR plugin, we inherit the concept of a "prerendered page" vs.
-    a "fallback page".
-    - A prerendered page is a page that is rendered on the server, and then
-      hydrated on the client.
-    - A fallback page is a page which only prerenders the common HTML structure
-      on the server, and then renders the actual page content on the client.
-
-    To use an analogy, a fallback page is a pluripotent stem cell that can turn
-    into any page in the client; while a prerendered page is already specialized
-    and can only render its specific content.
-
-    So, if we are prerendering a fallback page, we want to avoid rendering the
-    actual page content, so that it can turn into anything. If we're
-    prerendering a non-fallback page, we'll give it its content.
-
-    But, if we're already in the client, we always want to render the page
-    content. Whether prerendered as a fallback or not, now it's showtime, so we
-    must show the user the content.
-
-    Thus, we end up with the line below:
-  */
-  const shouldRenderChildren = isClient || !isFallbackPage
+  const shouldRenderAppContent = useShouldRenderAppContent(isFallbackPage);
 
   return (
     <StrictMode>
@@ -52,34 +27,68 @@ export function Layout({
           <title>{= title =}</title>
 
           {
-            // We pass that argument in SSR builds and not in client builds.
-            // This would usually cause a hydration mismatch, but React has an
-            // exception for `<script>` tags, for this specific usecase, so it
-            // will work fine.
+            /*
+              This script tag's job is to load the client entry so the browser
+              downloads and runs it, hydrating the prerendered HTML.
+
+              We only need it in SSR builds, as by the time the client is
+              running this code, it doesn't need to run itself again (and could
+              lead to duplication).
+
+              Rendering it only on the server and not on the client would
+              normally cause a hydration mismatch, but React skips erroring on
+              server-only nodes if they are **direct children** of `<head>` and
+              `<body>`, to support this kind of usecase. (See
+              https://react.dev/reference/react-dom/static/prerenderToNodeStream)
+
+              We'd usually inject this via React prerender's `bootstrapModules`
+              option, but that has two problems:
+                1. React also emits a `<link rel="modulepreload"
+                   href="@/wasp/client">` for the bootstrap scripts, but Vite
+                   doesn't rewrite `link.href`s, so it would end up as a broken
+                   link.
+                2. It hardcodes `async` on the script, which in dev races the
+                   `@vitejs/plugin-react` refresh preamble (see #4258).
+            */
             clientEntrySrc ? (
-              // We'd usually use React prerender's `bootstrapModules` options for
-              // injecting this script, but it would also add a `<link
-              // rel="modulepreload">` tag that Vite doesn't handle correctly. So
-              // we just add the script ourselves in the regular way.
-              //
-              // https://react.dev/reference/react-dom/static/prerenderToNodeStream
               <script type="module" src={clientEntrySrc} />
             ) : null
           }
         </head>
         <body>
           <noscript>You need to enable JavaScript to run this app.</noscript>
-
-          {
-            // We don't really need to wrap the app in a div nor name it "root",
-            // but we keep it for backwards compatibility with older Wasp
-            // versions.
-          }
-          <div id="root">
-              {shouldRenderChildren ? children : null}
-          </div>
+          {shouldRenderAppContent ? children : null}
         </body>
       </html>
     </StrictMode>
   );
 }
+
+function useShouldRenderAppContent(isFallbackPage: boolean) {
+  // We always want to render the content on the client.
+  const getOnClient = () => true;
+
+  // On the server, we only want to render the content if it's not a fallback page.
+  const getOnServer = () => !isFallbackPage;
+
+  const shouldRenderAppContent =
+    // We use `useSyncExternalStore` because it allows us to have different
+    // values on the server and client without hydration errors. The semantics
+    // also match, as in this case the fallback status is the synchronous state
+    // we are reading from, it just never changes after being first initialized.
+    useSyncExternalStore(
+      emptySubscribe,
+      getOnClient,
+      getOnServer,
+    );
+
+  return shouldRenderAppContent;
+}
+
+// The subscribe function is expected to only change when the store changes.
+// Because our "store" is static, we make our function never change by putting
+// it on the top.
+function emptySubscribe() {
+  const emptyUnsubscribe = () => {};
+  return emptyUnsubscribe;
+}

package/data/Generator/templates/sdk/wasp/client/app/router.tsx

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import type { ReactNode, ComponentType } from 'react'
+import type { ReactNode } from 'react'
 import type { RouteObject } from 'react-router'
 
 {=# isExternalAuthEnabled =}
@@ -10,10 +10,7 @@ import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
 
 import { routes } from '../router/index'
 
-type RouteMapping = Record<
-  string,
-  { Component: ComponentType }
->;
+type RouteMapping = Record<string, RouteObject>;
 
 export function getRouteObjects({
   routesMapping,

package/data/Generator/templates/sdk/wasp/client/crud/_crud.ts

@@ -2,7 +2,7 @@
 import { createAction } from "../operations/actions/core.js";
 import { createQuery } from "../operations/queries/core.js";
 import { makeUseActionFor, makeUseQueryFor } from "./operationsHelpers.js";
-import { 
+import type {
     {=# operations.Get =}
     GetQueryResolved,
     {=/ operations.Get =}
@@ -18,7 +18,7 @@ import {
     {=# operations.Delete =}
     DeleteActionResolved,
     {=/ operations.Delete =}
-} from 'wasp/server/crud/{= name =}'
+} from '../../server/crud/{= name =}.js'
 
 function createCrud() {
     {=# operations.Get =}

package/data/Generator/templates/sdk/wasp/client/operations/actions/core.ts

@@ -1,4 +1,4 @@
-import type { _Awaited, _ReturnType } from 'wasp/universal/types'
+import type { _Awaited, _ReturnType } from '../../../universal/types.js'
 import type { OperationRpcFor, GenericBackendOperation } from '../rpc.js'
 import { callOperation, makeOperationRoute } from '../internal/index.js'
 import {

package/data/Generator/templates/sdk/wasp/client/operations/index.ts

@@ -20,3 +20,8 @@ export {
     // PRIVATE API (framework code)
     queryClientInitialized
 } from './queryClient'
+
+export {
+    // PUBLIC API
+    type QueryMetadata,
+} from './rpc'

package/data/Generator/templates/sdk/wasp/client/operations/internal/index.ts

@@ -1,6 +1,6 @@
-import { api, handleApiError } from 'wasp/client/api'
-import { HttpMethod } from 'wasp/client'
-import { serialize, deserialize } from 'wasp/core/serialization'
+import { api, handleApiError } from '../../../api/index.js'
+import { HttpMethod } from '../../index.js'
+import { serialize, deserialize } from '../../../core/serialization/index.js'
 
 // PRIVATE API
 export type OperationRoute = { method: HttpMethod.Post, path: string }