or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdperformance-optimizations.mdplatform-options.mdpreset-configuration.mdreact-compiler.mdserver-components.md
tile.json

server-components.mddocs/

Server Components Support

React Server Components configuration with client/server boundary handling, import restrictions, and server-side optimizations.

Capabilities

Server Environment Detection

Automatic detection and configuration for server-side rendering and React Server Components.

interface ServerEnvironmentDetection {
  /** Server-side rendering environment */
  isServer: boolean;
  /** React Server Components environment */
  isReactServer: boolean;
  /** Combined server environment check */
  isServerEnv: boolean; // isServer || isReactServer
}

The preset automatically detects server environments through Babel caller information and applies appropriate transformations.

Client Reference Plugin

Handles "use client" directives for React Server Components boundary detection.

interface ClientReferenceHandling {
  /** Plugin for client component boundary detection */
  reactClientReferencesPlugin: BabelPlugin;
}

Transformation Example:

// Input: Client component
'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Output: Processed with client boundary metadata
// (Actual transformation is internal to the plugin)

Server Actions Plugin

Transforms server functions and "use server" directives for React Server Actions.

interface ServerActionsHandling {
  /** Plugin for server action transformation */
  reactServerActionsPlugin: BabelPlugin;
}

Transformation Example:

// Input: Server action
'use server';

export async function submitForm(formData) {
  // Server-side form processing
  const result = await processFormData(formData);
  return result;
}

// Output: Processed with server action metadata and transport setup

Environment Restricted Imports

Prevents client-only or server-only modules from being imported in the wrong environment.

interface EnvironmentRestrictedImports {
  /** Plugin for import environment validation */
  environmentRestrictedImportsPlugin: BabelPlugin;
}

Import Restrictions:

// These imports are restricted based on environment
import 'server-only'; // Server environment only
import 'client-only'; // Client environment only

// Build-time error if imported in wrong environment

DOM Components Support

Handles "use dom" directive for Expo DOM components in client environments.

interface DOMComponentsSupport {
  /** Plugin for DOM component directive handling */
  expoUseDomDirectivePlugin: BabelPlugin;
}

Usage Example:

// DOM component with "use dom" directive
'use dom';

export function MyDOMComponent() {
  return <div>This runs in a DOM context</div>;
}

import.meta Transformation

Polyfills import.meta for environments that don't support it natively.

interface ImportMetaTransformation {
  /** Enable import.meta transform to globalThis registry */
  unstable_transformImportMeta?: boolean;
}

Usage Examples:

// Enable import.meta polyfill (default on server)
module.exports = {
  presets: [
    ['babel-preset-expo', {
      unstable_transformImportMeta: true
    }]
  ]
};

Transformation Example:

// Before
const url = import.meta.url;
const env = import.meta.env;

// After (when polyfilled)
const url = globalThis.__ExpoImportMetaRegistry.url;
const env = globalThis.__ExpoImportMetaRegistry.env;

Restricted React APIs

Prevents server-incompatible React APIs from being used in server environments.

interface RestrictedReactAPIs {
  /** Plugin for React API environment validation */
  environmentRestrictedReactAPIsPlugin: BabelPlugin;
}

Restricted APIs in Server Environment:

  • useState, useEffect, useLayoutEffect
  • Event handlers (onClick, onSubmit, etc.)
  • Browser-specific hooks and APIs
  • Client-side lifecycle methods

Server-Side Optimizations

Automatic optimizations applied in server environments.

interface ServerOptimizations {
  /** Server environment defaults */
  serverDefaults: {
    /** import.meta polyfill enabled */
    unstable_transformImportMeta: true;
    /** typeof window optimization enabled */
    minifyTypeofWindow: true;
    /** React Compiler disabled (server components) */
    'react-compiler': false;
  };
}

Plugin Execution Order

Server components plugins are applied in a specific order to ensure proper transformation:

  1. React Compiler (client only, before other plugins)
  2. Client References Plugin (always, detects boundaries)
  3. Server Actions Plugin (server environments only)
  4. Restricted React APIs (server environments only)
  5. DOM Components Plugin (client environments only)
  6. Environment Restricted Imports (always, validates imports)

Environment Variable Inlining

Server-specific environment variables are inlined at build time:

// Server environment inlining
process.env.EXPO_SERVER → true
typeof window → 'undefined'

Error Handling

The preset provides clear error messages for common server components issues:

  • Using client-only APIs in server components
  • Importing server-only modules in client components
  • Missing "use client" or "use server" directives
  • Invalid server action signatures

Example Error Messages:

Error: Cannot use useState in server component. Add 'use client' directive.
Error: Cannot import 'server-only' in client component.
Error: Server actions must be async functions.