fix(router-plugin): code-splitting to handle explicit undefined (#4564)

Co-authored-by: weitang.lin <weitang.lin@mujin.co.jp>
Co-authored-by: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>

Author: 3 people

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -209,6 +209,16 @@ export function compileCodeSplitReferenceRoute(
                         return
                       }
 
+                      // Exit early if the value is undefined
+                      // Since we don't need to run an import just to get the value of `undefined`
+                      // This is useful for cases like: `createFileRoute('/')({ component: undefined })`
+                      if (
+                        t.isIdentifier(prop.value) &&
+                        prop.value.name === 'undefined'
+                      ) {
+                        return
+                      }
+
                       const splitNodeMeta = SPLIT_NODES_CONFIG.get(key as any)!
 
                       // We need to extract the existing search params from the filename, if any
@@ -253,7 +263,6 @@ export function compileCodeSplitReferenceRoute(
                         // Prepend the import statement to the program along with the importer function
                         // Check to see if lazyRouteComponent is already imported before attempting
                         // to import it again
-
                         if (
                           !hasImportedOrDefinedIdentifier(
                             LAZY_ROUTE_COMPONENT_IDENT,
@@ -461,6 +470,14 @@ export function compileCodeSplitVirtualRoute(
 
                       const value = prop.value
 
+                      // If the value for the `key` is `undefined`, then we don't need to include it
+                      // in the split file, so we can just return, since it will kept in-place in the
+                      // reference file
+                      // This is useful for cases like: `createFileRoute('/')({ component: undefined })`
+                      if (t.isIdentifier(value) && value.name === 'undefined') {
+                        return
+                      }
+
                       let isExported = false
                       if (t.isIdentifier(value)) {
                         isExported = hasExport(ast, value)

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/development/explicit-undefined-component.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: undefined
+});

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/development/explicit-undefined-component@component.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/development/explicit-undefined-component@errorComponent.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/development/explicit-undefined-component@notFoundComponent.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/production/explicit-undefined-component.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: undefined
+});

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/production/explicit-undefined-component@component.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/production/explicit-undefined-component@errorComponent.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/production/explicit-undefined-component@notFoundComponent.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+import { Route } from "explicit-undefined-component.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/development/explicit-undefined-component.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: undefined
+});