Skip to content

Don't warn on well-known properties in searchParams #71142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 11, 2024
Merged

Don't warn on well-known properties in searchParams #71142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 26 additions & 50 deletions packages/next/src/server/request/search-params.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
describeStringPropertyAccess,
describeHasCheckingStringProperty,
throwWithStaticGenerationBailoutErrorWithDynamicError,
wellKnownProperties,
} from './utils'

export type SearchParams = { [key: string]: string | string[] | undefined }
Expand Down Expand Up @@ -588,63 +589,38 @@ function makeDynamicallyTrackedExoticSearchParamsWithDevWarnings(
})

Object.keys(underlyingSearchParams).forEach((prop) => {
switch (prop) {
// Object prototype
case 'hasOwnProperty':
case 'isPrototypeOf':
case 'propertyIsEnumerable':
case 'toString':
case 'valueOf':
case 'toLocaleString':

// Promise prototype
// fallthrough
case 'then':
case 'catch':
case 'finally':

// React Promise extension
// fallthrough
case 'status':

// Common tested properties
// fallthrough
case 'toJSON':
case '$$typeof':
case '__esModule': {
// These properties cannot be shadowed because they need to be the
// true underlying value for Promises to work correctly at runtime
unproxiedProperties.push(prop)
break
}
default: {
proxiedProperties.add(prop)
Object.defineProperty(promise, prop, {
get() {
return proxiedUnderlying[prop]
},
set(newValue) {
Object.defineProperty(promise, prop, {
value: newValue,
writable: true,
enumerable: true,
})
},
enumerable: true,
configurable: true,
})
}
if (wellKnownProperties.has(prop)) {
// These properties cannot be shadowed because they need to be the
// true underlying value for Promises to work correctly at runtime
unproxiedProperties.push(prop)
} else {
proxiedProperties.add(prop)
Object.defineProperty(promise, prop, {
get() {
return proxiedUnderlying[prop]
},
set(newValue) {
Object.defineProperty(promise, prop, {
value: newValue,
writable: true,
enumerable: true,
})
},
enumerable: true,
configurable: true,
})
}
})

const proxiedPromise = new Proxy(promise, {
get(target, prop, receiver) {
if (typeof prop === 'string') {
if (
// We are accessing a property that was proxied to the promise instance
proxiedProperties.has(prop) ||
// We are accessing a property that doesn't exist on the promise nor the underlying
Reflect.has(target, prop) === false
!wellKnownProperties.has(prop) &&
(proxiedProperties.has(prop) ||
// We are accessing a property that doesn't exist on the promise nor
// the underlying searchParams.
Reflect.has(target, prop) === false)
Comment on lines +619 to +623
Copy link
Member Author

@eps1lon eps1lon Oct 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From @gnoff

@eps1lon

Yeah I suppose this is the right approach. I was thinking maybe we could get rid of the warning if the property doesn't exist on either the promise or the underlying search params object but it is common to check for a search param to exist and if it doesn't you wouldn't get the warning in that case.

I think we can actually just simplify the logic to only warn if the prop is not part of the well known set regardless of whether it was proxied or not. The well known ones won't ever be in the proxied set so they are mutually exclusive and there

so maybe

Suggested change
!wellKnownProperties.has(prop) &&
(proxiedProperties.has(prop) ||
// We are accessing a property that doesn't exist on the promise nor
// the underlying searchParams.
Reflect.has(target, prop) === false)
// The property isn't part of the well known set that is never proxied
!wellKnownProperties.has(prop) &&
// We aren't accessing a property defined directly on the promise like >'status' or 'value' written by React
Reflect.has(target, prop) === false

-- c4a7f76 (#70671)

This doesn't work since we don't warn in the getter of the proxied properties. The suggested code would disable warnings for properties that are defined.

) {
const expression = describeStringPropertyAccess('searchParams', prop)
warnForSyncAccess(store.route, expression)
Expand Down
25 changes: 25 additions & 0 deletions packages/next/src/server/request/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,28 @@ export function throwWithStaticGenerationBailoutErrorWithDynamicError(
`Route ${route} with \`dynamic = "error"\` couldn't be rendered statically because it used ${expression}. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering`
)
}

export const wellKnownProperties = new Set([
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'toString',
'valueOf',
'toLocaleString',

// Promise prototype
// fallthrough
'then',
'catch',
'finally',

// React Promise extension
// fallthrough
'status',

// Common tested properties
// fallthrough
'toJSON',
'$$typeof',
'__esModule',
])
Loading