Skip to content

Commit 17e153f

Browse files
justin808claude
andcommitted
Fix React 18.0.0 compatibility by using React namespace imports
Changed from named imports to React namespace for better compatibility with React 18.0.0: - `Component` → `React.Component` - `createContext` → `React.createContext` - `useContext` → `React.useContext` - `use` → `React.use` This fixes the build (20) CI failure where React is downgraded to 18.0.0 for minimum version testing. Named exports may not be available in older React versions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent db1978b commit 17e153f

File tree

2 files changed

+7
-7
lines changed

2 files changed

+7
-7
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
'use client';
1616

1717
import * as React from 'react';
18-
import { createContext, useContext, type ReactNode } from 'react';
18+
import { type ReactNode } from 'react';
1919
import type { ClientGetReactServerComponentProps } from './getReactServerComponent.client.ts';
2020
import { createRSCPayloadKey } from './utils.ts';
2121

@@ -25,7 +25,7 @@ type RSCContextType = {
2525
refetchComponent: (componentName: string, componentProps: unknown) => Promise<ReactNode>;
2626
};
2727

28-
const RSCContext = createContext<RSCContextType | undefined>(undefined);
28+
const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
2929

3030
/**
3131
* Creates a provider context for React Server Components.
@@ -102,7 +102,7 @@ export const createRSCProvider = ({
102102
* ```
103103
*/
104104
export const useRSC = () => {
105-
const context = useContext(RSCContext);
105+
const context = React.useContext(RSCContext);
106106
if (!context) {
107107
throw new Error('useRSC must be used within a RSCProvider');
108108
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@
1717
'use client';
1818

1919
import * as React from 'react';
20-
import { Component, use, type ReactNode } from 'react';
20+
import { type ReactNode } from 'react';
2121
import { useRSC } from './RSCProvider.tsx';
2222
import { ServerComponentFetchError } from './ServerComponentFetchError.ts';
2323

2424
/**
2525
* Error boundary component for RSCRoute that adds server component name and props to the error
2626
* So, the parent ErrorBoundary can refetch the server component
2727
*/
28-
class RSCRouteErrorBoundary extends Component<
28+
class RSCRouteErrorBoundary extends React.Component<
2929
{ children: ReactNode; componentName: string; componentProps: unknown },
3030
{ error: Error | null }
3131
> {
@@ -77,8 +77,8 @@ export type RSCRouteProps = {
7777
};
7878

7979
const PromiseWrapper = ({ promise }: { promise: Promise<ReactNode> }) => {
80-
// use is available in React 18.3+
81-
const promiseResult = use(promise);
80+
// React.use is available in React 18.3+
81+
const promiseResult = React.use(promise);
8282

8383
// In case that an error happened during the rendering of the RSC payload before the rendering of the component itself starts
8484
// RSC bundle will return an error object serialized inside the RSC payload

0 commit comments

Comments
 (0)