Skip to content

Commit 4652bd0

Browse files
authored
fix: avoid relying on Function.prototype.name to detect react components (#13931)
### What Remove references to the `.name` property in the logic for detecting react components. Instead just rely on `typeof` and `length`. ### Why Don't use the presence/absence of function names to detect react components or to distinguish client vs server components. minifiers generally do not preserve function names. e.g. in swc [`keepFnNames` is false by default](https://swc.rs/docs/configuration/minification#:~:text=with%20terser.-,keepFnNames,-%2C%20Defaults%20to%20false). A recent [PR](vercel/next.js@ba22704) in Next.js optimized the representation of esm exports which meant that many `export function Foo` declarations would loose their names. This broke users of payloadcms since now server props were no longer propagated to their components due to the check [here](https://github.com/payloadcms/payload/blob/c2300059a67a505e0483a2004bc294d8c9d7c463/packages/ui/src/elements/withMergedProps/index.tsx#L43).
1 parent 71c684e commit 4652bd0

File tree

1 file changed

+3
-17
lines changed

1 file changed

+3
-17
lines changed

packages/payload/src/utilities/isReactComponent.ts

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,17 @@ const clientRefSymbol = Symbol.for('react.client.reference')
55
export function isReactServerComponentOrFunction<T extends any>(
66
component: any | React.ComponentType,
77
): component is T {
8-
if (component === null || component === undefined) {
9-
return false
10-
}
11-
const hasClientComponentSymbol = component.$$typeof == clientRefSymbol
12-
13-
const isFunctionalComponent = typeof component === 'function'
14-
// Anonymous functions are Client Components in Turbopack. RSCs should have a name
15-
const isAnonymousFunction = typeof component === 'function' && component.name === ''
16-
17-
const isRSC = isFunctionalComponent && !isAnonymousFunction && !hasClientComponentSymbol
18-
19-
return isRSC
8+
return typeof component === 'function' && component.$$typeof !== clientRefSymbol
209
}
2110

2211
export function isReactClientComponent<T extends any>(
2312
component: any | React.ComponentType,
2413
): component is T {
25-
if (component === null || component === undefined) {
26-
return false
27-
}
28-
return !isReactServerComponentOrFunction(component) && component.$$typeof == clientRefSymbol
14+
return typeof component === 'function' && component.$$typeof === clientRefSymbol
2915
}
3016

3117
export function isReactComponentOrFunction<T extends any>(
3218
component: any | React.ComponentType,
3319
): component is T {
34-
return isReactServerComponentOrFunction(component) || isReactClientComponent(component)
20+
return typeof component === 'function'
3521
}

0 commit comments

Comments
 (0)