fix(router-plugin): do not split if known ident is exported

[SeanCassiere]

From https://discord.com/channels/719702312431386674/1283438765817331712

When using autoCodeSplitting, we need to take into account the scenario where the user is exporting their component or loader from the route file. Consider this route before code-splitting:

import * as React from 'react'
import { createFileRoute, Outlet } from '@tanstack/react-router'
import {
  importedComponent as ImportedComponent,
  importedLoader,
} from '../shared/imported'

export const loaderFn = () => {
  return importedLoader()
}

const Layout = () => {
  return (
    <main>
      <header style={{ height: HEADER_HEIGHT }}>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
          </ul>
        </nav>
      </header>
      <ImportedComponent />
      <Outlet />
    </main>
  )
}

export const Route = createFileRoute('/_layout')({
  component: Layout,
  loader: loaderFn,
})

const HEADER_HEIGHT = '63px'
export const SIDEBAR_WIDTH = '150px'
export const SIDEBAR_MINI_WIDTH = '80px'
const ASIDE_WIDTH = '250px'

export default Layout

An assumption can be made here, that if the user is exporting the component or loader from this file, then they expect to import it into another file.

As such, the current strategy of nuking the component or loader, once it has been detected for use in the createFileRoute function will not work, as a user wouldn't then be able to make the import from another file since it would no longer exist.

Therefore, if the component or loader is being exported, then code removal shouldn't happen and it should retain the item in the same compiled file. As such, since the item remains in the same file, we can skip performing an import.

A warning is also going to be added into the console, so the user knows that this function is not being code-split.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cf3d8d1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• tanstack-router-react-example-scroll-restoration
• tanstack-router-search-validator-adapters
• tanstack-router-example-react-start-basic
• tanstack-router-example-react-start-basic-auth
• tanstack-router-example-react-start-basic-counter
• tanstack-router-example-react-start-basic-react-query
• tanstack-router-example-react-start-basic-rsc
• tanstack-router-example-react-start-clerk-basic
• tanstack-router-example-react-start-trello-trellaux
• tanstack-router-example-react-start-supabase-basic
• tanstack-router-example-react-start-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/history

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

@tanstack/create-router

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

@tanstack/react-cross-context

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

@tanstack/react-router

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

@tanstack/react-router-with-query

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

@tanstack/router-arktype-adapter

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

@tanstack/router-cli

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

@tanstack/router-devtools

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-valibot-adapter

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

@tanstack/router-vite-plugin

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

@tanstack/router-zod-adapter

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

@tanstack/start

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

@tanstack/start-vite-plugin

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

@tanstack/virtual-file-routes

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

commit: cf3d8d1

[schiller-manuel]

does this cause a problem with Start?
will Start properly work with some non-code-split routes?

it Start will not work, then we should throw a fatal error in case we are building for Start

[SeanCassiere]

This is only capturing if the component or loader is being exported out of the route file. It'll detect it both for Start and Router since this happens during dev and at build time (not at runtime).

This is the example that are checking for:

// this export ident here
export const loadUser = async () => {
	return { user: 'john' }
}

export const Route = createFileRoute('/login')({
	loader: loadUser
})

In this case, we can't code-split the loadUser fn, since other external files may be imported from this source file.

So it needs to remain as-is.

[schiller-manuel]

understood, but is skipping a route from code splitting posing any problems in TanStack Start? i.e. could we just disable automatic code splitting for start and it would still work?

[SeanCassiere]

could we just disable automatic code splitting for start and it would still work?

We could choose to turn it off automatic code-splitting on our side, but currently, we force it ON in the Start config.

router/packages/start/src/config/index.ts

Lines 290 to 296 in 8fde2ef

	TanStackRouterVite({
	...tsrConfig,
	autoCodeSplitting: true,
	experimental: {
	...tsrConfig.experimental,
	},
	}),