@@ -1045,14 +1045,43 @@ function pushAdditionalFormField(
1045
1045
1046
1046
function pushAdditionalFormFields (
1047
1047
target : Array < Chunk | PrecomputedChunk > ,
1048
- formData : null | FormData ,
1048
+ formData : void | null | FormData ,
1049
1049
) {
1050
- if ( formData !== null ) {
1050
+ if ( formData != null ) {
1051
1051
// $FlowFixMe[prop-missing]: FormData has forEach.
1052
1052
formData . forEach ( pushAdditionalFormField , target ) ;
1053
1053
}
1054
1054
}
1055
1055
1056
+ function getCustomFormFields (
1057
+ resumableState : ResumableState ,
1058
+ formAction : any ,
1059
+ ) : null | ReactCustomFormAction {
1060
+ const customAction = formAction . $$FORM_ACTION ;
1061
+ if ( typeof customAction === 'function' ) {
1062
+ const prefix = makeFormFieldPrefix ( resumableState ) ;
1063
+ try {
1064
+ return formAction . $$FORM_ACTION ( prefix ) ;
1065
+ } catch ( x ) {
1066
+ if ( typeof x === 'object' && x !== null && typeof x . then === 'function' ) {
1067
+ // Rethrow suspense.
1068
+ throw x ;
1069
+ }
1070
+ // If we fail to encode the form action for progressive enhancement for some reason,
1071
+ // fallback to trying replaying on the client instead of failing the page. It might
1072
+ // work there.
1073
+ if ( __DEV__ ) {
1074
+ // TODO: Should this be some kind of recoverable error?
1075
+ console . error (
1076
+ 'Failed to serialize an action for progressive enhancement:\n%s' ,
1077
+ x ,
1078
+ ) ;
1079
+ }
1080
+ }
1081
+ }
1082
+ return null ;
1083
+ }
1084
+
1056
1085
function pushFormActionAttribute (
1057
1086
target : Array < Chunk | PrecomputedChunk > ,
1058
1087
resumableState : ResumableState ,
@@ -1062,7 +1091,7 @@ function pushFormActionAttribute(
1062
1091
formMethod : any ,
1063
1092
formTarget : any ,
1064
1093
name : any ,
1065
- ) : null | FormData {
1094
+ ) : void | null | FormData {
1066
1095
let formData = null ;
1067
1096
if ( enableFormActions && typeof formAction === 'function' ) {
1068
1097
// Function form actions cannot control the form properties
@@ -1092,12 +1121,10 @@ function pushFormActionAttribute(
1092
1121
) ;
1093
1122
}
1094
1123
}
1095
- const customAction : ReactCustomFormAction = formAction . $$FORM_ACTION ;
1096
- if ( typeof customAction === 'function' ) {
1124
+ const customFields = getCustomFormFields ( resumableState , formAction ) ;
1125
+ if ( customFields !== null ) {
1097
1126
// This action has a custom progressive enhancement form that can submit the form
1098
1127
// back to the server if it's invoked before hydration. Such as a Server Action.
1099
- const prefix = makeFormFieldPrefix ( resumableState ) ;
1100
- const customFields = formAction . $$FORM_ACTION ( prefix ) ;
1101
1128
name = customFields . name ;
1102
1129
formAction = customFields . action || '' ;
1103
1130
formEncType = customFields . encType ;
@@ -1882,12 +1909,10 @@ function pushStartForm(
1882
1909
) ;
1883
1910
}
1884
1911
}
1885
- const customAction : ReactCustomFormAction = formAction . $$FORM_ACTION ;
1886
- if ( typeof customAction === 'function' ) {
1912
+ const customFields = getCustomFormFields ( resumableState , formAction ) ;
1913
+ if ( customFields !== null ) {
1887
1914
// This action has a custom progressive enhancement form that can submit the form
1888
1915
// back to the server if it's invoked before hydration. Such as a Server Action.
1889
- const prefix = makeFormFieldPrefix ( resumableState ) ;
1890
- const customFields = formAction . $$FORM_ACTION ( prefix ) ;
1891
1916
formAction = customFields . action || '' ;
1892
1917
formEncType = customFields . encType ;
1893
1918
formMethod = customFields . method ;
0 commit comments