Skip to content

Code splitter does not support the method shorthand syntax #8623

Open

Description

@nstepien

Which project does this relate to?

Router

Describe the bug

While reviewing the usage of TSR in another project, I found out that method definitions in router properties were not being code-split by the Vite plugin.

This leads to code being unexpectedly bundled in the entry chunk.

Complete minimal reproducer

https://stackblitz.com/edit/github-atu775if?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug

Simply use the method syntax in route definitions, the function and its bindings will not be split into a separate module:

export const Route = createFileRoute('/')({
  component() {
    return <HomeComponent />;
  },
});
Image

Expected behavior

The method syntax/method definitions in route definitions should be supported by the plugin's code splitting, just like other functions:

export const Route = createFileRoute('/')({
  // function expressions works
  component: function() {
    return <HomeComponent />;
  },
  // arrow functions also work
  component: () => {
    return <HomeComponent />;
  },
});

Screenshots or Videos

No response

Platform

  • Router / Start Version: @tanstack/react-router@1.170.41
  • OS: Windows
  • Browser: Chrome
  • Browser Version: 154.0.8037.98
  • Bundler: Vite
  • Bundler Version: 8.3.3

Additional context

I have opened PR #8459 to fix this bug

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions