From 78aa01044d3eb7369df6ac00a82952b5d00d81b9 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 13 Sep 2025 11:44:14 +1200 Subject: [PATCH 1/5] fix(router-plugin): show warning for items not splittable --- .../src/core/code-splitter/compilers.ts | 66 ++++++++++++------- 1 file changed, 43 insertions(+), 23 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index fb4ef591d7b..57df0d1a831 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -84,7 +84,8 @@ function addSplitSearchParamToFilename( const params = new URLSearchParams() params.append(tsrSplit, createIdentifier(grouping)) - return `${bareFilename}?${params.toString()}` + const result = `${bareFilename}?${params.toString()}` + return result } function removeSplitSearchParamFromFilename(filename: string) { @@ -116,6 +117,8 @@ export function compileCodeSplitReferenceRoute( const refIdents = findReferencedIdentifiers(ast) + const knownExportedIdents = new Set() + function findIndexForSplitNode(str: string) { return opts.codeSplitGroupings.findIndex((group) => group.includes(str as any), @@ -255,6 +258,8 @@ export function compileCodeSplitReferenceRoute( if (shouldSplit) { removeIdentifierLiteral(path, value) + } else { + knownExportedIdents.add(value.name) } } @@ -324,6 +329,8 @@ export function compileCodeSplitReferenceRoute( if (shouldSplit) { removeIdentifierLiteral(path, value) + } else { + knownExportedIdents.add(value.name) } } @@ -410,6 +417,26 @@ export function compileCodeSplitReferenceRoute( deadCodeElimination(ast, refIdents) + // if there are exported identifiers, then we need to add a warning + // to the file to let the user know that the exported identifiers + // will not in the split file but in the original file, therefore + // increasing the bundle size + if (knownExportedIdents.size > 0) { + const warningMessage = createNotExportableMessage( + opts.filename, + knownExportedIdents, + ) + console.warn(warningMessage) + + // append this warning to the file using a template + if (process.env.NODE_ENV !== 'production') { + const warningTemplate = template.statement( + `console.warn(${JSON.stringify(warningMessage)})`, + )() + ast.program.body.unshift(warningTemplate) + } + } + return generateFromAst(ast, { sourceMaps: true, sourceFileName: opts.filename, @@ -712,28 +739,6 @@ export function compileCodeSplitVirtualRoute( deadCodeElimination(ast, refIdents) - // if there are exported identifiers, then we need to add a warning - // to the file to let the user know that the exported identifiers - // will not in the split file but in the original file, therefore - // increasing the bundle size - if (knownExportedIdents.size > 0) { - const list = Array.from(knownExportedIdents).reduce((str, ident) => { - str += `\n- ${ident}` - return str - }, '') - - const warningMessage = `These exports from "${opts.filename}" are not being code-split and will increase your bundle size: ${list}\nThese should either have their export statements removed or be imported from another file that is not a route.` - console.warn(warningMessage) - - // append this warning to the file using a template - if (process.env.NODE_ENV !== 'production') { - const warningTemplate = template.statement( - `console.warn(${JSON.stringify(warningMessage)})`, - )() - ast.program.body.unshift(warningTemplate) - } - } - return generateFromAst(ast, { sourceMaps: true, sourceFileName: opts.filename, @@ -837,6 +842,21 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): { return { groupings: codeSplitGroupings } } +function createNotExportableMessage( + filename: string, + idents: Set, +): string { + const list = Array.from(idents).map((d) => `- ${d}`) + + const message = [ + `[tanstack-router] These exports from "${filename}" will not be code-split and will increase your bundle size:`, + ...list, + 'For the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file.', + ].join('\n') + + return message +} + function getImportSpecifierAndPathFromLocalName( programPath: babel.NodePath, name: string, From b9009cb6cba1e1e4609ed5261944f681b9426200 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 13 Sep 2025 11:44:27 +1200 Subject: [PATCH 2/5] test(router-plugin): update snapshots --- .../1-default/export-default-component-and-normal-notFound.tsx | 1 + .../export-default-component-and-normal-notFound@component.tsx | 1 - ...port-default-component-and-normal-notFound@errorComponent.tsx | 1 - ...t-default-component-and-normal-notFound@notFoundComponent.tsx | 1 - .../snapshots/react/1-default/export-default-component.tsx | 1 + .../react/1-default/export-default-component@component.tsx | 1 - .../react/1-default/export-default-component@errorComponent.tsx | 1 - .../1-default/export-default-component@notFoundComponent.tsx | 1 - .../snapshots/react/1-default/retain-export-component.tsx | 1 + .../react/1-default/retain-export-component@component.tsx | 1 - .../react/1-default/retain-export-component@errorComponent.tsx | 1 - .../1-default/retain-export-component@notFoundComponent.tsx | 1 - .../snapshots/react/1-default/retain-exports-const.tsx | 1 + .../snapshots/react/1-default/retain-exports-const@component.tsx | 1 - .../react/1-default/retain-exports-const@errorComponent.tsx | 1 - .../react/1-default/retain-exports-const@notFoundComponent.tsx | 1 - .../snapshots/react/1-default/retain-exports-function.tsx | 1 + .../react/1-default/retain-exports-function@component.tsx | 1 - .../react/1-default/retain-exports-function@errorComponent.tsx | 1 - .../1-default/retain-exports-function@notFoundComponent.tsx | 1 - .../react/1-default/retain-exports-loader@component.tsx | 1 - .../react/1-default/retain-exports-loader@errorComponent.tsx | 1 - .../react/1-default/retain-exports-loader@notFoundComponent.tsx | 1 - .../snapshots/react/1-default/useStateDestructure.tsx | 1 + .../snapshots/react/1-default/useStateDestructure@component.tsx | 1 - .../react/1-default/useStateDestructure@errorComponent.tsx | 1 - .../react/1-default/useStateDestructure@notFoundComponent.tsx | 1 - .../export-default-component-and-normal-notFound.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../export-default-component-and-normal-notFound@loader.tsx | 1 - .../export-default-component.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../export-default-component@loader.tsx | 1 - .../retain-export-component.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../retain-export-component@loader.tsx | 1 - .../retain-exports-const.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-const@loader.tsx | 1 - .../retain-exports-function.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-function@loader.tsx | 1 - .../retain-exports-loader.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-loader@loader.tsx | 1 - .../useStateDestructure.tsx | 1 + ...t---errorComponent---notFoundComponent---pendingComponent.tsx | 1 - .../useStateDestructure@loader.tsx | 1 - .../export-default-component-and-normal-notFound.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - ...port-default-component-and-normal-notFound@errorComponent.tsx | 1 - .../export-default-component.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../export-default-component@errorComponent.tsx | 1 - .../retain-export-component.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../retain-export-component@errorComponent.tsx | 1 - .../retain-exports-const.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-const@errorComponent.tsx | 1 - .../retain-exports-function.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-function@errorComponent.tsx | 1 - .../retain-exports-loader.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../retain-exports-loader@errorComponent.tsx | 1 - .../useStateDestructure.tsx | 1 + ...component---loader---notFoundComponent---pendingComponent.tsx | 1 - .../useStateDestructure@errorComponent.tsx | 1 - 69 files changed, 20 insertions(+), 49 deletions(-) diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound.tsx index b683c3bfcd8..da4daa9a3f7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component-and-normal-notFound.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitNotFoundComponentImporter = () => import('export-default-component-and-normal-notFound.tsx?tsr-split=notFoundComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import React, { useState } from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@component.tsx index dcff3b1dbe7..327bc4b8695 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@component.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?component\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@errorComponent.tsx index 304b8227ed2..327bc4b8695 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@errorComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@notFoundComponent.tsx index 1508bfe048f..2a52916809f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component-and-normal-notFound@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; function NotFoundComponent() { diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component.tsx index 0318ecddecc..d67a3dbaca3 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import React, { useState } from 'react'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/home')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@component.tsx index 658d858a403..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@component.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?component\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@errorComponent.tsx index 12ed9dae7c2..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@errorComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@notFoundComponent.tsx index 5c9699bf7a3..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component@notFoundComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component.tsx index 589d517aa87..4f20ac984bf 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-export-component.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@component.tsx index aca5a8c87b3..912181bd1a4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@component.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?component\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-export-component.tsx"; import { SIDEBAR_WIDTH } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@errorComponent.tsx index 488cd7545a1..912181bd1a4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-export-component.tsx"; import { SIDEBAR_WIDTH } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@notFoundComponent.tsx index 74d68ea5fe1..912181bd1a4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-export-component.tsx"; import { SIDEBAR_WIDTH } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const.tsx index 692918e9d39..b1d2434c9b1 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-const.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@component.tsx index d2dd1d91ca8..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@component.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?component\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@errorComponent.tsx index d20e8258c27..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@notFoundComponent.tsx index cf588093f65..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function.tsx index 6b3712a512b..81a037d6d67 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-function.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@component.tsx index adaa0d33f80..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@component.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?component\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@errorComponent.tsx index 8737cd00ab4..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@notFoundComponent.tsx index de3232513d4..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-function@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@component.tsx index c85234343c6..2cf1d0894dc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@component.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?component\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@errorComponent.tsx index ed40e2d2f9a..988a358b5d7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-loader.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-loader.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@notFoundComponent.tsx index e3563adb752..988a358b5d7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-loader@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-loader.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-loader.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure.tsx index 103067c81a4..5ca9e1f339e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"useStateDestructure.tsx\" will not be code-split and will increase your bundle size:\n- VersionIndex\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; import { FaBolt, FaBook, FaCheckCircle, FaCogs, FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@component.tsx index cb8e5280615..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@component.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?component\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@errorComponent.tsx index de15ab81ee9..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@notFoundComponent.tsx index a994ad6adfe..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@notFoundComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/useStateDestructure@notFoundComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?notFoundComponent\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound.tsx index 212ecbd1ab7..0ca25a70177 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component-and-normal-notFound.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitNotFoundComponentImporter = () => import('export-default-component-and-normal-notFound.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import React, { useState } from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@component---errorComponent---notFoundComponent---pendingComponent.tsx index 58e6572e757..2a52916809f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; function NotFoundComponent() { diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@loader.tsx index b945b1e942c..327bc4b8695 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component-and-normal-notFound@loader.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?loader\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component.tsx index 0318ecddecc..d67a3dbaca3 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import React, { useState } from 'react'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/home')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx index 912e9a623bd..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@loader.tsx index 6297990a407..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/export-default-component@loader.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?loader\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component.tsx index 9ca9a1ab4ac..f22aa236e1d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-export-component.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx index 667be3ef46d..912181bd1a4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-export-component.tsx"; import { SIDEBAR_WIDTH } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@loader.tsx index 6d9ff68646a..c418c2fa576 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-export-component@loader.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?loader\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { importedLoader } from '../../shared/imported'; import { Route } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const.tsx index 692918e9d39..d3ffcba547b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-const.tsx\" will not be code-split and will increase your bundle size:\n- Layout\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx index 521042c9988..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@loader.tsx index 6918bc7b666..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-const@loader.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?loader\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function.tsx index 6b3712a512b..f608cbe869b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-function.tsx\" will not be code-split and will increase your bundle size:\n- Layout\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx index a73d88612ec..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@loader.tsx index 3992da29e80..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-function@loader.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?loader\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader.tsx index c31291f7fd1..c7d54377291 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-loader.tsx\" will not be code-split and will increase your bundle size:\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx index 5b815638167..2cf1d0894dc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@loader.tsx index da5cf50520f..988a358b5d7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/retain-exports-loader@loader.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?loader\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-loader.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-loader.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure.tsx index 103067c81a4..5ca9e1f339e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"useStateDestructure.tsx\" will not be code-split and will increase your bundle size:\n- VersionIndex\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; import { FaBolt, FaBook, FaCheckCircle, FaCogs, FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx index 8c398cfd066..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?component---errorComponent---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@loader.tsx index 50eb4d401f4..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/useStateDestructure@loader.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?loader\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound.tsx index 7882a621eb9..a3e020c5592 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component-and-normal-notFound.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitNotFoundComponentImporter = () => import('export-default-component-and-normal-notFound.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import React, { useState } from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@component---loader---notFoundComponent---pendingComponent.tsx index 4a6870ac6ee..2a52916809f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; function NotFoundComponent() { diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@errorComponent.tsx index 304b8227ed2..327bc4b8695 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component-and-normal-notFound@errorComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component-and-normal-notFound.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component-and-normal-notFound.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component.tsx index 0318ecddecc..d67a3dbaca3 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"export-default-component.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import React, { useState } from 'react'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/home')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@component---loader---notFoundComponent---pendingComponent.tsx index 1c4ef6c7b52..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@errorComponent.tsx index 12ed9dae7c2..5f691824e7c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/export-default-component@errorComponent.tsx @@ -1,3 +1,2 @@ -console.warn("These exports from \"export-default-component.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Home\nThese should either have their export statements removed or be imported from another file that is not a route."); import React from 'react'; import { Route } from "export-default-component.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component.tsx index 22f6ae4f222..1b00751ae6e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-export-component.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx index f1439039972..c418c2fa576 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { importedLoader } from '../../shared/imported'; import { Route } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@errorComponent.tsx index 488cd7545a1..912181bd1a4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-export-component@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-export-component.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-export-component.tsx"; import { SIDEBAR_WIDTH } from "retain-export-component.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const.tsx index 692918e9d39..d3ffcba547b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-const.tsx\" will not be code-split and will increase your bundle size:\n- Layout\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx index 9262f75c581..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@errorComponent.tsx index d20e8258c27..1d00e8f2631 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-const@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-const.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-const.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-const.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function.tsx index 6b3712a512b..f608cbe869b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-function.tsx\" will not be code-split and will increase your bundle size:\n- Layout\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx index cf698462c1f..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@errorComponent.tsx index 8737cd00ab4..74c5d64313e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-function@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-function.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-function.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-function.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader.tsx index adee813a413..b36cbc6be2e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"retain-exports-loader.tsx\" will not be code-split and will increase your bundle size:\n- loaderFn\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx index f9266d913cc..2cf1d0894dc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@errorComponent.tsx index ed40e2d2f9a..988a358b5d7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/retain-exports-loader@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import * as React from 'react'; import { Route } from "retain-exports-loader.tsx"; import { SIDEBAR_WIDTH } from "retain-exports-loader.tsx"; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure.tsx index 103067c81a4..5ca9e1f339e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure.tsx @@ -1,3 +1,4 @@ +console.warn("[tanstack-router] These exports from \"useStateDestructure.tsx\" will not be code-split and will increase your bundle size:\n- VersionIndex\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file."); import * as React from 'react'; import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; import { FaBolt, FaBook, FaCheckCircle, FaCogs, FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx index 0bbb6ef93d0..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?component---loader---notFoundComponent---pendingComponent\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@errorComponent.tsx index de15ab81ee9..f4b72ad2a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@errorComponent.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/useStateDestructure@errorComponent.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"useStateDestructure.tsx?errorComponent\" are not being code-split and will increase your bundle size: \n- VersionIndex\nThese should either have their export statements removed or be imported from another file that is not a route."); import { FaBolt, FaBook, FaCheckCircle, FaCogs } from 'react-icons/fa'; import { VscPreview, VscWand } from 'react-icons/vsc'; import { Route } from "useStateDestructure.tsx"; \ No newline at end of file From 5b74fa841a76906e95792fb6a9b20831a4aebb8d Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 13 Sep 2025 12:31:12 +1200 Subject: [PATCH 3/5] refactor(router-plugin): change condition to only use export check --- .../router-plugin/src/core/code-splitter/compilers.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 57df0d1a831..cca093b22fc 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -254,12 +254,13 @@ export function compileCodeSplitReferenceRoute( // since they are already being imported // and need to be retained in the compiled file const isExported = hasExport(ast, value) + if (isExported) { + knownExportedIdents.add(value.name) + } shouldSplit = !isExported if (shouldSplit) { removeIdentifierLiteral(path, value) - } else { - knownExportedIdents.add(value.name) } } @@ -325,12 +326,13 @@ export function compileCodeSplitReferenceRoute( // since they are already being imported // and need to be retained in the compiled file const isExported = hasExport(ast, value) + if (isExported) { + knownExportedIdents.add(value.name) + } shouldSplit = !isExported if (shouldSplit) { removeIdentifierLiteral(path, value) - } else { - knownExportedIdents.add(value.name) } } From ace95d0dbd1501be57a5b15de7f7c45edc4da734 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 13 Sep 2025 12:35:11 +1200 Subject: [PATCH 4/5] docs(router): rules of splitting --- .../framework/react/guide/automatic-code-splitting.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/router/framework/react/guide/automatic-code-splitting.md b/docs/router/framework/react/guide/automatic-code-splitting.md index 72294c3b9b5..fdc426ff16a 100644 --- a/docs/router/framework/react/guide/automatic-code-splitting.md +++ b/docs/router/framework/react/guide/automatic-code-splitting.md @@ -74,6 +74,14 @@ This means that it creates three separate lazy-loaded chunks for each route. Res - One for the error component - And one for the not-found component. +### Rules of Splitting + +For automatic code splitting to work, there are some rules in-place to make sure that this process can reliably and predictably happen. + +1. **Do not export route properties**: Route properties like `component`, `loader`, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split. + +2. **That's it!** There are no other restrictions. You can use any other JavaScript or TypeScript features in your route files as you normally would. If you run into any issues, please [open an issue](https://github.com/tanstack/router/issues) on GitHub. + ## Granular control For most applications, the default behavior of using `autoCodeSplitting: true` is sufficient. However, TanStack Router provides several options to customize how your routes are split into chunks, allowing you to optimize for specific use cases or performance needs. From 0808152e22dcdd459325b760aa73b3dc17e352a5 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 13 Sep 2025 12:41:28 +1200 Subject: [PATCH 5/5] docs(router): add code snippet --- .../react/guide/automatic-code-splitting.md | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/docs/router/framework/react/guide/automatic-code-splitting.md b/docs/router/framework/react/guide/automatic-code-splitting.md index fdc426ff16a..8c980d7d82f 100644 --- a/docs/router/framework/react/guide/automatic-code-splitting.md +++ b/docs/router/framework/react/guide/automatic-code-splitting.md @@ -78,9 +78,33 @@ This means that it creates three separate lazy-loaded chunks for each route. Res For automatic code splitting to work, there are some rules in-place to make sure that this process can reliably and predictably happen. -1. **Do not export route properties**: Route properties like `component`, `loader`, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split. +#### Do not export route properties -2. **That's it!** There are no other restrictions. You can use any other JavaScript or TypeScript features in your route files as you normally would. If you run into any issues, please [open an issue](https://github.com/tanstack/router/issues) on GitHub. +Route properties like `component`, `loader`, etc., should not be exported from the route file. Exporting these properties results in them being bundled into the main application bundle, which means that they will not be code-split. + +```tsx +import { createRoute } from '@tanstack/react-router' + +export const Route = createRoute('/posts')({ + // ... + notFoundComponent: PostsNotFoundComponent, +}) + +// ❌ Do NOT do this! +// Exporting the notFoundComponent will prevent it from being code-split +// and will be included in the main bundle. +export function PostsNotFoundComponent() { + // ❌ + // ... +} + +function PostsNotFoundComponent() { + // ✅ + // ... +} +``` + +**That's it!** There are no other restrictions. You can use any other JavaScript or TypeScript features in your route files as you normally would. If you run into any issues, please [open an issue](https://github.com/tanstack/router/issues) on GitHub. ## Granular control