Repository: TanStack/router
Pull request #2097 (2024-08-07 07:25:26)

fix(react-router): set a default `transformer` during router instantiation
This affected anyone trying to use the `basic-ssr-file-based` example as a starting point.

nx-cloud[bot]: # ☁️ Nx Cloud Report

CI is running for commit 1d41f02bda5f33259e00572175928ccc8029bcc4.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/66b3217a3457bb4018c4010c?utm_source=pull-request&utm_medium=comment)


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
pkg-pr-new[bot]: 
_commit: <a href="https://github.com/TanStack/router/runs/28446477840"><code>3caa6f8</code></a>_


<details><summary><b>@tanstack/history</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/history@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/react-cross-context</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router-with-query</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/router-cli</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-cli@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/router-devtools</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-devtools@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/router-generator</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-generator@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/router-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-plugin@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/router-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/start</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start@2097
```

</p></details>
      
    

<details><summary><b>@tanstack/start-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2097
```

</p></details>
      
    

[Open in Stackblitz](https://pkg.pr.new/template/4430b66a-1eb9-4528-b83d-06e9c0fceb5d)
<details><summary><b>More templates</b></summary><p>

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/857d1e32-f665-4567-90e2-a85d55651d47)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/6c006a9e-e886-4696-b80c-8cbef7664c37)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/12a7911b-f748-4df0-a6fa-07164d9fe1fd)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/8390c73c-26db-4d89-8f97-cd89198ed7b8)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/7742c8cd-5def-4152-b437-2104c8706a72)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/43f73504-c3a6-4e79-a917-aff157aff1f7)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/c409fb95-4170-45e4-99f4-72cfe0912f47)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/072726b1-2109-489c-9c2e-f93eca7a9275)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/307011dc-6c86-4530-adc8-e2f6a3a9062b)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/90b4c74b-f4bc-450c-8340-2907c2e2107d)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/05488250-6f82-4e8e-9f23-e07894d5ce6d)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/a6549272-7e14-4584-b348-88c2d8ea9739)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/e859e036-d968-4b8c-bbc2-d81a436be07a)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/d354e15c-dccd-4b1a-94b4-9fcbbd1b99be)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/8946648f-e69b-4c16-92c3-890f18ada018)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/cfc63812-9400-4822-8683-965d1929fa81)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/8b3af61a-8ccb-4d34-b40a-9aaad979ebdd)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/e34b2316-5561-46b0-a00f-c2ac258dd7d4)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/899dd1f6-c958-4f91-8630-bb8c13182316)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/9e5f32d5-05b7-4bcb-9367-1417e0ecde7b)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/92c54c56-4d1c-4339-ac55-d6d06dc6ab95)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/6012fac0-bcab-4216-91d1-de4f18375204)
- [tanstack-router-example-react-start-basic](https://pkg.pr.new/template/1295dc61-52b8-4000-969c-7d25107d9c1a)
- [tanstack-router-example-react-start-basic-counter](https://pkg.pr.new/template/b78ab2ca-7198-4747-b1c3-3a1c9d353a71)
- [tanstack-router-example-react-start-basic-react-query](https://pkg.pr.new/template/b6a89704-1f62-4856-93a6-13415c7f7845)
- [tanstack-router-example-react-start-basic-rsc](https://pkg.pr.new/template/286d65a2-2bc8-4137-a261-dbd60dceece5)
- [tanstack-router-example-react-start-trello-trellaux](https://pkg.pr.new/template/e67f521f-7ff3-4133-8e6d-6d138874cae1)
- [tanstack-router-example-react-start-basic-trellaux](https://pkg.pr.new/template/c9c93af3-a787-4b8f-914c-1f432e97ea77)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/8312ce25-4631-4b30-b176-f0fcb53986e3)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/6082b2ab-fa38-4b20-a319-6dbdbed1b0ff)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/ac36c04e-4148-4b05-9d3a-15c70d9bad37)

</p></details>
      
    


Patch:
diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
index 591c9b5a2..44af4400d 100644
--- a/packages/react-router/src/router.ts
+++ b/packages/react-router/src/router.ts
@@ -638,6 +638,10 @@ export class Router<
       ...options,
       stringifySearch: options.stringifySearch ?? defaultStringifySearch,
       parseSearch: options.parseSearch ?? defaultParseSearch,
+      transformer: options.transformer ?? {
+        parse: JSON.parse,
+        stringify: JSON.stringify,
+      },
     })
 
     if (typeof document !== 'undefined') {


Test patch:
diff --git a/packages/react-router/tests/router.test.tsx b/packages/react-router/tests/router.test.tsx
index cef0b5d68..cb6ef0e6a 100644
--- a/packages/react-router/tests/router.test.tsx
+++ b/packages/react-router/tests/router.test.tsx
@@ -482,3 +482,14 @@ describe('router rendering stability', () => {
     expect(callerMock).toBeCalledTimes(1)
   })
 })
+
+describe('transformer functions are defined', () => {
+  it('should have default transformer functions', () => {
+    const rootRoute = createRootRoute({})
+    const routeTree = rootRoute.addChildren([])
+    const router = createRouter({ routeTree })
+
+    expect(router.options.transformer.parse).toBeInstanceOf(Function)
+    expect(router.options.transformer.stringify).toBeInstanceOf(Function)
+  })
+})