BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News TanStack Start Introduces Import Protection to Enforce Server and Client Boundaries

TanStack Start Introduces Import Protection to Enforce Server and Client Boundaries

Listen to this article -  0:00

TanStack Start has introduced import protection, a Vite-powered mechanism designed to prevent server-only code from leaking into client bundles and client-only code from leaking into server bundles. The feature, announced on X in February 2026 and currently marked as experimental, ships enabled by default in all new TanStack Start projects.

As full-stack React applications grow in complexity, the boundary between server and client code has become a common source of subtle bugs and security risks. Code meant to run only on the server, such as database queries or access to environment secrets, can inadvertently reach the client bundle if imports are not carefully managed. TanStack Start's import protection addresses this at the tooling level rather than relying on developer discipline alone.

The system works as a Vite plugin that checks every import in your source files during development and at build time. There are two ways an import can be denied: file patterns matching on the resolved file path, and specifier patterns matching on the raw import string. Out of the box, files following the *.server.* naming convention are denied in the client environment, while *.client.* files are denied on the server, with no additional configuration required. The specifier @tanstack/react-start/server is also blocked from the client by default.

For files that do not follow the naming convention, developers can explicitly mark a module as server-only or client-only using a side-effect import at the top of the file:

import '@tanstack/react-start/server-only'

export const API_KEY = process.env.API_KEY

The plugin records the marker and enforces the restriction if that file is later imported from the wrong environment. Custom deny rules can also be added for entire directories or specific npm packages, such as blocking @prisma/client or bcrypt from ever reaching the client bundle via the importProtection.client.specifiers option in vite.config.ts.

The behavior differs between development and production. During development, violations trigger mock mode by default, replacing the offending import with a recursive Proxy and logging a warning while allowing work to continue. At build time the default switches to error, halting the build with a detailed diagnostic that includes the full import chain, a code snippet pointing to the offending line, and actionable suggestions such as wrapping logic in createServerFn(), createServerOnlyFn(), or createIsomorphicFn().

Next.js handles similar concerns through React Server Components and the community server-only package, relying heavily on the RSC model that TanStack Start does not yet support. A Reddit thread discussing TanStack security versus Next.js prompted a reply from the Tanner Linsley, the author of the Tanstack Ecosystem, who clarified the following in regards to security:

TanStack ships with the same preventative security measures as Next despite having a smaller attack surface area. With the recent influx of CVEs, we've taken the time to make sure we're up to speed not only with existing CVEs, but constantly and vigilantly auditing the framework for other unknown/new attack vectors.

He goes onto admit there will be eventually be something found, but gives confidence it won’t be to the level of recent CVEs:

No doubt that with Start's growing popularity, there will eventually be something that we haven't found, but rest assured, it will likely not take the form of existing/found vulnerabilities in other frameworks.

The announcement post on X generated over 590 likes and 21 comments, with positive reactions from users, with one user saying they can finally get some peace of mind.

A Github issue highlighted that earlier versions of TanStack Start produced cryptic, hard-to-debug error messages when server code was accidentally imported on the client, a problem the new feature's detailed violation traces directly address.

Teams upgrading should review the import protection documentation and check plugin ordering in their Vite configuration if TypeScript path aliases are in use. The feature requires no opt-in for new projects and is disabled only if importProtection: { enabled: false } is explicitly set in the TanStack Start Vite plugin configuration.

TanStack Start is a full-stack React framework built on TanStack Router and powered by Vite, offering SSR, streaming, server functions, bundling, and deployment across any hosting provider or runtime. It is currently in the Release Candidate stage.

About the Author

Rate this Article

Adoption
Style

BT