Fix React 19 server bundle errors by removing 'use client' from RSCProvider and RSCRoute

Remove 'use client' directives from RSCProvider.tsx and RSCRoute.tsx to fix
webpack compilation errors when these files are included in server bundles.

In React 19, the server build doesn't export client-only APIs like createContext,
useContext, and Component. When files with 'use client' are bundled into server
bundles, webpack fails with "export not found" errors.

The solution is to remove 'use client' from library files that need to work in
both server and client contexts. The 'use client' boundary should be established
in consuming components, not in the library files themselves.

Also update import style to use ReactClient from 'react/index.js' for better
compatibility with React 19's dual package structure.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

.test-files/should-fail.server.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import React from 'react';
+
+export function TestComponent() {
+  return <div>This should fail linting</div>;
+}

eslint-rules/README.md

@@ -0,0 +1,110 @@
+# Custom ESLint Rules
+
+This directory contains custom ESLint rules specific to React on Rails.
+
+## Rules
+
+### `no-use-client-in-server-files`
+
+Prevents the `'use client'` directive from being used in `.server.tsx` and `.server.ts` files.
+
+#### Why This Rule Exists
+
+Files ending with `.server.tsx` are intended for server-side rendering in React Server Components (RSC) architecture. The `'use client'` directive forces webpack to bundle these files as client components, which creates a fundamental contradiction and causes errors when using React's `react-server` conditional exports.
+
+This issue became apparent with Shakapacker 9.3.0+, which properly honors `resolve.conditionNames` in webpack configurations. When webpack resolves imports with the `react-server` condition, React's server exports intentionally omit client-only APIs like:
+
+- `createContext`, `useContext`
+- `useState`, `useEffect`, `useLayoutEffect`, `useReducer`
+- `Component`, `PureComponent`
+- Other hooks (`use*` functions)
+
+#### Examples
+
+❌ **Incorrect** - Will trigger an error:
+
+```typescript
+// Component.server.tsx
+'use client';
+
+import React from 'react';
+
+export function MyComponent() {
+  return <div>Component</div>;
+}
+```
+
+✅ **Correct** - No directive in server files:
+
+```typescript
+// Component.server.tsx
+import React from 'react';
+
+export function MyComponent() {
+  return <div>Component</div>;
+}
+```
+
+✅ **Correct** - Use `'use client'` in client files:
+
+```typescript
+// Component.client.tsx or Component.tsx
+'use client';
+
+import React, { useState } from 'react';
+
+export function MyComponent() {
+  const [count, setCount] = useState(0);
+  return <div>Count: {count}</div>;
+}
+```
+
+#### Auto-fix
+
+This rule includes an automatic fixer that will remove the `'use client'` directive from `.server.tsx` files when you run ESLint with the `--fix` option:
+
+```bash
+npx eslint --fix path/to/file.server.tsx
+```
+
+#### Related
+
+- **Issue:** [Shakapacker #805 - Breaking change in 9.3.0](https://github.com/shakacode/shakapacker/issues/805)
+- **Fix PR:** [React on Rails #1896](https://github.com/shakacode/react_on_rails/pull/1896)
+- **Commit:** [86979dca - Remove 'use client' from .server.tsx files](https://github.com/shakacode/react_on_rails/commit/86979dca)
+
+#### Configuration
+
+This rule is automatically enabled in the React on Rails ESLint configuration at the `error` level. It's defined in `eslint.config.ts`:
+
+```typescript
+plugins: {
+  'react-on-rails': {
+    rules: {
+      'no-use-client-in-server-files': noUseClientInServerFiles,
+    },
+  },
+},
+
+rules: {
+  'react-on-rails/no-use-client-in-server-files': 'error',
+  // ... other rules
+}
+```
+
+## Testing
+
+To run tests for the custom rules:
+
+```bash
+node eslint-rules/no-use-client-in-server-files.test.cjs
+```
+
+## Adding New Custom Rules
+
+To add a new custom ESLint rule:
+
+1. Create the rule file in this directory (use `.cjs` extension for CommonJS)
+2. Create a corresponding test file (e.g., `rule-name.test.cjs`)
+3. Import and register the rule in `eslint.config.ts`
+4. Add documentation to this README

eslint.config.ts

@@ -85,7 +85,18 @@ const config = tsEslint.config([
       },
     },
 
+    plugins: {
+      'react-on-rails': {
+        rules: {
+          'no-use-client-in-server-files': noUseClientInServerFiles,
+        },
+      },
+    },
+
     rules: {
+      // Custom React on Rails rules
+      'react-on-rails/no-use-client-in-server-files': 'error',
+
       'no-shadow': 'off',
       'no-console': 'off',
       'function-paren-newline': 'off',
@@ -168,13 +179,6 @@ const config = tsEslint.config([
   },
   {
     files: ['**/*.server.ts', '**/*.server.tsx'],
-    plugins: {
-      'react-on-rails': {
-        rules: {
-          'no-use-client-in-server-files': noUseClientInServerFiles,
-        },
-      },
-    },
     rules: {
       'react-on-rails/no-use-client-in-server-files': 'error',
     },

packages/react-on-rails-pro/src/RSCProvider.tsx

@@ -12,16 +12,17 @@
  * https://github.com/shakacode/react_on_rails/blob/master/REACT-ON-RAILS-PRO-LICENSE.md
  */
 
-'use client';
-
-import * as React from 'react';
+import type { ReactNode } from 'react';
+import ReactClient from 'react/index.js';
 import type { ClientGetReactServerComponentProps } from './getReactServerComponent.client.ts';
 import { createRSCPayloadKey } from './utils.ts';
 
+const React = ReactClient as typeof import('react');
+
 type RSCContextType = {
-  getComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
+  getComponent: (componentName: string, componentProps: unknown) => Promise<ReactNode>;
 
-  refetchComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
+  refetchComponent: (componentName: string, componentProps: unknown) => Promise<ReactNode>;
 };
 
 const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
@@ -48,9 +49,9 @@ const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
 export const createRSCProvider = ({
   getServerComponent,
 }: {
-  getServerComponent: (props: ClientGetReactServerComponentProps) => Promise<React.ReactNode>;
+  getServerComponent: (props: ClientGetReactServerComponentProps) => Promise<ReactNode>;
 }) => {
-  const fetchRSCPromises: Record<string, Promise<React.ReactNode>> = {};
+  const fetchRSCPromises: Record<string, Promise<ReactNode>> = {};
 
   const getComponent = (componentName: string, componentProps: unknown) => {
     const key = createRSCPayloadKey(componentName, componentProps);
@@ -76,7 +77,7 @@ export const createRSCProvider = ({
 
   const contextValue = { getComponent, refetchComponent };
 
-  return ({ children }: { children: React.ReactNode }) => {
+  return ({ children }: { children: ReactNode }) => {
     return <RSCContext.Provider value={contextValue}>{children}</RSCContext.Provider>;
   };
 };

packages/react-on-rails-pro/src/RSCRoute.tsx

@@ -14,21 +14,22 @@
 
 /// <reference types="react/experimental" />
 
-'use client';
-
-import * as React from 'react';
+import type { ReactNode } from 'react';
+import ReactClient from 'react/index.js';
 import { useRSC } from './RSCProvider.tsx';
 import { ServerComponentFetchError } from './ServerComponentFetchError.ts';
 
+const React = ReactClient as typeof import('react');
+
 /**
  * Error boundary component for RSCRoute that adds server component name and props to the error
  * So, the parent ErrorBoundary can refetch the server component
  */
 class RSCRouteErrorBoundary extends React.Component<
-  { children: React.ReactNode; componentName: string; componentProps: unknown },
+  { children: ReactNode; componentName: string; componentProps: unknown },
   { error: Error | null }
 > {
-  constructor(props: { children: React.ReactNode; componentName: string; componentProps: unknown }) {
+  constructor(props: { children: ReactNode; componentName: string; componentProps: unknown }) {
     super(props);
     this.state = { error: null };
   }
@@ -75,7 +76,7 @@ export type RSCRouteProps = {
   componentProps: unknown;
 };
 
-const PromiseWrapper = ({ promise }: { promise: Promise<React.ReactNode> }) => {
+const PromiseWrapper = ({ promise }: { promise: Promise<ReactNode> }) => {
   // React.use is available in React 18.3+
   const promiseResult = React.use(promise);
 
@@ -88,7 +89,7 @@ const PromiseWrapper = ({ promise }: { promise: Promise<React.ReactNode> }) => {
   return promiseResult;
 };
 
-const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): React.ReactNode => {
+const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): ReactNode => {
   const { getComponent } = useRSC();
   const componentPromise = getComponent(componentName, componentProps);
   return (

spec/dummy/client/app/test-lint-rule.server.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import React from 'react';
+
+export function TestComponent() {
+  return <div>This should fail linting</div>;
+}