Repository: TanStack/router
Pull request #2650 (2024-10-26 22:59:10)

fix(router-plugin): correctly handle VariableDeclarator when splitting

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

CI is running for commit 7bc3a82ae1ac1a90d4fba092fd15c37f863ee4b0.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/671d7455d4ea3c25c46dde4c?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]: 
[Open in Stackblitz](https://pkg.pr.new/template/3a92b272-703f-4838-a079-3d85145ff0ba)
<details><summary><b>More templates</b></summary><p>

- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/71889289-fef6-4272-aec5-479ce67575e9)
- [tanstack-router-react-example-basic](https://pkg.pr.new/template/9ab5d45e-372a-4e67-9a41-8660dca1f5fc)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/6ac49506-b97a-4bff-b1d7-06edc94ef760)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/33976d4e-15e7-4d6a-bab7-5e8114cd18d1)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/a9fa77dd-e3d7-40ff-a3fb-25c468a813e4)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/2e7519f8-90ac-4cd2-af2f-81c16b5abadf)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/9a258f22-9fd1-407d-bb33-f1cd0c8692b8)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/bb4fb403-fe23-4e86-a855-b2a29e5c15e2)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/805c6b44-b0e9-45fc-9f49-02bcf7634c4b)
- [tanstack-router-react-example-basic-virtual-file-based](https://pkg.pr.new/template/f85a6d2d-c16e-4c11-91d9-38fce9fb8ee7)
- [tanstack-router-react-example-basic-virtual-inside-file-based](https://pkg.pr.new/template/8dd5318e-0fd2-42d3-89ee-6ce7c3bc7a2e)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/b71dbea0-8f8c-49dc-90e0-2350332d0310)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/9688c352-6c1c-4889-afe5-63c32d2407ab)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/41cb319b-ef29-4ab4-bda6-9c63e640cb06)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/9ca9ab9b-2723-40e4-b623-2d91f2ca3549)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/18ecc107-d2a2-429a-af4a-b3fa046ada00)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/bca7d246-05f0-430b-80cd-2f7cfbde9350)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/357f3fd4-4ae8-4e05-8279-1dbc7961b416)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/e618affc-4a6e-43ab-b088-26f5e96ffc35)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/b6fafc37-6a76-44f4-8264-f1b2750bac5c)
- [tanstack-router-react-example-quickstart-esbuild-file-based](https://pkg.pr.new/template/c65b0a77-28b2-44b6-82b1-e5977b568672)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/ccb5eaee-d0c0-487f-8212-68b359412a88)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/678ab578-a1d3-4043-b274-a7620fda1142)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/b1ab4dc0-59df-4a3d-88c0-3bb480f6883e)
- [router-monorepo-react-query](https://pkg.pr.new/template/43d8c3c7-3f15-475f-a15f-9c52d15a1ca0)
- [router-mono-simple](https://pkg.pr.new/template/171d754a-6d1a-4f19-8dc3-1752ff76923d)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/dd734a85-0352-4a27-a58f-8c905faa7719)
- [tanstack-router-search-validator-adapters](https://pkg.pr.new/template/ea1a47f3-f35c-46bc-a4b5-fdb52c872f7c)
- [tanstack-start-example-basic](https://pkg.pr.new/template/6f947148-169f-49f5-b59b-98a72b5d21f7)
- [tanstack-start-example-basic-auth](https://pkg.pr.new/template/204625bd-de6d-43af-a6b0-ae03756f2980)
- [tanstack-start-example-basic-react-query](https://pkg.pr.new/template/c1ac9166-4c7e-43df-a9de-7972b66f1291)
- [tanstack-start-example-basic-rsc](https://pkg.pr.new/template/d01ee1e9-3115-4454-972c-a03328ac0c65)
- [tanstack-start-example-clerk-basic](https://pkg.pr.new/template/d0d4d724-4375-45b4-a9bc-914c31d90809)
- [tanstack-start-example-convex-trellaux](https://pkg.pr.new/template/5981b6e5-efff-4adc-bbf1-e308f2e828e4)
- [tanstack-start-example-counter](https://pkg.pr.new/template/5039d67f-7258-41a9-8387-fc09e8026152)
- [tanstack-start-example-supabase-basic](https://pkg.pr.new/template/f07c55db-d1c1-4243-a6b5-210f4878455d)
- [tanstack-start-example-trellaux](https://pkg.pr.new/template/bee6015a-a8fb-4820-95d8-22e68cd293e4)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/7eeaaac6-9acc-47e6-a132-57f74dd5f164)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/1c0c0837-ee91-47c5-a04b-45d19cc2764a)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/124591be-2d9b-4949-8293-575de0710a55)

</p></details>
      
    


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

```
pnpm add https://pkg.pr.new/@tanstack/create-router@2650
```

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

<details><summary><b>@tanstack/router-arktype-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2650
```

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

<details><summary><b>@tanstack/router-valibot-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2650
```

</p></details>
      
    

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

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

</p></details>
      
    

<details><summary><b>@tanstack/router-zod-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2650
```

</p></details>
      
    

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

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

</p></details>
      
    

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

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

</p></details>
      
    

<details><summary><b>@tanstack/virtual-file-routes</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2650
```

</p></details>
      
    

_commit: <a href="https://github.com/TanStack/router/runs/32110818897"><code>7bc3a82</code></a>_


Patch:
diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts
index 96ed3d821..a320a8114 100644
--- a/packages/router-plugin/src/core/code-splitter/compilers.ts
+++ b/packages/router-plugin/src/core/code-splitter/compilers.ts
@@ -406,6 +406,13 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
                   ),
                 ]),
               )
+            } else if (t.isVariableDeclarator(splitNode)) {
+              programPath.pushContainer(
+                'body',
+                t.variableDeclaration('const', [
+                  t.variableDeclarator(t.identifier(splitType), splitNode.init),
+                ]),
+              )
             } else if (t.isCallExpression(splitNode)) {
               const outputSplitNodeCode = generate(splitNode).code
               const splitNodeAst = babel.parse(outputSplitNodeCode)


Test patch:
diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx
new file mode 100644
index 000000000..e0859d59e
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx
@@ -0,0 +1,9 @@
+const $$splitComponentImporter = () => import('tsr-split:arrow-function.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('tsr-split:arrow-function.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/posts')({
+  loader: lazyFn($$splitLoaderImporter, 'loader'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
+});
\ No newline at end of file
diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx
new file mode 100644
index 000000000..1a07e3c31
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx
@@ -0,0 +1,29 @@
+import { Link, Outlet } from '@tanstack/react-router';
+import { fetchPosts } from '../posts';
+import { Route } from "arrow-function.tsx";
+const component = () => {
+  const posts = Route.useLoaderData();
+  return <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, {
+        id: 'i-do-not-exist',
+        title: 'Non-existent Post'
+      }]?.map(post => {
+        return <li key={post.id} className="whitespace-nowrap">
+                <Link to="/posts/$postId" params={{
+            postId: post.id
+          }} className="block py-1 text-blue-800 hover:text-blue-600" activeProps={{
+            className: 'text-black font-bold'
+          }}>
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>;
+      })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };
\ No newline at end of file
diff --git a/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
new file mode 100644
index 000000000..0328934db
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: PostsComponent,
+})
+
+const PostsComponent = () => {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }]?.map(
+          (post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  className="block py-1 text-blue-800 hover:text-blue-600"
+                  activeProps={{ className: 'text-black font-bold' }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}