Start ALPHA - Breaking Changes #2403

SeanCassiere · 2024-09-23T22:59:29Z

SeanCassiere
Sep 23, 2024
Maintainer

📌 TanStack Start has moved to BETA. Find the updates for Start during the BETA period in this discussion thread - #2863

This is to keep track of any and all BREAKING CHANGES that are made during the Start ALPHA period so that our testers have a single location to find out what's changed between versions.

Upcoming changes

Nothing at the moment.

SeanCassiere · 2024-11-17T10:02:40Z

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.58.7 - Rename `deployment` to `server` in `app.config.ts`

The key deployment used in defineConfig has now been renamed to server.

// app.config.ts
import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
- deployment: {
+ server: {
    preset: 'vercel',
  },
})

0 replies

SeanCassiere · 2024-11-17T10:02:53Z

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.68.0 - `plugins` is not a function anymore

but the whole vite property can be a function!

 export default defineConfig({
   vite: {
-    plugins: () => [
+    plugins: [
       tsConfigPaths({
         projects: ['./tsconfig.json'],
       }),

0 replies

SeanCassiere · 2024-11-17T10:03:02Z

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.81.6 - Rewrite the interface of `createServerFn`

The createServerFn function, uses a new interface that supports middleware. Read more about this in the documentation.

import { createServerFn, json } from '@tanstack/start'

- const getGreeting = createServerFn(
-   'GET',
-   async ({ message }: { message: string }) => {
-     await doSomething();
-     return json({ message })
-   }
- )
+ const getGreeting = createServerFn({ method: 'GET' })
+   .validator((input: string) => input)
+   .handler(async ({ data }) => {
+    await doSomething();
+    return json({ message: data })
+ })

0 replies

SeanCassiere · 2024-11-17T10:03:13Z

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.81.6 - Removed components for `Html`, `Head`, and `Body`

You no longer import the Html, Head, and Body components from @tanstack/start to be rendered on the root route. Instead you use the native elements that are interpreted by react-dom.

import { Outlet, createRootRoute } from '@tanstack/react-router'
import {
- Html,
- Head,
- Body,
Meta,
Scripts
} from '@tanstack/start'

export const Route = createRootRoute({
	component: RootComponent
})

function RootComponent() {
  return (
-    <Html>
+    <html>
-      <Head>
+      <head>
          <Meta />
-      </Head>
+      </head>
-      <Body>
+      <body>
          <Outlet />
          <Scripts />
-      </Body>
+      </body>
-    </Html>
+    </html>
  )
}

Also, your app/client.tsx has to be updated to:

/// <reference types="vinxi/types/client" />
import { hydrateRoot } from 'react-dom/client'
import { StartClient } from '@tanstack/start'
import { createRouter } from './router'

const router = createRouter()

- hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)
+ hydrateRoot(document, <StartClient router={router} />)

0 replies

SeanCassiere · 2024-11-17T23:31:46Z

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.82.0 - Unify `meta`, `scripts`, and `links` under the `head` method

A Route configuration can accept a new method named head which returns an object keyed to accept meta, links, and scripts. These returned properties are the same as what was previously returned by the individual methods.

The individual methods for meta, links, and scripts are being dropped in favour of this head method.

// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
-	meta: ({ loaderData }) => [],
-	links: () => [],
-	scripts: () => [],
+	head: ({ loaderData }) => {
+		const data = loaderData // type -> LoaderData | undefined
+		return {
+			meta: [],
+			links: [],
+			scripts: [],
+		}
+	} 
})

0 replies

SeanCassiere · 2024-11-26T03:12:36Z

SeanCassiere
Nov 26, 2024
Maintainer Author

📢 With the move to BETA, we'll be tracking any changes to TanStack Start during this period in this new discussion thread - #2863

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Start ALPHA - Breaking Changes #2403

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Start ALPHA - Breaking Changes #2403

SeanCassiere Sep 23, 2024 Maintainer

Upcoming changes

Replies: 6 comments

SeanCassiere Nov 17, 2024 Maintainer Author

v1.58.7 - Rename deployment to server in app.config.ts

SeanCassiere Nov 17, 2024 Maintainer Author

v1.68.0 - plugins is not a function anymore

SeanCassiere Nov 17, 2024 Maintainer Author

v1.81.6 - Rewrite the interface of createServerFn

SeanCassiere Nov 17, 2024 Maintainer Author

v1.81.6 - Removed components for Html, Head, and Body

SeanCassiere Nov 17, 2024 Maintainer Author

v1.82.0 - Unify meta, scripts, and links under the head method

SeanCassiere Nov 26, 2024 Maintainer Author

SeanCassiere
Sep 23, 2024
Maintainer

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.58.7 - Rename `deployment` to `server` in `app.config.ts`

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.68.0 - `plugins` is not a function anymore

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.81.6 - Rewrite the interface of `createServerFn`

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.81.6 - Removed components for `Html`, `Head`, and `Body`

SeanCassiere
Nov 17, 2024
Maintainer Author

v1.82.0 - Unify `meta`, `scripts`, and `links` under the `head` method

SeanCassiere
Nov 26, 2024
Maintainer Author