[flags] remove enableOwnerStacks (#32426)
Bassed off: https://github.com/facebook/react/pull/32425 Wait to land internally. [Commit to review.](https://github.com/facebook/react/pull/32426/commits/66aa6a4dbb78106b4f3d3eb367f5c27eb8f30c66) This has landed everywhere
Ricky committed
Mar 4, 2025 at 12:34 UTC
e0fe3479671555e01531dbc3d2fd85d5bd4c5a56
90 files changed
+1361
-3191
packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js
+2
-165
@@ -857,17 +857,6 @@ describe('ReactInternalTestUtils console assertions', () => {
857
858
You must call one of the assertConsoleDev helpers between each act call."
859
`);
860
- } else if (gate(flags => flags.enableOwnerStacks)) {
861
- expect(message).toMatchInlineSnapshot(`
862
- "asserConsoleLogsCleared(expected)
863
-
864
- console.log was called without assertConsoleLogDev:
865
- + Not asserted
866
- + Not asserted
867
- + Not asserted
868
-
869
- You must call one of the assertConsoleDev helpers between each act call."
870
- `);
860
} else {
861
expect(message).toMatchInlineSnapshot(`
862
"asserConsoleLogsCleared(expected)
@@ -937,20 +926,6 @@ describe('ReactInternalTestUtils console assertions', () => {
926
+ B
927
+ C
928
940
- You must call one of the assertConsoleDev helpers between each act call."
941
- `);
942
- } else if (gate(flags => flags.enableOwnerStacks)) {
943
- expect(message).toMatchInlineSnapshot(`
944
- "asserConsoleLogsCleared(expected)
945
-
946
- console.warn was called without assertConsoleWarnDev:
947
- + A%s,
948
- + in App (at **)
949
- + B%s,
950
- + in App (at **)
951
- + C%s,
952
- + in App (at **)
953
-
929
You must call one of the assertConsoleDev helpers between each act call."
930
`);
931
} else {
@@ -959,16 +934,10 @@ describe('ReactInternalTestUtils console assertions', () => {
934
935
console.warn was called without assertConsoleWarnDev:
936
+ A%s,
962
- + in Yield (at **)
963
- + in div (at **)
937
+ in App (at **)
938
+ B%s,
966
- + in Yield (at **)
967
- + in div (at **)
939
+ in App (at **)
940
+ C%s,
970
- + in Yield (at **)
971
- + in div (at **)
941
+ in App (at **)
942
943
You must call one of the assertConsoleDev helpers between each act call."
@@ -1023,33 +992,6 @@ describe('ReactInternalTestUtils console assertions', () => {
992
+ B
993
+ C
994
1026
- You must call one of the assertConsoleDev helpers between each act call."
1027
- `);
1028
- } else if (gate(flags => flags.enableOwnerStacks)) {
1029
- expect(message).toMatchInlineSnapshot(`
1030
- "asserConsoleLogsCleared(expected)
1031
-
1032
- console.log was called without assertConsoleLogDev:
1033
- + A
1034
- + B
1035
- + C
1036
-
1037
- console.warn was called without assertConsoleWarnDev:
1038
- + A%s,
1039
- + in App (at **)
1040
- + B%s,
1041
- + in App (at **)
1042
- + C%s,
1043
- + in App (at **)
1044
-
1045
- console.error was called without assertConsoleErrorDev:
1046
- + A%s,
1047
- + in App (at **)
1048
- + B%s,
1049
- + in App (at **)
1050
- + C%s,
1051
- + in App (at **)
1052
-
995
You must call one of the assertConsoleDev helpers between each act call."
996
`);
997
} else {
@@ -1063,30 +1005,18 @@ describe('ReactInternalTestUtils console assertions', () => {
1005
1006
console.warn was called without assertConsoleWarnDev:
1007
+ A%s,
1066
- + in Yield (at **)
1067
- + in div (at **)
1008
+ in App (at **)
1009
+ B%s,
1070
- + in Yield (at **)
1071
- + in div (at **)
1010
+ in App (at **)
1011
+ C%s,
1074
- + in Yield (at **)
1075
- + in div (at **)
1012
+ in App (at **)
1013
1014
console.error was called without assertConsoleErrorDev:
1015
+ A%s,
1080
- + in Yield (at **)
1081
- + in div (at **)
1016
+ in App (at **)
1017
+ B%s,
1084
- + in Yield (at **)
1085
- + in div (at **)
1018
+ in App (at **)
1019
+ C%s,
1088
- + in Yield (at **)
1089
- + in div (at **)
1020
+ in App (at **)
1021
1022
You must call one of the assertConsoleDev helpers between each act call."
@@ -1927,20 +1857,6 @@ describe('ReactInternalTestUtils console assertions', () => {
1857
+ Not asserted
1858
+ Not asserted
1859
1930
- You must call one of the assertConsoleDev helpers between each act call."
1931
- `);
1932
- } else if (gate(flags => flags.enableOwnerStacks)) {
1933
- expect(message).toMatchInlineSnapshot(`
1934
- "asserConsoleLogsCleared(expected)
1935
-
1936
- console.warn was called without assertConsoleWarnDev:
1937
- + Not asserted%s,
1938
- + in Yield (at **)
1939
- + Not asserted%s,
1940
- + in Yield (at **)
1941
- + Not asserted%s,
1942
- + in Yield (at **)
1943
-
1860
You must call one of the assertConsoleDev helpers between each act call."
1861
`);
1862
} else {
@@ -1950,13 +1866,10 @@ describe('ReactInternalTestUtils console assertions', () => {
1866
console.warn was called without assertConsoleWarnDev:
1867
+ Not asserted%s,
1868
+ in Yield (at **)
1953
- + in div (at **)
1869
+ Not asserted%s,
1870
+ in Yield (at **)
1956
- + in div (at **)
1871
+ Not asserted%s,
1872
+ in Yield (at **)
1959
- + in div (at **)
1873
1874
You must call one of the assertConsoleDev helpers between each act call."
1875
`);
@@ -2020,7 +1933,7 @@ describe('ReactInternalTestUtils console assertions', () => {
1933
1934
You must call one of the assertConsoleDev helpers between each act call."
1935
`);
2023
- } else if (gate(flags => flags.enableOwnerStacks)) {
1936
+ } else {
1937
expect(message).toMatchInlineSnapshot(`
1938
"asserConsoleLogsCleared(expected)
1939
@@ -2034,26 +1947,6 @@ describe('ReactInternalTestUtils console assertions', () => {
1947
1948
You must call one of the assertConsoleDev helpers between each act call."
1949
`);
2037
- } else {
2038
- expect(message).toMatchInlineSnapshot(`
2039
- "asserConsoleLogsCleared(expected)
2040
-
2041
- console.error was called without assertConsoleErrorDev:
2042
- + A%s,
2043
- + in Yield (at **)
2044
- + in div (at **)
2045
- + in App (at **)
2046
- + B%s,
2047
- + in Yield (at **)
2048
- + in div (at **)
2049
- + in App (at **)
2050
- + C%s,
2051
- + in Yield (at **)
2052
- + in div (at **)
2053
- + in App (at **)
2054
-
2055
- You must call one of the assertConsoleDev helpers between each act call."
2056
- `);
1950
}
1951
});
1952
@@ -2106,7 +1999,7 @@ describe('ReactInternalTestUtils console assertions', () => {
1999
2000
You must call one of the assertConsoleDev helpers between each act call."
2001
`);
2109
- } else if (gate(flags => flags.enableOwnerStacks)) {
2002
+ } else {
2003
expect(message).toMatchInlineSnapshot(`
2004
"asserConsoleLogsCleared(expected)
2005
@@ -2133,45 +2026,6 @@ describe('ReactInternalTestUtils console assertions', () => {
2026
2027
You must call one of the assertConsoleDev helpers between each act call."
2028
`);
2136
- } else {
2137
- expect(message).toMatchInlineSnapshot(`
2138
- "asserConsoleLogsCleared(expected)
2139
-
2140
- console.log was called without assertConsoleLogDev:
2141
- + A
2142
- + B
2143
- + C
2144
-
2145
- console.warn was called without assertConsoleWarnDev:
2146
- + A%s,
2147
- + in Yield (at **)
2148
- + in div (at **)
2149
- + in App (at **)
2150
- + B%s,
2151
- + in Yield (at **)
2152
- + in div (at **)
2153
- + in App (at **)
2154
- + C%s,
2155
- + in Yield (at **)
2156
- + in div (at **)
2157
- + in App (at **)
2158
-
2159
- console.error was called without assertConsoleErrorDev:
2160
- + A%s,
2161
- + in Yield (at **)
2162
- + in div (at **)
2163
- + in App (at **)
2164
- + B%s,
2165
- + in Yield (at **)
2166
- + in div (at **)
2167
- + in App (at **)
2168
- + C%s,
2169
- + in Yield (at **)
2170
- + in div (at **)
2171
- + in App (at **)
2172
-
2173
- You must call one of the assertConsoleDev helpers between each act call."
2174
- `);
2029
}
2030
});
2031
@@ -3052,20 +2906,6 @@ describe('ReactInternalTestUtils console assertions', () => {
2906
+ Not asserted
2907
+ Not asserted
2908
3055
- You must call one of the assertConsoleDev helpers between each act call."
3056
- `);
3057
- } else if (gate(flags => flags.enableOwnerStacks)) {
3058
- expect(message).toMatchInlineSnapshot(`
3059
- "asserConsoleLogsCleared(expected)
3060
-
3061
- console.error was called without assertConsoleErrorDev:
3062
- + Not asserted%s,
3063
- + in Yield (at **)
3064
- + Not asserted%s,
3065
- + in Yield (at **)
3066
- + Not asserted%s,
3067
- + in Yield (at **)
3068
-
2909
You must call one of the assertConsoleDev helpers between each act call."
2910
`);
2911
} else {
@@ -3075,13 +2915,10 @@ describe('ReactInternalTestUtils console assertions', () => {
2915
console.error was called without assertConsoleErrorDev:
2916
+ Not asserted%s,
2917
+ in Yield (at **)
3078
- + in div (at **)
2918
+ Not asserted%s,
2919
+ in Yield (at **)
3081
- + in div (at **)
2920
+ Not asserted%s,
2921
+ in Yield (at **)
3084
- + in div (at **)
2922
2923
You must call one of the assertConsoleDev helpers between each act call."
2924
`);
packages/internal-test-utils/consoleMock.js
+5
-13
@@ -6,6 +6,7 @@
6
*/
7
8
/* eslint-disable react-internal/no-production-logging */
9
+
10
const chalk = require('chalk');
11
const util = require('util');
12
const shouldIgnoreConsoleError = require('./shouldIgnoreConsoleError');
@@ -38,25 +39,16 @@ const patchConsoleMethod = (methodName, logged) => {
39
(methodName === 'error' || methodName === 'warn')
40
) {
41
const React = require('react');
42
+
43
+ // Ideally we could remove this check, but we have some tests like
44
+ // useSyncExternalStoreShared-test that tests against React 17,
45
+ // which doesn't have the captureOwnerStack method.
46
if (React.captureOwnerStack) {
42
- // enableOwnerStacks enabled. When it's always on, we can assume this case.
47
const stack = React.captureOwnerStack();
48
if (stack) {
49
format += '%s';
50
args.push(stack);
51
}
48
- } else {
49
- // Otherwise we have to use internals to emulate parent stacks.
50
- const ReactSharedInternals =
51
- React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
52
- React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
53
- if (ReactSharedInternals && ReactSharedInternals.getCurrentStack) {
54
- const stack = ReactSharedInternals.getCurrentStack();
55
- if (stack !== '') {
56
- format += '%s';
57
- args.push(stack);
58
- }
59
- }
52
}
53
}
54
packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
+1
-5
@@ -203,11 +203,7 @@ describe('ReactCache', () => {
203
"boolean, but instead received: [ 'Hi', 100 ]\n\n" +
204
'To use non-primitive values as keys, you must pass a hash ' +
205
'function as the second argument to createResource().\n' +
206
- ' in App (at **)' +
207
- (gate(flags => flags.enableOwnerStacks)
208
- ? ''
209
- : '\n in Suspense (at **)'),
210
-
206
+ ' in App (at **)',
207
...(gate('enableSiblingPrerendering')
208
? [
209
'Invalid key type. Expected a string, number, symbol, or ' +
packages/react-client/src/ReactFlightClient.js
+88
-146
@@ -45,7 +45,6 @@ import type {TemporaryReferenceSet} from './ReactFlightTemporaryReferences';
45
46
import {
47
enablePostpone,
48
- enableOwnerStacks,
48
enableProfilerTimer,
49
enableComponentPerformanceTrack,
50
} from 'shared/ReactFeatureFlags';
@@ -755,7 +754,7 @@ function createElement(
754
configurable: false,
755
enumerable: false,
756
writable: true,
758
- value: enableOwnerStacks ? validated : 1, // Whether the element has already been validated on the server.
757
+ value: validated, // Whether the element has already been validated on the server.
758
});
759
// debugInfo contains Server Component debug information.
760
Object.defineProperty(element, '_debugInfo', {
@@ -765,78 +764,67 @@ function createElement(
764
value: null,
765
});
766
let env = response._rootEnvironmentName;
768
- if (enableOwnerStacks) {
769
- if (owner !== null && owner.env != null) {
770
- // Interestingly we don't actually have the environment name of where
771
- // this JSX was created if it doesn't have an owner but if it does
772
- // it must be the same environment as the owner. We could send it separately
773
- // but it seems a bit unnecessary for this edge case.
774
- env = owner.env;
775
- }
776
- let normalizedStackTrace: null | Error = null;
777
- if (owner === null && response._debugRootStack != null) {
778
- // We override the stack if we override the owner since the stack where the root JSX
779
- // was created on the server isn't very useful but where the request was made is.
780
- normalizedStackTrace = response._debugRootStack;
781
- } else if (stack !== null) {
782
- // We create a fake stack and then create an Error object inside of it.
783
- // This means that the stack trace is now normalized into the native format
784
- // of the browser and the stack frames will have been registered with
785
- // source mapping information.
786
- // This can unfortunately happen within a user space callstack which will
787
- // remain on the stack.
788
- normalizedStackTrace = createFakeJSXCallStackInDEV(
789
- response,
790
- stack,
791
- env,
792
- );
793
- }
794
- Object.defineProperty(element, '_debugStack', {
795
- configurable: false,
796
- enumerable: false,
797
- writable: true,
798
- value: normalizedStackTrace,
799
- });
767
+ if (owner !== null && owner.env != null) {
768
+ // Interestingly we don't actually have the environment name of where
769
+ // this JSX was created if it doesn't have an owner but if it does
770
+ // it must be the same environment as the owner. We could send it separately
771
+ // but it seems a bit unnecessary for this edge case.
772
+ env = owner.env;
773
+ }
774
+ let normalizedStackTrace: null | Error = null;
775
+ if (owner === null && response._debugRootStack != null) {
776
+ // We override the stack if we override the owner since the stack where the root JSX
777
+ // was created on the server isn't very useful but where the request was made is.
778
+ normalizedStackTrace = response._debugRootStack;
779
+ } else if (stack !== null) {
780
+ // We create a fake stack and then create an Error object inside of it.
781
+ // This means that the stack trace is now normalized into the native format
782
+ // of the browser and the stack frames will have been registered with
783
+ // source mapping information.
784
+ // This can unfortunately happen within a user space callstack which will
785
+ // remain on the stack.
786
+ normalizedStackTrace = createFakeJSXCallStackInDEV(response, stack, env);
787
+ }
788
+ Object.defineProperty(element, '_debugStack', {
789
+ configurable: false,
790
+ enumerable: false,
791
+ writable: true,
792
+ value: normalizedStackTrace,
793
+ });
794
801
- let task: null | ConsoleTask = null;
802
- if (supportsCreateTask && stack !== null) {
803
- const createTaskFn = (console: any).createTask.bind(
804
- console,
805
- getTaskName(type),
806
- );
807
- const callStack = buildFakeCallStack(
808
- response,
809
- stack,
810
- env,
811
- createTaskFn,
812
- );
813
- // This owner should ideally have already been initialized to avoid getting
814
- // user stack frames on the stack.
815
- const ownerTask =
816
- owner === null ? null : initializeFakeTask(response, owner, env);
817
- if (ownerTask === null) {
818
- const rootTask = response._debugRootTask;
819
- if (rootTask != null) {
820
- task = rootTask.run(callStack);
821
- } else {
822
- task = callStack();
823
- }
795
+ let task: null | ConsoleTask = null;
796
+ if (supportsCreateTask && stack !== null) {
797
+ const createTaskFn = (console: any).createTask.bind(
798
+ console,
799
+ getTaskName(type),
800
+ );
801
+ const callStack = buildFakeCallStack(response, stack, env, createTaskFn);
802
+ // This owner should ideally have already been initialized to avoid getting
803
+ // user stack frames on the stack.
804
+ const ownerTask =
805
+ owner === null ? null : initializeFakeTask(response, owner, env);
806
+ if (ownerTask === null) {
807
+ const rootTask = response._debugRootTask;
808
+ if (rootTask != null) {
809
+ task = rootTask.run(callStack);
810
} else {
825
- task = ownerTask.run(callStack);
811
+ task = callStack();
812
}
813
+ } else {
814
+ task = ownerTask.run(callStack);
815
}
828
- Object.defineProperty(element, '_debugTask', {
829
- configurable: false,
830
- enumerable: false,
831
- writable: true,
832
- value: task,
833
- });
816
+ }
817
+ Object.defineProperty(element, '_debugTask', {
818
+ configurable: false,
819
+ enumerable: false,
820
+ writable: true,
821
+ value: task,
822
+ });
823
835
- // This owner should ideally have already been initialized to avoid getting
836
- // user stack frames on the stack.
837
- if (owner !== null) {
838
- initializeFakeStack(response, owner);
839
- }
824
+ // This owner should ideally have already been initialized to avoid getting
825
+ // user stack frames on the stack.
826
+ if (owner !== null) {
827
+ initializeFakeStack(response, owner);
828
}
829
}
830
@@ -863,13 +851,11 @@ function createElement(
851
name: getComponentNameFromType(element.type) || '',
852
owner: element._owner,
853
};
866
- if (enableOwnerStacks) {
854
+ // $FlowFixMe[cannot-write]
855
+ erroredComponent.debugStack = element._debugStack;
856
+ if (supportsCreateTask) {
857
// $FlowFixMe[cannot-write]
868
- erroredComponent.debugStack = element._debugStack;
869
- if (supportsCreateTask) {
870
- // $FlowFixMe[cannot-write]
871
- erroredComponent.debugTask = element._debugTask;
872
- }
858
+ erroredComponent.debugTask = element._debugTask;
859
}
860
erroredChunk._debugInfo = [erroredComponent];
861
}
@@ -1057,13 +1043,11 @@ function waitForReference<T>(
1043
name: getComponentNameFromType(element.type) || '',
1044
owner: element._owner,
1045
};
1060
- if (enableOwnerStacks) {
1046
+ // $FlowFixMe[cannot-write]
1047
+ erroredComponent.debugStack = element._debugStack;
1048
+ if (supportsCreateTask) {
1049
// $FlowFixMe[cannot-write]
1062
- erroredComponent.debugStack = element._debugStack;
1063
- if (supportsCreateTask) {
1064
- // $FlowFixMe[cannot-write]
1065
- erroredComponent.debugTask = element._debugTask;
1066
- }
1050
+ erroredComponent.debugTask = element._debugTask;
1051
}
1052
const chunkDebugInfo: ReactDebugInfo =
1053
chunk._debugInfo || (chunk._debugInfo = []);
@@ -1223,13 +1207,11 @@ function loadServerReference<A: Iterable<any>, T>(
1207
name: getComponentNameFromType(element.type) || '',
1208
owner: element._owner,
1209
};
1226
- if (enableOwnerStacks) {
1210
+ // $FlowFixMe[cannot-write]
1211
+ erroredComponent.debugStack = element._debugStack;
1212
+ if (supportsCreateTask) {
1213
// $FlowFixMe[cannot-write]
1228
- erroredComponent.debugStack = element._debugStack;
1229
- if (supportsCreateTask) {
1230
- // $FlowFixMe[cannot-write]
1231
- erroredComponent.debugTask = element._debugTask;
1232
- }
1214
+ erroredComponent.debugTask = element._debugTask;
1215
}
1216
const chunkDebugInfo: ReactDebugInfo =
1217
chunk._debugInfo || (chunk._debugInfo = []);
@@ -1609,8 +1591,8 @@ function parseModelTuple(
1591
tuple[2],
1592
tuple[3],
1593
__DEV__ ? (tuple: any)[4] : null,
1612
- __DEV__ && enableOwnerStacks ? (tuple: any)[5] : null,
1613
- __DEV__ && enableOwnerStacks ? (tuple: any)[6] : 0,
1594
+ __DEV__ ? (tuple: any)[5] : null,
1595
+ __DEV__ ? (tuple: any)[6] : 0,
1596
);
1597
}
1598
return value;
@@ -2083,27 +2065,6 @@ function stopStream(
2065
controller.close(row === '' ? '"$undefined"' : row);
2066
}
2067
2086
-function formatV8Stack(
2087
- errorName: string,
2088
- errorMessage: string,
2089
- stack: null | ReactStackTrace,
2090
-): string {
2091
- let v8StyleStack = errorName + ': ' + errorMessage;
2092
- if (stack) {
2093
- for (let i = 0; i < stack.length; i++) {
2094
- const frame = stack[i];
2095
- const [name, filename, line, col] = frame;
2096
- if (!name) {
2097
- v8StyleStack += '\n at ' + filename + ':' + line + ':' + col;
2098
- } else {
2099
- v8StyleStack +=
2100
- '\n at ' + name + ' (' + filename + ':' + line + ':' + col + ')';
2101
- }
2102
- }
2103
- }
2104
- return v8StyleStack;
2105
-}
2106
-
2068
type ErrorWithDigest = Error & {digest?: string};
2069
function resolveErrorProd(response: Response): Error {
2070
if (__DEV__) {
@@ -2202,34 +2163,20 @@ function resolvePostponeDev(
2163
);
2164
}
2165
let postponeInstance: Postpone;
2205
- if (!enableOwnerStacks) {
2206
- // Executing Error within a native stack isn't really limited to owner stacks
2207
- // but we gate it behind the same flag for now while iterating.
2208
- // eslint-disable-next-line react-internal/prod-error-codes
2209
- postponeInstance = (Error(reason || ''): any);
2210
- postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
2211
- // For backwards compat we use the V8 formatting when the flag is off.
2212
- postponeInstance.stack = formatV8Stack(
2213
- postponeInstance.name,
2214
- postponeInstance.message,
2215
- stack,
2216
- );
2166
+ const callStack = buildFakeCallStack(
2167
+ response,
2168
+ stack,
2169
+ env,
2170
+ // $FlowFixMe[incompatible-use]
2171
+ Error.bind(null, reason || ''),
2172
+ );
2173
+ const rootTask = response._debugRootTask;
2174
+ if (rootTask != null) {
2175
+ postponeInstance = rootTask.run(callStack);
2176
} else {
2218
- const callStack = buildFakeCallStack(
2219
- response,
2220
- stack,
2221
- env,
2222
- // $FlowFixMe[incompatible-use]
2223
- Error.bind(null, reason || ''),
2224
- );
2225
- const rootTask = response._debugRootTask;
2226
- if (rootTask != null) {
2227
- postponeInstance = rootTask.run(callStack);
2228
- } else {
2229
- postponeInstance = callStack();
2230
- }
2231
- postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
2177
+ postponeInstance = callStack();
2178
}
2179
+ postponeInstance.$$typeof = REACT_POSTPONE_TYPE;
2180
const chunks = response._chunks;
2181
const chunk = chunks.get(id);
2182
if (!chunk) {
@@ -2248,8 +2195,7 @@ function resolveHint<Code: HintCode>(
2195
dispatchHint(code, hintModel);
2196
}
2197
2251
-const supportsCreateTask =
2252
- __DEV__ && enableOwnerStacks && !!(console: any).createTask;
2198
+const supportsCreateTask = __DEV__ && !!(console: any).createTask;
2199
2200
type FakeFunction<T> = (() => T) => T;
2201
const fakeFunctionCache: Map<string, FakeFunction<any>> = __DEV__
@@ -2590,15 +2536,11 @@ function resolveDebugInfo(
2536
let currentOwnerInDEV: null | ReactComponentInfo = null;
2537
function getCurrentStackInDEV(): string {
2538
if (__DEV__) {
2593
- if (enableOwnerStacks) {
2594
- const owner: null | ReactComponentInfo = currentOwnerInDEV;
2595
- if (owner === null) {
2596
- return '';
2597
- }
2598
- return getOwnerStackByComponentInfoInDev(owner);
2539
+ const owner: null | ReactComponentInfo = currentOwnerInDEV;
2540
+ if (owner === null) {
2541
+ return '';
2542
}
2600
- // We don't have Parent Stacks in Flight.
2601
- return '';
2543
+ return getOwnerStackByComponentInfoInDev(owner);
2544
}
2545
return '';
2546
}
packages/react-client/src/__tests__/ReactFlight-test.js
+194
-447
@@ -321,9 +321,7 @@ describe('ReactFlight', () => {
321
env: 'Server',
322
key: null,
323
owner: null,
324
- stack: gate(flag => flag.enableOwnerStacks)
325
- ? ' in Object.<anonymous> (at **)'
326
- : undefined,
324
+ stack: ' in Object.<anonymous> (at **)',
325
props: {
326
firstName: 'Seb',
327
lastName: 'Smith',
@@ -367,9 +365,7 @@ describe('ReactFlight', () => {
365
env: 'Server',
366
key: null,
367
owner: null,
370
- stack: gate(flag => flag.enableOwnerStacks)
371
- ? ' in Object.<anonymous> (at **)'
372
- : undefined,
368
+ stack: ' in Object.<anonymous> (at **)',
369
props: {
370
firstName: 'Seb',
371
lastName: 'Smith',
@@ -1400,30 +1396,19 @@ describe('ReactFlight', () => {
1396
environmentName: 'Server',
1397
},
1398
],
1403
- findSourceMapURLCalls: gate(flags => flags.enableOwnerStacks)
1404
- ? [
1405
- [__filename, 'Server'],
1406
- [__filename, 'Server'],
1407
- // TODO: What should we request here? The outer (<anonymous>) or the inner (inspected-page.html)?
1408
- ['inspected-page.html:29:11), <anonymous>', 'Server'],
1409
- [
1410
- 'file://~/(some)(really)(exotic-directory)/ReactFlight-test.js',
1411
- 'Server',
1412
- ],
1413
- ['file:///testing.js', 'Server'],
1414
- ['', 'Server'],
1415
- [__filename, 'Server'],
1416
- ]
1417
- : [
1418
- // TODO: What should we request here? The outer (<anonymous>) or the inner (inspected-page.html)?
1419
- ['inspected-page.html:29:11), <anonymous>', 'Server'],
1420
- [
1421
- 'file://~/(some)(really)(exotic-directory)/ReactFlight-test.js',
1422
- 'Server',
1423
- ],
1424
- ['file:///testing.js', 'Server'],
1425
- ['', 'Server'],
1426
- ],
1399
+ findSourceMapURLCalls: [
1400
+ [__filename, 'Server'],
1401
+ [__filename, 'Server'],
1402
+ // TODO: What should we request here? The outer (<anonymous>) or the inner (inspected-page.html)?
1403
+ ['inspected-page.html:29:11), <anonymous>', 'Server'],
1404
+ [
1405
+ 'file://~/(some)(really)(exotic-directory)/ReactFlight-test.js',
1406
+ 'Server',
1407
+ ],
1408
+ ['file:///testing.js', 'Server'],
1409
+ ['', 'Server'],
1410
+ [__filename, 'Server'],
1411
+ ],
1412
});
1413
} else {
1414
expect(errors.map(getErrorForJestMatcher)).toEqual([
@@ -1475,9 +1460,6 @@ describe('ReactFlight', () => {
1460
'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
1461
' in span (at **)\n' +
1462
' in Component (at **)\n' +
1478
- (gate(flags => flags.enableOwnerStacks)
1479
- ? ''
1480
- : ' in Indirection (at **)\n') +
1463
' in App (at **)',
1464
]);
1465
});
@@ -1538,46 +1520,26 @@ describe('ReactFlight', () => {
1520
},
1521
};
1522
const transport = ReactNoopFlightServer.render(<input value={obj} />);
1541
- if (gate(flags => flags.enableOwnerStacks)) {
1542
- assertConsoleErrorDev(
1543
- [
1544
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1545
- 'Objects with toJSON methods are not supported. ' +
1546
- 'Convert it manually to a simple value before passing it to props.\n' +
1547
- ' <input value={{toJSON: ...}}>\n' +
1548
- ' ^^^^^^^^^^^^^^^',
1549
- ],
1550
- {withoutStack: true},
1551
- );
1552
- }
1553
-
1554
- ReactNoopFlightClient.read(transport);
1555
- if (gate(flags => flags.enableOwnerStacks)) {
1556
- assertConsoleErrorDev([
1523
+ assertConsoleErrorDev(
1524
+ [
1525
'Only plain objects can be passed to Client Components from Server Components. ' +
1526
'Objects with toJSON methods are not supported. ' +
1527
'Convert it manually to a simple value before passing it to props.\n' +
1528
' <input value={{toJSON: ...}}>\n' +
1561
- ' ^^^^^^^^^^^^^^^\n' +
1562
- ' at (<anonymous>)',
1563
- ]);
1564
- } else {
1565
- assertConsoleErrorDev(
1566
- [
1567
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1568
- 'Objects with toJSON methods are not supported. ' +
1569
- 'Convert it manually to a simple value before passing it to props.\n' +
1570
- ' <input value={{toJSON: ...}}>\n' +
1571
- ' ^^^^^^^^^^^^^^^',
1572
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1573
- 'Objects with toJSON methods are not supported. ' +
1574
- 'Convert it manually to a simple value before passing it to props.\n' +
1575
- ' <input value={{toJSON: ...}}>\n' +
1576
- ' ^^^^^^^^^^^^^^^',
1577
- ],
1578
- {withoutStack: true},
1579
- );
1580
- }
1529
+ ' ^^^^^^^^^^^^^^^',
1530
+ ],
1531
+ {withoutStack: true},
1532
+ );
1533
+
1534
+ ReactNoopFlightClient.read(transport);
1535
+ assertConsoleErrorDev([
1536
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1537
+ 'Objects with toJSON methods are not supported. ' +
1538
+ 'Convert it manually to a simple value before passing it to props.\n' +
1539
+ ' <input value={{toJSON: ...}}>\n' +
1540
+ ' ^^^^^^^^^^^^^^^\n' +
1541
+ ' at (<anonymous>)',
1542
+ ]);
1543
});
1544
1545
it('should warn in DEV if a toJSON instance is passed to a host component child', () => {
@@ -1589,120 +1551,68 @@ describe('ReactFlight', () => {
1551
const transport = ReactNoopFlightServer.render(
1552
<div>Womp womp: {new MyError('spaghetti')}</div>,
1553
);
1592
- if (gate(flags => flags.enableOwnerStacks)) {
1593
- assertConsoleErrorDev(
1594
- [
1595
- 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
1596
- ' <div>Womp womp: {Error}</div>\n' +
1597
- ' ^^^^^^^',
1598
- ],
1599
- {withoutStack: true},
1600
- );
1601
- }
1602
-
1603
- ReactNoopFlightClient.read(transport);
1604
- if (gate(flags => flags.enableOwnerStacks)) {
1605
- assertConsoleErrorDev([
1554
+ assertConsoleErrorDev(
1555
+ [
1556
'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
1557
' <div>Womp womp: {Error}</div>\n' +
1608
- ' ^^^^^^^\n' +
1609
- ' at (<anonymous>)',
1610
- ]);
1611
- } else {
1612
- assertConsoleErrorDev(
1613
- [
1614
- 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
1615
- ' <div>Womp womp: {Error}</div>\n' +
1616
- ' ^^^^^^^',
1617
- 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
1618
- ' <div>Womp womp: {Error}</div>\n' +
1619
- ' ^^^^^^^',
1620
- ],
1621
- {withoutStack: true},
1622
- );
1623
- }
1558
+ ' ^^^^^^^',
1559
+ ],
1560
+ {withoutStack: true},
1561
+ );
1562
+
1563
+ ReactNoopFlightClient.read(transport);
1564
+ assertConsoleErrorDev([
1565
+ 'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
1566
+ ' <div>Womp womp: {Error}</div>\n' +
1567
+ ' ^^^^^^^\n' +
1568
+ ' at (<anonymous>)',
1569
+ ]);
1570
});
1571
1572
it('should warn in DEV if a special object is passed to a host component', () => {
1573
const transport = ReactNoopFlightServer.render(<input value={Math} />);
1628
- if (gate(flags => flags.enableOwnerStacks)) {
1629
- assertConsoleErrorDev(
1630
- [
1631
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1632
- 'Math objects are not supported.\n' +
1633
- ' <input value={Math}>\n' +
1634
- ' ^^^^^^',
1635
- ],
1636
- {withoutStack: true},
1637
- );
1638
- }
1639
-
1640
- ReactNoopFlightClient.read(transport);
1641
- if (gate(flags => flags.enableOwnerStacks)) {
1642
- assertConsoleErrorDev([
1574
+ assertConsoleErrorDev(
1575
+ [
1576
'Only plain objects can be passed to Client Components from Server Components. ' +
1577
'Math objects are not supported.\n' +
1578
' <input value={Math}>\n' +
1646
- ' ^^^^^^\n' +
1647
- ' at (<anonymous>)',
1648
- ]);
1649
- } else {
1650
- assertConsoleErrorDev(
1651
- [
1652
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1653
- 'Math objects are not supported.\n' +
1654
- ' <input value={Math}>\n' +
1655
- ' ^^^^^^',
1656
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1657
- 'Math objects are not supported.\n' +
1658
- ' <input value={Math}>\n' +
1659
- ' ^^^^^^',
1660
- ],
1661
- {withoutStack: true},
1662
- );
1663
- }
1579
+ ' ^^^^^^',
1580
+ ],
1581
+ {withoutStack: true},
1582
+ );
1583
+
1584
+ ReactNoopFlightClient.read(transport);
1585
+ assertConsoleErrorDev([
1586
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1587
+ 'Math objects are not supported.\n' +
1588
+ ' <input value={Math}>\n' +
1589
+ ' ^^^^^^\n' +
1590
+ ' at (<anonymous>)',
1591
+ ]);
1592
});
1593
1594
it('should warn in DEV if an object with symbols is passed to a host component', () => {
1595
const transport = ReactNoopFlightServer.render(
1596
<input value={{[Symbol.iterator]: {}}} />,
1597
);
1670
- if (gate(flags => flags.enableOwnerStacks)) {
1671
- assertConsoleErrorDev(
1672
- [
1673
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1674
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1675
- ' <input value={{}}>\n' +
1676
- ' ^^^^',
1677
- ],
1678
- {withoutStack: true},
1679
- );
1680
- }
1681
-
1682
- ReactNoopFlightClient.read(transport);
1683
- if (gate(flags => flags.enableOwnerStacks)) {
1684
- assertConsoleErrorDev([
1598
+ assertConsoleErrorDev(
1599
+ [
1600
'Only plain objects can be passed to Client Components from Server Components. ' +
1601
'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1602
' <input value={{}}>\n' +
1688
- ' ^^^^\n' +
1689
- ' at (<anonymous>)',
1690
- ]);
1691
- } else {
1692
- assertConsoleErrorDev(
1693
- [
1694
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1695
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1696
- ' <input value={{}}>\n' +
1697
- ' ^^^^',
1698
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1699
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1700
- ' <input value={{}}>\n' +
1701
- ' ^^^^',
1702
- ],
1703
- {withoutStack: true},
1704
- );
1705
- }
1603
+ ' ^^^^',
1604
+ ],
1605
+ {withoutStack: true},
1606
+ );
1607
+
1608
+ ReactNoopFlightClient.read(transport);
1609
+ assertConsoleErrorDev([
1610
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1611
+ 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1612
+ ' <input value={{}}>\n' +
1613
+ ' ^^^^\n' +
1614
+ ' at (<anonymous>)',
1615
+ ]);
1616
});
1617
1618
it('should warn in DEV if a toJSON instance is passed to a Client Component', () => {
@@ -1716,46 +1626,26 @@ describe('ReactFlight', () => {
1626
}
1627
const Client = clientReference(ClientImpl);
1628
const transport = ReactNoopFlightServer.render(<Client value={obj} />);
1719
- if (gate(flags => flags.enableOwnerStacks)) {
1720
- assertConsoleErrorDev(
1721
- [
1722
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1723
- 'Objects with toJSON methods are not supported. ' +
1724
- 'Convert it manually to a simple value before passing it to props.\n' +
1725
- ' <... value={{toJSON: ...}}>\n' +
1726
- ' ^^^^^^^^^^^^^^^',
1727
- ],
1728
- {withoutStack: true},
1729
- );
1730
- }
1731
-
1732
- ReactNoopFlightClient.read(transport);
1733
- if (gate(flags => flags.enableOwnerStacks)) {
1734
- assertConsoleErrorDev([
1629
+ assertConsoleErrorDev(
1630
+ [
1631
'Only plain objects can be passed to Client Components from Server Components. ' +
1632
'Objects with toJSON methods are not supported. ' +
1633
'Convert it manually to a simple value before passing it to props.\n' +
1634
' <... value={{toJSON: ...}}>\n' +
1739
- ' ^^^^^^^^^^^^^^^\n' +
1740
- ' at (<anonymous>)',
1741
- ]);
1742
- } else {
1743
- assertConsoleErrorDev(
1744
- [
1745
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1746
- 'Objects with toJSON methods are not supported. ' +
1747
- 'Convert it manually to a simple value before passing it to props.\n' +
1748
- ' <... value={{toJSON: ...}}>\n' +
1749
- ' ^^^^^^^^^^^^^^^',
1750
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1751
- 'Objects with toJSON methods are not supported. ' +
1752
- 'Convert it manually to a simple value before passing it to props.\n' +
1753
- ' <... value={{toJSON: ...}}>\n' +
1754
- ' ^^^^^^^^^^^^^^^',
1755
- ],
1756
- {withoutStack: true},
1757
- );
1758
- }
1635
+ ' ^^^^^^^^^^^^^^^',
1636
+ ],
1637
+ {withoutStack: true},
1638
+ );
1639
+
1640
+ ReactNoopFlightClient.read(transport);
1641
+ assertConsoleErrorDev([
1642
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1643
+ 'Objects with toJSON methods are not supported. ' +
1644
+ 'Convert it manually to a simple value before passing it to props.\n' +
1645
+ ' <... value={{toJSON: ...}}>\n' +
1646
+ ' ^^^^^^^^^^^^^^^\n' +
1647
+ ' at (<anonymous>)',
1648
+ ]);
1649
});
1650
1651
it('should warn in DEV if a toJSON instance is passed to a Client Component child', () => {
@@ -1771,46 +1661,26 @@ describe('ReactFlight', () => {
1661
const transport = ReactNoopFlightServer.render(
1662
<Client>Current date: {obj}</Client>,
1663
);
1774
- if (gate(flags => flags.enableOwnerStacks)) {
1775
- assertConsoleErrorDev(
1776
- [
1777
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1778
- 'Objects with toJSON methods are not supported. ' +
1779
- 'Convert it manually to a simple value before passing it to props.\n' +
1780
- ' <>Current date: {{toJSON: ...}}</>\n' +
1781
- ' ^^^^^^^^^^^^^^^',
1782
- ],
1783
- {withoutStack: true},
1784
- );
1785
- }
1786
-
1787
- ReactNoopFlightClient.read(transport);
1788
- if (gate(flags => flags.enableOwnerStacks)) {
1789
- assertConsoleErrorDev([
1664
+ assertConsoleErrorDev(
1665
+ [
1666
'Only plain objects can be passed to Client Components from Server Components. ' +
1667
'Objects with toJSON methods are not supported. ' +
1668
'Convert it manually to a simple value before passing it to props.\n' +
1669
' <>Current date: {{toJSON: ...}}</>\n' +
1794
- ' ^^^^^^^^^^^^^^^\n' +
1795
- ' at (<anonymous>)',
1796
- ]);
1797
- } else {
1798
- assertConsoleErrorDev(
1799
- [
1800
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1801
- 'Objects with toJSON methods are not supported. ' +
1802
- 'Convert it manually to a simple value before passing it to props.\n' +
1803
- ' <>Current date: {{toJSON: ...}}</>\n' +
1804
- ' ^^^^^^^^^^^^^^^',
1805
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1806
- 'Objects with toJSON methods are not supported. ' +
1807
- 'Convert it manually to a simple value before passing it to props.\n' +
1808
- ' <>Current date: {{toJSON: ...}}</>\n' +
1809
- ' ^^^^^^^^^^^^^^^',
1810
- ],
1811
- {withoutStack: true},
1812
- );
1813
- }
1670
+ ' ^^^^^^^^^^^^^^^',
1671
+ ],
1672
+ {withoutStack: true},
1673
+ );
1674
+
1675
+ ReactNoopFlightClient.read(transport);
1676
+ assertConsoleErrorDev([
1677
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1678
+ 'Objects with toJSON methods are not supported. ' +
1679
+ 'Convert it manually to a simple value before passing it to props.\n' +
1680
+ ' <>Current date: {{toJSON: ...}}</>\n' +
1681
+ ' ^^^^^^^^^^^^^^^\n' +
1682
+ ' at (<anonymous>)',
1683
+ ]);
1684
});
1685
1686
it('should warn in DEV if a special object is passed to a Client Component', () => {
@@ -1819,43 +1689,24 @@ describe('ReactFlight', () => {
1689
}
1690
const Client = clientReference(ClientImpl);
1691
const transport = ReactNoopFlightServer.render(<Client value={Math} />);
1822
-
1823
- if (gate(flags => flags.enableOwnerStacks)) {
1824
- assertConsoleErrorDev(
1825
- [
1826
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1827
- 'Math objects are not supported.\n' +
1828
- ' <... value={Math}>\n' +
1829
- ' ^^^^^^',
1830
- ],
1831
- {withoutStack: true},
1832
- );
1833
- }
1834
-
1835
- ReactNoopFlightClient.read(transport);
1836
- if (gate(flags => flags.enableOwnerStacks)) {
1837
- assertConsoleErrorDev([
1692
+ assertConsoleErrorDev(
1693
+ [
1694
'Only plain objects can be passed to Client Components from Server Components. ' +
1695
'Math objects are not supported.\n' +
1696
' <... value={Math}>\n' +
1841
- ' ^^^^^^\n' +
1842
- ' at (<anonymous>)',
1843
- ]);
1844
- } else {
1845
- assertConsoleErrorDev(
1846
- [
1847
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1848
- 'Math objects are not supported.\n' +
1849
- ' <... value={Math}>\n' +
1850
- ' ^^^^^^',
1851
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1852
- 'Math objects are not supported.\n' +
1853
- ' <... value={Math}>\n' +
1854
- ' ^^^^^^',
1855
- ],
1856
- {withoutStack: true},
1857
- );
1858
- }
1697
+ ' ^^^^^^',
1698
+ ],
1699
+ {withoutStack: true},
1700
+ );
1701
+
1702
+ ReactNoopFlightClient.read(transport);
1703
+ assertConsoleErrorDev([
1704
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1705
+ 'Math objects are not supported.\n' +
1706
+ ' <... value={Math}>\n' +
1707
+ ' ^^^^^^\n' +
1708
+ ' at (<anonymous>)',
1709
+ ]);
1710
});
1711
1712
it('should warn in DEV if an object with symbols is passed to a Client Component', () => {
@@ -1867,42 +1718,24 @@ describe('ReactFlight', () => {
1718
const transport = ReactNoopFlightServer.render(
1719
<Client value={{[Symbol.iterator]: {}}} />,
1720
);
1870
- if (gate(flags => flags.enableOwnerStacks)) {
1871
- assertConsoleErrorDev(
1872
- [
1873
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1874
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1875
- ' <... value={{}}>\n' +
1876
- ' ^^^^',
1877
- ],
1878
- {withoutStack: true},
1879
- );
1880
- }
1881
-
1882
- ReactNoopFlightClient.read(transport);
1883
-
1884
- if (gate(flags => flags.enableOwnerStacks)) {
1885
- assertConsoleErrorDev([
1721
+ assertConsoleErrorDev(
1722
+ [
1723
'Only plain objects can be passed to Client Components from Server Components. ' +
1724
'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1725
' <... value={{}}>\n' +
1889
- ' ^^^^\n',
1890
- ]);
1891
- } else {
1892
- assertConsoleErrorDev(
1893
- [
1894
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1895
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1896
- ' <... value={{}}>\n' +
1897
- ' ^^^^',
1898
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1899
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1900
- ' <... value={{}}>\n' +
1901
- ' ^^^^',
1902
- ],
1903
- {withoutStack: true},
1904
- );
1905
- }
1726
+ ' ^^^^',
1727
+ ],
1728
+ {withoutStack: true},
1729
+ );
1730
+
1731
+ ReactNoopFlightClient.read(transport);
1732
+
1733
+ assertConsoleErrorDev([
1734
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1735
+ 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1736
+ ' <... value={{}}>\n' +
1737
+ ' ^^^^\n',
1738
+ ]);
1739
});
1740
1741
it('should warn in DEV if a special object is passed to a nested object in Client Component', () => {
@@ -1915,36 +1748,20 @@ describe('ReactFlight', () => {
1748
);
1749
ReactNoopFlightClient.read(transport);
1750
1918
- if (gate(flags => flags.enableOwnerStacks)) {
1919
- assertConsoleErrorDev([
1920
- [
1921
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1922
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1923
- ' <... value={{}}>\n' +
1924
- ' ^^^^',
1925
- {withoutStack: true},
1926
- ],
1751
+ assertConsoleErrorDev([
1752
+ [
1753
'Only plain objects can be passed to Client Components from Server Components. ' +
1754
'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1755
' <... value={{}}>\n' +
1930
- ' ^^^^\n' +
1931
- ' at (<anonymous>)',
1932
- ]);
1933
- } else {
1934
- assertConsoleErrorDev(
1935
- [
1936
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1937
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1938
- ' <... value={{}}>\n' +
1939
- ' ^^^^',
1940
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1941
- 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1942
- ' <... value={{}}>\n' +
1943
- ' ^^^^',
1944
- ],
1756
+ ' ^^^^',
1757
{withoutStack: true},
1946
- );
1947
- }
1758
+ ],
1759
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1760
+ 'Objects with symbol properties like Symbol.iterator are not supported.\n' +
1761
+ ' <... value={{}}>\n' +
1762
+ ' ^^^^\n' +
1763
+ ' at (<anonymous>)',
1764
+ ]);
1765
});
1766
1767
it('should warn in DEV if a special object is passed to a nested array in Client Component', () => {
@@ -1956,36 +1773,20 @@ describe('ReactFlight', () => {
1773
<Client value={['looooong string takes up noise', Math, <h1>hi</h1>]} />,
1774
);
1775
ReactNoopFlightClient.read(transport);
1959
- if (gate(flags => flags.enableOwnerStacks)) {
1960
- assertConsoleErrorDev([
1961
- [
1962
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1963
- 'Math objects are not supported.\n' +
1964
- ' [..., Math, <h1/>]\n' +
1965
- ' ^^^^',
1966
- {withoutStack: true},
1967
- ],
1776
+ assertConsoleErrorDev([
1777
+ [
1778
'Only plain objects can be passed to Client Components from Server Components. ' +
1779
'Math objects are not supported.\n' +
1780
' [..., Math, <h1/>]\n' +
1971
- ' ^^^^\n' +
1972
- ' at (<anonymous>)',
1973
- ]);
1974
- } else {
1975
- assertConsoleErrorDev(
1976
- [
1977
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1978
- 'Math objects are not supported.\n' +
1979
- ' [..., Math, <h1/>]\n' +
1980
- ' ^^^^',
1981
- 'Only plain objects can be passed to Client Components from Server Components. ' +
1982
- 'Math objects are not supported.\n' +
1983
- ' [..., Math, <h1/>]\n' +
1984
- ' ^^^^',
1985
- ],
1781
+ ' ^^^^',
1782
{withoutStack: true},
1987
- );
1988
- }
1783
+ ],
1784
+ 'Only plain objects can be passed to Client Components from Server Components. ' +
1785
+ 'Math objects are not supported.\n' +
1786
+ ' [..., Math, <h1/>]\n' +
1787
+ ' ^^^^\n' +
1788
+ ' at (<anonymous>)',
1789
+ ]);
1790
});
1791
1792
it('should NOT warn in DEV for key getters', () => {
@@ -2012,26 +1813,16 @@ describe('ReactFlight', () => {
1813
jest.resetModules();
1814
jest.mock('react', () => React);
1815
ReactNoopFlightClient.read(transport);
2015
- if (gate(flags => flags.enableOwnerStacks)) {
2016
- assertConsoleErrorDev([
2017
- 'Each child in a list should have a unique "key" prop. ' +
2018
- 'See https://react.dev/link/warning-keys for more information.\n' +
2019
- ' in NoKey (at **)',
2020
- 'Each child in a list should have a unique "key" prop. ' +
2021
- 'See https://react.dev/link/warning-keys for more information.\n' +
2022
- ' in NoKey (at **)',
2023
- ]);
2024
- } else {
2025
- assertConsoleErrorDev([
2026
- 'Each child in a list should have a unique "key" prop.\n\n' +
2027
- 'Check the top-level render call using <div>. ' +
2028
- 'See https://react.dev/link/warning-keys for more information.\n' +
2029
- ' in NoKey (at **)',
2030
- ]);
2031
- }
1816
+ assertConsoleErrorDev([
1817
+ 'Each child in a list should have a unique "key" prop. ' +
1818
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1819
+ ' in NoKey (at **)',
1820
+ 'Each child in a list should have a unique "key" prop. ' +
1821
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1822
+ ' in NoKey (at **)',
1823
+ ]);
1824
});
1825
2034
- // @gate !__DEV__ || enableOwnerStacks
1826
it('should warn in DEV a child is missing keys on a fragment', () => {
1827
// While we're on the server we need to have the Server version active to track component stacks.
1828
jest.resetModules();
@@ -2046,23 +1837,14 @@ describe('ReactFlight', () => {
1837
jest.resetModules();
1838
jest.mock('react', () => React);
1839
ReactNoopFlightClient.read(transport);
2049
- if (gate(flags => flags.enableOwnerStacks)) {
2050
- assertConsoleErrorDev([
2051
- 'Each child in a list should have a unique "key" prop. ' +
2052
- 'See https://react.dev/link/warning-keys for more information.\n' +
2053
- ' in Fragment (at **)',
2054
- 'Each child in a list should have a unique "key" prop. ' +
2055
- 'See https://react.dev/link/warning-keys for more information.\n' +
2056
- ' in Fragment (at **)',
2057
- ]);
2058
- } else {
2059
- assertConsoleErrorDev([
2060
- 'Each child in a list should have a unique "key" prop.\n\n' +
2061
- 'Check the top-level render call using <div>. ' +
2062
- 'See https://react.dev/link/warning-keys for more information.\n' +
2063
- ' in Fragment (at **)',
2064
- ]);
2065
- }
1840
+ assertConsoleErrorDev([
1841
+ 'Each child in a list should have a unique "key" prop. ' +
1842
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1843
+ ' in Fragment (at **)',
1844
+ 'Each child in a list should have a unique "key" prop. ' +
1845
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1846
+ ' in Fragment (at **)',
1847
+ ]);
1848
});
1849
1850
it('should warn in DEV a child is missing keys in client component', async () => {
@@ -2079,20 +1861,12 @@ describe('ReactFlight', () => {
1861
1862
ReactNoop.render(await ReactNoopFlightClient.read(transport));
1863
});
2082
- if (gate(flags => flags.enableOwnerStacks)) {
2083
- assertConsoleErrorDev([
2084
- 'Each child in a list should have a unique "key" prop.\n\n' +
2085
- 'Check the top-level render call using <ParentClient>. ' +
2086
- 'See https://react.dev/link/warning-keys for more information.\n' +
2087
- ' in div (at **)',
2088
- ]);
2089
- } else {
2090
- assertConsoleErrorDev([
2091
- 'Each child in a list should have a unique "key" prop. ' +
2092
- 'See https://react.dev/link/warning-keys for more information.\n' +
2093
- ' in div (at **)',
2094
- ]);
2095
- }
1864
+ assertConsoleErrorDev([
1865
+ 'Each child in a list should have a unique "key" prop.\n\n' +
1866
+ 'Check the top-level render call using <ParentClient>. ' +
1867
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1868
+ ' in div (at **)',
1869
+ ]);
1870
});
1871
1872
it('should error if a class instance is passed to a host component', () => {
@@ -3039,9 +2813,7 @@ describe('ReactFlight', () => {
2813
env: 'Server',
2814
key: null,
2815
owner: null,
3042
- stack: gate(flag => flag.enableOwnerStacks)
3043
- ? ' in Object.<anonymous> (at **)'
3044
- : undefined,
2816
+ stack: ' in Object.<anonymous> (at **)',
2817
props: {
2818
transport: expect.arrayContaining([]),
2819
},
@@ -3063,9 +2835,7 @@ describe('ReactFlight', () => {
2835
env: 'third-party',
2836
key: null,
2837
owner: null,
3066
- stack: gate(flag => flag.enableOwnerStacks)
3067
- ? ' in Object.<anonymous> (at **)'
3068
- : undefined,
2838
+ stack: ' in Object.<anonymous> (at **)',
2839
props: {},
2840
},
2841
{time: 14},
@@ -3082,9 +2852,7 @@ describe('ReactFlight', () => {
2852
env: 'third-party',
2853
key: null,
2854
owner: null,
3085
- stack: gate(flag => flag.enableOwnerStacks)
3086
- ? ' in myLazy (at **)\n in lazyInitializer (at **)'
3087
- : undefined,
2855
+ stack: ' in myLazy (at **)\n in lazyInitializer (at **)',
2856
props: {},
2857
},
2858
{time: 16},
@@ -3100,9 +2868,7 @@ describe('ReactFlight', () => {
2868
env: 'third-party',
2869
key: '3',
2870
owner: null,
3103
- stack: gate(flag => flag.enableOwnerStacks)
3104
- ? ' in Object.<anonymous> (at **)'
3105
- : undefined,
2871
+ stack: ' in Object.<anonymous> (at **)',
2872
props: {},
2873
},
2874
{time: 12},
@@ -3176,9 +2942,7 @@ describe('ReactFlight', () => {
2942
env: 'Server',
2943
key: null,
2944
owner: null,
3179
- stack: gate(flag => flag.enableOwnerStacks)
3180
- ? ' in Object.<anonymous> (at **)'
3181
- : undefined,
2945
+ stack: ' in Object.<anonymous> (at **)',
2946
props: {
2947
transport: expect.arrayContaining([]),
2948
},
@@ -3198,9 +2962,7 @@ describe('ReactFlight', () => {
2962
env: 'Server',
2963
key: 'keyed',
2964
owner: null,
3201
- stack: gate(flag => flag.enableOwnerStacks)
3202
- ? ' in ServerComponent (at **)'
3203
- : undefined,
2965
+ stack: ' in ServerComponent (at **)',
2966
props: {
2967
children: {},
2968
},
@@ -3219,9 +2981,7 @@ describe('ReactFlight', () => {
2981
env: 'third-party',
2982
key: null,
2983
owner: null,
3222
- stack: gate(flag => flag.enableOwnerStacks)
3223
- ? ' in Object.<anonymous> (at **)'
3224
- : undefined,
2984
+ stack: ' in Object.<anonymous> (at **)',
2985
props: {},
2986
},
2987
{time: 12},
@@ -3335,19 +3095,13 @@ describe('ReactFlight', () => {
3095
});
3096
3097
expect(sawReactPrefix).toBe(false);
3338
- if (__DEV__ && gate(flags => flags.enableOwnerStacks)) {
3098
+ if (__DEV__) {
3099
expect(environments.slice(0, 4)).toEqual([
3100
'Server',
3101
'third-party',
3102
'third-party',
3103
'third-party',
3104
]);
3345
- } else if (__DEV__) {
3346
- expect(environments.slice(0, 3)).toEqual([
3347
- 'third-party',
3348
- 'third-party',
3349
- 'third-party',
3350
- ]);
3105
} else {
3106
expect(environments).toEqual([]);
3107
}
@@ -3384,9 +3138,7 @@ describe('ReactFlight', () => {
3138
env: 'A',
3139
key: null,
3140
owner: null,
3387
- stack: gate(flag => flag.enableOwnerStacks)
3388
- ? ' in Object.<anonymous> (at **)'
3389
- : undefined,
3141
+ stack: ' in Object.<anonymous> (at **)',
3142
props: {},
3143
},
3144
{
@@ -3402,7 +3154,7 @@ describe('ReactFlight', () => {
3154
expect(ReactNoop).toMatchRenderedOutput(<div>hi</div>);
3155
});
3156
3405
- // @gate __DEV__ && enableOwnerStacks
3157
+ // @gate __DEV__
3158
it('replays logs, but not onError logs', async () => {
3159
function foo() {
3160
return 'hello';
@@ -3574,9 +3326,7 @@ describe('ReactFlight', () => {
3326
env: 'Server',
3327
key: null,
3328
owner: null,
3577
- stack: gate(flag => flag.enableOwnerStacks)
3578
- ? ' in Object.<anonymous> (at **)'
3579
- : undefined,
3329
+ stack: ' in Object.<anonymous> (at **)',
3330
props: {
3331
firstName: 'Seb',
3332
},
@@ -3590,9 +3340,7 @@ describe('ReactFlight', () => {
3340
env: 'Server',
3341
key: null,
3342
owner: greetInfo,
3593
- stack: gate(flag => flag.enableOwnerStacks)
3594
- ? ' in Greeting (at **)'
3595
- : undefined,
3343
+ stack: ' in Greeting (at **)',
3344
props: {
3345
children: expect.objectContaining({
3346
type: 'span',
@@ -3617,7 +3365,7 @@ describe('ReactFlight', () => {
3365
expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb</span>);
3366
});
3367
3620
- // @gate __DEV__ && enableOwnerStacks
3368
+ // @gate __DEV__
3369
it('can get the component owner stacks during rendering in dev', () => {
3370
let stack;
3371
@@ -3649,7 +3397,7 @@ describe('ReactFlight', () => {
3397
);
3398
});
3399
3652
- // @gate __DEV__ && enableOwnerStacks
3400
+ // @gate __DEV__
3401
it('can track owner for a flight response created in another render', async () => {
3402
jest.resetModules();
3403
jest.mock('react', () => ReactServer);
@@ -3712,7 +3460,7 @@ describe('ReactFlight', () => {
3460
);
3461
});
3462
3715
- // @gate __DEV__ && enableOwnerStacks
3463
+ // @gate __DEV__
3464
it('can get the component owner stacks for onError in dev', async () => {
3465
const thrownError = new Error('hi');
3466
let caughtError;
@@ -3754,7 +3502,6 @@ describe('ReactFlight', () => {
3502
);
3503
});
3504
3757
- // @gate (enableOwnerStacks) || !__DEV__
3505
it('should include only one component stack in replayed logs (if DevTools or polyfill adds them)', () => {
3506
class MyError extends Error {
3507
toJSON() {
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+1
-4
@@ -2347,10 +2347,7 @@ describe('ReactHooksInspectionIntegration', () => {
2347
2348
await act(async () => await LazyFoo);
2349
assertConsoleErrorDev([
2350
- 'Foo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.' +
2351
- (gate(flags => flags.enableOwnerStacks)
2352
- ? ''
2353
- : '\n in Foo (at **)\n' + ' in Suspense (at **)'),
2350
+ 'Foo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
2351
]);
2352
2353
const childFiber = renderer.root._currentFiber();
packages/react-devtools-shared/src/backend/profilingHooks.js
+1
-1
@@ -917,7 +917,7 @@ export function createProfilingHooks({
917
// Creating a cache of component stacks won't help, generating a single stack is already expensive enough.
918
// We should find a way to lazily generate component stacks on demand, when user inspects a specific event.
919
// If we succeed with moving React DevTools Timeline Profiler to Performance panel, then Timeline Profiler would probably be removed.
920
- // If not, then once enableOwnerStacks is adopted, revisit this again and cache component stacks per Fiber,
920
+ // Now that owner stacks are adopted, revisit this again and cache component stacks per Fiber,
921
// but only return them when needed, sending hundreds of component stacks is beyond the Bridge's bandwidth.
922
923
// Postprocess Profile data
packages/react-dom-bindings/src/client/validateDOMNesting.js
+1
-3
@@ -10,8 +10,6 @@
10
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
11
import type {HydrationDiffNode} from 'react-reconciler/src/ReactFiberHydrationDiffs';
12
13
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
14
-
13
import {
14
current,
15
runWithFiberInDEV,
@@ -615,7 +613,7 @@ function validateDOMNesting(
613
ancestorDescription,
614
);
615
}
618
- if (enableOwnerStacks && child) {
616
+ if (child) {
617
// For debugging purposes find the nearest ancestor that caused the issue.
618
// The stack trace of this ancestor can be useful to find the cause.
619
// If the parent is a direct parent in the same owner, we don't bother.
packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
+2
-3
@@ -52,7 +52,6 @@ import {
52
enableLegacyFBSupport,
53
enableCreateEventHandleAPI,
54
enableScopeAPI,
55
- enableOwnerStacks,
55
disableCommentsAsDOMContainers,
56
enableScrollEndPolyfill,
57
} from 'shared/ReactFeatureFlags';
@@ -275,7 +274,7 @@ function processDispatchQueueItemsInOrder(
274
if (instance !== previousInstance && event.isPropagationStopped()) {
275
return;
276
}
278
- if (__DEV__ && enableOwnerStacks && instance !== null) {
277
+ if (__DEV__ && instance !== null) {
278
runWithFiberInDEV(
279
instance,
280
executeDispatch,
@@ -294,7 +293,7 @@ function processDispatchQueueItemsInOrder(
293
if (instance !== previousInstance && event.isPropagationStopped()) {
294
return;
295
}
297
- if (__DEV__ && enableOwnerStacks && instance !== null) {
296
+ if (__DEV__ && instance !== null) {
297
runWithFiberInDEV(
298
instance,
299
executeDispatch,
packages/react-dom/src/__tests__/ReactChildReconciler-test.js
+1
-12
@@ -75,8 +75,7 @@ describe('ReactChildReconciler', () => {
75
'This may happen if you return fn instead of <fn /> from render. ' +
76
'Or maybe you meant to call this function rather than return it.\n' +
77
' <h1>{fn}</h1>\n' +
78
- ' in h1 (at **)' +
79
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
78
+ ' in h1 (at **)',
79
]);
80
const node = container.firstChild;
81
@@ -100,7 +99,6 @@ describe('ReactChildReconciler', () => {
99
'Keys should be unique so that components maintain their identity across updates. ' +
100
'Non-unique keys may cause children to be duplicated and/or omitted — ' +
101
'the behavior is unsupported and could change in a future version.\n' +
103
- (gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
102
' in div (at **)\n' +
103
' in Component (at **)',
104
]);
@@ -137,11 +135,7 @@ describe('ReactChildReconciler', () => {
135
'duplicated and/or omitted — the behavior is unsupported and ' +
136
'could change in a future version.\n' +
137
' in div (at **)\n' +
140
- (gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
138
' in Component (at **)\n' +
142
- (gate(flags => flags.enableOwnerStacks)
143
- ? ''
144
- : ' in Parent (at **)\n') +
139
' in GrandParent (at **)',
140
]);
141
});
@@ -165,7 +159,6 @@ describe('ReactChildReconciler', () => {
159
'duplicated and/or omitted — the behavior is unsupported and ' +
160
'could change in a future version.\n' +
161
' in div (at **)\n' +
168
- (gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
162
' in Component (at **)',
163
]);
164
});
@@ -201,11 +194,7 @@ describe('ReactChildReconciler', () => {
194
'duplicated and/or omitted — the behavior is unsupported and ' +
195
'could change in a future version.\n' +
196
' in div (at **)\n' +
204
- (gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
197
' in Component (at **)\n' +
206
- (gate(flags => flags.enableOwnerStacks)
207
- ? ''
208
- : ' in Parent (at **)\n') +
198
' in GrandParent (at **)',
199
]);
200
});
packages/react-dom/src/__tests__/ReactComponent-test.js
-55
@@ -407,17 +407,6 @@ describe('ReactComponent', () => {
407
408
const X = undefined;
409
const XElement = <X />;
410
- if (gate(flags => !flags.enableOwnerStacks)) {
411
- assertConsoleErrorDev(
412
- [
413
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
414
- 'or a class/function (for composite components) but got: undefined. ' +
415
- "You likely forgot to export your component from the file it's defined in, " +
416
- 'or you might have mixed up default and named imports.',
417
- ],
418
- {withoutStack: true},
419
- );
420
- }
410
await expect(async () => {
411
await act(() => {
412
root.render(XElement);
@@ -433,15 +422,6 @@ describe('ReactComponent', () => {
422
423
const Y = null;
424
const YElement = <Y />;
436
- if (gate(flags => !flags.enableOwnerStacks)) {
437
- assertConsoleErrorDev(
438
- [
439
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
440
- 'or a class/function (for composite components) but got: null.',
441
- ],
442
- {withoutStack: true},
443
- );
444
- }
425
await expect(async () => {
426
await act(() => {
427
root.render(YElement);
@@ -453,15 +433,6 @@ describe('ReactComponent', () => {
433
434
const Z = true;
435
const ZElement = <Z />;
456
- if (gate(flags => !flags.enableOwnerStacks)) {
457
- assertConsoleErrorDev(
458
- [
459
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
460
- 'or a class/function (for composite components) but got: boolean.',
461
- ],
462
- {withoutStack: true},
463
- );
464
- }
436
await expect(async () => {
437
await act(() => {
438
root.render(ZElement);
@@ -506,26 +477,6 @@ describe('ReactComponent', () => {
477
'\n\nCheck the render method of `Bar`.'
478
: ''),
479
);
509
- if (!gate('enableOwnerStacks')) {
510
- assertConsoleErrorDev([
511
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
512
- 'or a class/function (for composite components) but got: undefined.' +
513
- (__DEV__
514
- ? " You likely forgot to export your component from the file it's defined in, " +
515
- 'or you might have mixed up default and named imports.\n' +
516
- ' in Bar (at **)\n' +
517
- ' in Foo (at **)'
518
- : ''),
519
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
520
- 'or a class/function (for composite components) but got: undefined.' +
521
- (__DEV__
522
- ? " You likely forgot to export your component from the file it's defined in, " +
523
- 'or you might have mixed up default and named imports.\n' +
524
- ' in Bar (at **)\n' +
525
- ' in Foo (at **)'
526
- : ''),
527
- ]);
528
- }
480
});
481
482
it('throws if a plain object is used as a child', async () => {
@@ -693,9 +644,6 @@ describe('ReactComponent', () => {
644
'Or maybe you meant to call this function rather than return it.\n' +
645
' <span>{Foo}</span>\n' +
646
' in span (at **)\n' +
696
- (gate(flags => flags.enableOwnerStacks)
697
- ? ''
698
- : ' in div (at **)\n') +
647
' in Foo (at **)',
648
]);
649
});
@@ -753,9 +701,6 @@ describe('ReactComponent', () => {
701
'Or maybe you meant to call this function rather than return it.\n' +
702
' <span>{Foo}</span>\n' +
703
' in span (at **)\n' +
756
- (gate(flags => flags.enableOwnerStacks)
757
- ? ''
758
- : ' in div (at **)\n') +
704
' in Foo (at **)',
705
]);
706
await act(() => {
packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
-3
@@ -1396,9 +1396,6 @@ describe('ReactCompositeComponent', () => {
1396
'Cannot update a component (`A`) while rendering a different component (`B`). ' +
1397
'To locate the bad setState() call inside `B`, ' +
1398
'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
1399
- (gate('enableOwnerStacks')
1400
- ? ''
1401
- : ' in B (at **)\n' + ' in div (at **)\n') +
1399
' in Parent (at **)',
1400
]);
1401
packages/react-dom/src/__tests__/ReactDOM-test.js
-2
@@ -545,7 +545,6 @@ describe('ReactDOM', () => {
545
// ReactDOM(App > div > span)
546
'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
547
' in span (at **)\n' +
548
- (gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
548
' in App (at **)',
549
// ReactDOM(App > div > ServerEntry) >>> ReactDOMServer(Child) >>> ReactDOMServer(App2) >>> ReactDOMServer(blink)
550
'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
@@ -562,7 +561,6 @@ describe('ReactDOM', () => {
561
// ReactDOM(App > div > font)
562
'Invalid ARIA attribute `ariaTypo5`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
563
' in font (at **)\n' +
565
- (gate(flags => flags.enableOwnerStacks) ? '' : ' in div (at **)\n') +
564
' in App (at **)',
565
]);
566
});
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+169
-355
@@ -1845,8 +1845,7 @@ describe('ReactDOMComponent', () => {
1845
assertConsoleErrorDev([
1846
'The tag <menuitem> is unrecognized in this browser. ' +
1847
'If you meant to render a React component, start its name with an uppercase letter.\n' +
1848
- ' in menuitem (at **)' +
1849
- (gate('enableOwnerStacks') ? '' : '\n in menu (at **)'),
1848
+ ' in menuitem (at **)',
1849
]);
1850
});
1851
@@ -2242,10 +2241,7 @@ describe('ReactDOMComponent', () => {
2241
'> <div>\n' +
2242
'> <tr>\n' +
2243
' ...\n' +
2245
- '\n in tr (at **)' +
2246
- (gate(flags => flags.enableOwnerStacks)
2247
- ? ''
2248
- : '\n in div (at **)'),
2244
+ '\n in tr (at **)',
2245
]);
2246
});
2247
@@ -2264,10 +2260,7 @@ describe('ReactDOMComponent', () => {
2260
'In HTML, <p> cannot be a descendant of <p>.\n' +
2261
'This will cause a hydration error.' +
2262
// There is no outer `p` here because root container is not part of the stack.
2267
- '\n in p (at **)' +
2268
- (gate(flags => flags.enableOwnerStacks)
2269
- ? ''
2270
- : '\n in span (at **)'),
2263
+ '\n in p (at **)',
2264
]);
2265
});
2266
@@ -2294,92 +2287,48 @@ describe('ReactDOMComponent', () => {
2287
await act(() => {
2288
root.render(<Foo />);
2289
});
2297
- assertConsoleErrorDev(
2298
- gate(flags => flags.enableOwnerStacks)
2299
- ? [
2300
- 'In HTML, <tr> cannot be a child of ' +
2301
- '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
2302
- 'by the browser.\n' +
2303
- 'This will cause a hydration error.\n' +
2304
- '\n' +
2305
- ' <Foo>\n' +
2306
- '> <table>\n' +
2307
- ' <Row>\n' +
2308
- '> <tr>\n' +
2309
- ' ...\n' +
2310
- '\n in tr (at **)' +
2311
- '\n in Row (at **)' +
2312
- '\n in Foo (at **)',
2313
- '<table> cannot contain a nested <tr>.\nSee this log for the ancestor stack trace.' +
2314
- '\n in table (at **)' +
2315
- '\n in Foo (at **)',
2316
- 'In HTML, text nodes cannot be a ' +
2317
- 'child of <tr>.\n' +
2318
- 'This will cause a hydration error.\n' +
2319
- '\n' +
2320
- ' <Foo>\n' +
2321
- ' <table>\n' +
2322
- ' <Row>\n' +
2323
- ' <tr>\n' +
2324
- '> x\n' +
2325
- ' ...\n' +
2326
- '\n in tr (at **)' +
2327
- '\n in Row (at **)' +
2328
- '\n in Foo (at **)',
2329
- 'In HTML, whitespace text nodes cannot ' +
2330
- "be a child of <table>. Make sure you don't have any extra " +
2331
- 'whitespace between tags on each line of your source code.\n' +
2332
- 'This will cause a hydration error.\n' +
2333
- '\n' +
2334
- ' <Foo>\n' +
2335
- '> <table>\n' +
2336
- ' <Row>\n' +
2337
- '> {" "}\n' +
2338
- '\n in table (at **)' +
2339
- '\n in Foo (at **)',
2340
- ]
2341
- : [
2342
- 'In HTML, <tr> cannot be a child of ' +
2343
- '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
2344
- 'by the browser.\n' +
2345
- 'This will cause a hydration error.\n' +
2346
- '\n' +
2347
- ' <Foo>\n' +
2348
- '> <table>\n' +
2349
- ' <Row>\n' +
2350
- '> <tr>\n' +
2351
- ' ...\n' +
2352
- '\n in tr (at **)' +
2353
- '\n in Row (at **)' +
2354
- '\n in table (at **)' +
2355
- '\n in Foo (at **)',
2356
- 'In HTML, text nodes cannot be a ' +
2357
- 'child of <tr>.\n' +
2358
- 'This will cause a hydration error.\n' +
2359
- '\n' +
2360
- ' <Foo>\n' +
2361
- ' <table>\n' +
2362
- ' <Row>\n' +
2363
- ' <tr>\n' +
2364
- '> x\n' +
2365
- ' ...\n' +
2366
- '\n in tr (at **)' +
2367
- '\n in Row (at **)' +
2368
- '\n in table (at **)' +
2369
- '\n in Foo (at **)',
2370
- 'In HTML, whitespace text nodes cannot ' +
2371
- "be a child of <table>. Make sure you don't have any extra " +
2372
- 'whitespace between tags on each line of your source code.\n' +
2373
- 'This will cause a hydration error.\n' +
2374
- '\n' +
2375
- ' <Foo>\n' +
2376
- '> <table>\n' +
2377
- ' <Row>\n' +
2378
- '> {" "}\n' +
2379
- '\n in table (at **)' +
2380
- '\n in Foo (at **)',
2381
- ],
2382
- );
2290
+ assertConsoleErrorDev([
2291
+ 'In HTML, <tr> cannot be a child of ' +
2292
+ '<table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated ' +
2293
+ 'by the browser.\n' +
2294
+ 'This will cause a hydration error.\n' +
2295
+ '\n' +
2296
+ ' <Foo>\n' +
2297
+ '> <table>\n' +
2298
+ ' <Row>\n' +
2299
+ '> <tr>\n' +
2300
+ ' ...\n' +
2301
+ '\n in tr (at **)' +
2302
+ '\n in Row (at **)' +
2303
+ '\n in Foo (at **)',
2304
+ '<table> cannot contain a nested <tr>.\nSee this log for the ancestor stack trace.' +
2305
+ '\n in table (at **)' +
2306
+ '\n in Foo (at **)',
2307
+ 'In HTML, text nodes cannot be a ' +
2308
+ 'child of <tr>.\n' +
2309
+ 'This will cause a hydration error.\n' +
2310
+ '\n' +
2311
+ ' <Foo>\n' +
2312
+ ' <table>\n' +
2313
+ ' <Row>\n' +
2314
+ ' <tr>\n' +
2315
+ '> x\n' +
2316
+ ' ...\n' +
2317
+ '\n in tr (at **)' +
2318
+ '\n in Row (at **)' +
2319
+ '\n in Foo (at **)',
2320
+ 'In HTML, whitespace text nodes cannot ' +
2321
+ "be a child of <table>. Make sure you don't have any extra " +
2322
+ 'whitespace between tags on each line of your source code.\n' +
2323
+ 'This will cause a hydration error.\n' +
2324
+ '\n' +
2325
+ ' <Foo>\n' +
2326
+ '> <table>\n' +
2327
+ ' <Row>\n' +
2328
+ '> {" "}\n' +
2329
+ '\n in table (at **)' +
2330
+ '\n in Foo (at **)',
2331
+ ]);
2332
});
2333
2334
it('warns nicely for updating table rows to use text', async () => {
@@ -2445,12 +2394,7 @@ describe('ReactDOMComponent', () => {
2394
' <tr>\n' +
2395
'> text\n' +
2396
'\n in tr (at **)' +
2448
- '\n in Row (at **)' +
2449
- (gate(flags => flags.enableOwnerStacks)
2450
- ? ''
2451
- : '\n in tbody (at **)' +
2452
- '\n in table (at **)' +
2453
- '\n in Foo (at **)'),
2397
+ '\n in Row (at **)',
2398
]);
2399
});
2400
@@ -2477,49 +2421,28 @@ describe('ReactDOMComponent', () => {
2421
await act(() => {
2422
root.render(<App1 />);
2423
});
2480
- assertConsoleErrorDev(
2481
- gate(flags => flags.enableOwnerStacks)
2482
- ? [
2483
- 'In HTML, <tr> cannot be a child of <table>. ' +
2484
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2485
- 'This will cause a hydration error.\n' +
2486
- '\n' +
2487
- ' <App1>\n' +
2488
- ' <Viz1>\n' +
2489
- '> <table>\n' +
2490
- ' <FancyRow>\n' +
2491
- ' <Row>\n' +
2492
- '> <tr>\n' +
2493
- '\n in tr (at **)' +
2494
- '\n in Row (at **)' +
2495
- '\n in FancyRow (at **)' +
2496
- '\n in Viz1 (at **)' +
2497
- '\n in App1 (at **)',
2498
- '<table> cannot contain a nested <tr>.\n' +
2499
- 'See this log for the ancestor stack trace.\n' +
2500
- ' in table (at **)\n' +
2501
- ' in Viz1 (at **)\n' +
2502
- ' in App1 (at **)',
2503
- ]
2504
- : [
2505
- 'In HTML, <tr> cannot be a child of <table>. ' +
2506
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2507
- 'This will cause a hydration error.\n' +
2508
- '\n' +
2509
- ' <App1>\n' +
2510
- ' <Viz1>\n' +
2511
- '> <table>\n' +
2512
- ' <FancyRow>\n' +
2513
- ' <Row>\n' +
2514
- '> <tr>\n' +
2515
- '\n in tr (at **)' +
2516
- '\n in Row (at **)' +
2517
- '\n in FancyRow (at **)' +
2518
- '\n in table (at **)' +
2519
- '\n in Viz1 (at **)' +
2520
- '\n in App1 (at **)',
2521
- ],
2522
- );
2424
+ assertConsoleErrorDev([
2425
+ 'In HTML, <tr> cannot be a child of <table>. ' +
2426
+ 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2427
+ 'This will cause a hydration error.\n' +
2428
+ '\n' +
2429
+ ' <App1>\n' +
2430
+ ' <Viz1>\n' +
2431
+ '> <table>\n' +
2432
+ ' <FancyRow>\n' +
2433
+ ' <Row>\n' +
2434
+ '> <tr>\n' +
2435
+ '\n in tr (at **)' +
2436
+ '\n in Row (at **)' +
2437
+ '\n in FancyRow (at **)' +
2438
+ '\n in Viz1 (at **)' +
2439
+ '\n in App1 (at **)',
2440
+ '<table> cannot contain a nested <tr>.\n' +
2441
+ 'See this log for the ancestor stack trace.\n' +
2442
+ ' in table (at **)\n' +
2443
+ ' in Viz1 (at **)\n' +
2444
+ ' in App1 (at **)',
2445
+ ]);
2446
});
2447
2448
it('gives useful context in warnings 2', async () => {
@@ -2558,57 +2481,32 @@ describe('ReactDOMComponent', () => {
2481
await act(() => {
2482
root.render(<App2 />);
2483
});
2561
- assertConsoleErrorDev(
2562
- gate(flags => flags.enableOwnerStacks)
2563
- ? [
2564
- 'In HTML, <tr> cannot be a child of <table>. ' +
2565
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2566
- 'This will cause a hydration error.\n' +
2567
- '\n' +
2568
- ' <App2>\n' +
2569
- ' <Viz2>\n' +
2570
- ' <FancyTable>\n' +
2571
- ' <Table>\n' +
2572
- '> <table>\n' +
2573
- ' <FancyRow>\n' +
2574
- ' <Row>\n' +
2575
- '> <tr>\n' +
2576
- '\n in tr (at **)' +
2577
- '\n in Row (at **)' +
2578
- '\n in FancyRow (at **)' +
2579
- '\n in Viz2 (at **)' +
2580
- '\n in App2 (at **)',
2581
- '<table> cannot contain a nested <tr>.\n' +
2582
- 'See this log for the ancestor stack trace.\n' +
2583
- ' in table (at **)\n' +
2584
- ' in Table (at **)\n' +
2585
- ' in FancyTable (at **)\n' +
2586
- ' in Viz2 (at **)\n' +
2587
- ' in App2 (at **)',
2588
- ]
2589
- : [
2590
- 'In HTML, <tr> cannot be a child of <table>. ' +
2591
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2592
- 'This will cause a hydration error.\n' +
2593
- '\n' +
2594
- ' <App2>\n' +
2595
- ' <Viz2>\n' +
2596
- ' <FancyTable>\n' +
2597
- ' <Table>\n' +
2598
- '> <table>\n' +
2599
- ' <FancyRow>\n' +
2600
- ' <Row>\n' +
2601
- '> <tr>\n' +
2602
- '\n in tr (at **)' +
2603
- '\n in Row (at **)' +
2604
- '\n in FancyRow (at **)' +
2605
- '\n in table (at **)' +
2606
- '\n in Table (at **)' +
2607
- '\n in FancyTable (at **)' +
2608
- '\n in Viz2 (at **)' +
2609
- '\n in App2 (at **)',
2610
- ],
2611
- );
2484
+ assertConsoleErrorDev([
2485
+ 'In HTML, <tr> cannot be a child of <table>. ' +
2486
+ 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2487
+ 'This will cause a hydration error.\n' +
2488
+ '\n' +
2489
+ ' <App2>\n' +
2490
+ ' <Viz2>\n' +
2491
+ ' <FancyTable>\n' +
2492
+ ' <Table>\n' +
2493
+ '> <table>\n' +
2494
+ ' <FancyRow>\n' +
2495
+ ' <Row>\n' +
2496
+ '> <tr>\n' +
2497
+ '\n in tr (at **)' +
2498
+ '\n in Row (at **)' +
2499
+ '\n in FancyRow (at **)' +
2500
+ '\n in Viz2 (at **)' +
2501
+ '\n in App2 (at **)',
2502
+ '<table> cannot contain a nested <tr>.\n' +
2503
+ 'See this log for the ancestor stack trace.\n' +
2504
+ ' in table (at **)\n' +
2505
+ ' in Table (at **)\n' +
2506
+ ' in FancyTable (at **)\n' +
2507
+ ' in Viz2 (at **)\n' +
2508
+ ' in App2 (at **)',
2509
+ ]);
2510
});
2511
2512
it('gives useful context in warnings 3', async () => {
@@ -2640,47 +2538,26 @@ describe('ReactDOMComponent', () => {
2538
</FancyTable>,
2539
);
2540
});
2643
- assertConsoleErrorDev(
2644
- gate(flags => flags.enableOwnerStacks)
2645
- ? [
2646
- 'In HTML, <tr> cannot be a child of <table>. ' +
2647
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2648
- 'This will cause a hydration error.\n' +
2649
- '\n' +
2650
- ' <FancyTable>\n' +
2651
- ' <Table>\n' +
2652
- '> <table>\n' +
2653
- ' <FancyRow>\n' +
2654
- ' <Row>\n' +
2655
- '> <tr>\n' +
2656
- '\n in tr (at **)' +
2657
- '\n in Row (at **)' +
2658
- '\n in FancyRow (at **)',
2659
- '<table> cannot contain a nested <tr>.\n' +
2660
- 'See this log for the ancestor stack trace.' +
2661
- '\n in table (at **)' +
2662
- '\n in Table (at **)' +
2663
- '\n in FancyTable (at **)',
2664
- ]
2665
- : [
2666
- 'In HTML, <tr> cannot be a child of <table>. ' +
2667
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2668
- 'This will cause a hydration error.\n' +
2669
- '\n' +
2670
- ' <FancyTable>\n' +
2671
- ' <Table>\n' +
2672
- '> <table>\n' +
2673
- ' <FancyRow>\n' +
2674
- ' <Row>\n' +
2675
- '> <tr>\n' +
2676
- '\n in tr (at **)' +
2677
- '\n in Row (at **)' +
2678
- '\n in FancyRow (at **)' +
2679
- '\n in table (at **)' +
2680
- '\n in Table (at **)' +
2681
- '\n in FancyTable (at **)',
2682
- ],
2683
- );
2541
+ assertConsoleErrorDev([
2542
+ 'In HTML, <tr> cannot be a child of <table>. ' +
2543
+ 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2544
+ 'This will cause a hydration error.\n' +
2545
+ '\n' +
2546
+ ' <FancyTable>\n' +
2547
+ ' <Table>\n' +
2548
+ '> <table>\n' +
2549
+ ' <FancyRow>\n' +
2550
+ ' <Row>\n' +
2551
+ '> <tr>\n' +
2552
+ '\n in tr (at **)' +
2553
+ '\n in Row (at **)' +
2554
+ '\n in FancyRow (at **)',
2555
+ '<table> cannot contain a nested <tr>.\n' +
2556
+ 'See this log for the ancestor stack trace.' +
2557
+ '\n in table (at **)' +
2558
+ '\n in Table (at **)' +
2559
+ '\n in FancyTable (at **)',
2560
+ ]);
2561
});
2562
2563
it('gives useful context in warnings 4', async () => {
@@ -2701,39 +2578,22 @@ describe('ReactDOMComponent', () => {
2578
</table>,
2579
);
2580
});
2704
- assertConsoleErrorDev(
2705
- gate(flags => flags.enableOwnerStacks)
2706
- ? [
2707
- 'In HTML, <tr> cannot be a child of <table>. ' +
2708
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2709
- 'This will cause a hydration error.\n' +
2710
- '\n' +
2711
- '> <table>\n' +
2712
- ' <FancyRow>\n' +
2713
- ' <Row>\n' +
2714
- '> <tr>\n' +
2715
- '\n in tr (at **)' +
2716
- '\n in Row (at **)' +
2717
- '\n in FancyRow (at **)',
2718
- '<table> cannot contain a nested <tr>.\n' +
2719
- 'See this log for the ancestor stack trace.' +
2720
- '\n in table (at **)',
2721
- ]
2722
- : [
2723
- 'In HTML, <tr> cannot be a child of <table>. ' +
2724
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2725
- 'This will cause a hydration error.\n' +
2726
- '\n' +
2727
- '> <table>\n' +
2728
- ' <FancyRow>\n' +
2729
- ' <Row>\n' +
2730
- '> <tr>\n' +
2731
- '\n in tr (at **)' +
2732
- '\n in Row (at **)' +
2733
- '\n in FancyRow (at **)' +
2734
- '\n in table (at **)',
2735
- ],
2736
- );
2581
+ assertConsoleErrorDev([
2582
+ 'In HTML, <tr> cannot be a child of <table>. ' +
2583
+ 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2584
+ 'This will cause a hydration error.\n' +
2585
+ '\n' +
2586
+ '> <table>\n' +
2587
+ ' <FancyRow>\n' +
2588
+ ' <Row>\n' +
2589
+ '> <tr>\n' +
2590
+ '\n in tr (at **)' +
2591
+ '\n in Row (at **)' +
2592
+ '\n in FancyRow (at **)',
2593
+ '<table> cannot contain a nested <tr>.\n' +
2594
+ 'See this log for the ancestor stack trace.' +
2595
+ '\n in table (at **)',
2596
+ ]);
2597
});
2598
2599
it('gives useful context in warnings 5', async () => {
@@ -2758,39 +2618,22 @@ describe('ReactDOMComponent', () => {
2618
</FancyTable>,
2619
);
2620
});
2761
- assertConsoleErrorDev(
2762
- gate(flags => flags.enableOwnerStacks)
2763
- ? [
2764
- 'In HTML, <tr> cannot be a child of <table>. ' +
2765
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2766
- 'This will cause a hydration error.\n' +
2767
- '\n' +
2768
- ' <FancyTable>\n' +
2769
- ' <Table>\n' +
2770
- '> <table>\n' +
2771
- '> <tr>\n' +
2772
- '\n in tr (at **)',
2773
- '<table> cannot contain a nested <tr>.\n' +
2774
- 'See this log for the ancestor stack trace.' +
2775
- '\n in table (at **)' +
2776
- '\n in Table (at **)' +
2777
- '\n in FancyTable (at **)',
2778
- ]
2779
- : [
2780
- 'In HTML, <tr> cannot be a child of <table>. ' +
2781
- 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2782
- 'This will cause a hydration error.\n' +
2783
- '\n' +
2784
- ' <FancyTable>\n' +
2785
- ' <Table>\n' +
2786
- '> <table>\n' +
2787
- '> <tr>\n' +
2788
- '\n in tr (at **)' +
2789
- '\n in table (at **)' +
2790
- '\n in Table (at **)' +
2791
- '\n in FancyTable (at **)',
2792
- ],
2793
- );
2621
+ assertConsoleErrorDev([
2622
+ 'In HTML, <tr> cannot be a child of <table>. ' +
2623
+ 'Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.\n' +
2624
+ 'This will cause a hydration error.\n' +
2625
+ '\n' +
2626
+ ' <FancyTable>\n' +
2627
+ ' <Table>\n' +
2628
+ '> <table>\n' +
2629
+ '> <tr>\n' +
2630
+ '\n in tr (at **)',
2631
+ '<table> cannot contain a nested <tr>.\n' +
2632
+ 'See this log for the ancestor stack trace.' +
2633
+ '\n in table (at **)' +
2634
+ '\n in Table (at **)' +
2635
+ '\n in FancyTable (at **)',
2636
+ ]);
2637
2638
class Link extends React.Component {
2639
render() {
@@ -2807,40 +2650,22 @@ describe('ReactDOMComponent', () => {
2650
</Link>,
2651
);
2652
});
2810
- assertConsoleErrorDev(
2811
- gate(flags => flags.enableOwnerStacks)
2812
- ? [
2813
- 'In HTML, <a> cannot be a descendant of <a>.\n' +
2814
- 'This will cause a hydration error.\n' +
2815
- '\n' +
2816
- ' <Link>\n' +
2817
- '> <a>\n' +
2818
- ' <div>\n' +
2819
- ' <Link>\n' +
2820
- '> <a>\n' +
2821
- '\n in a (at **)' +
2822
- '\n in Link (at **)',
2823
- '<a> cannot contain a nested <a>.\n' +
2824
- 'See this log for the ancestor stack trace.' +
2825
- '\n in a (at **)' +
2826
- '\n in Link (at **)',
2827
- ]
2828
- : [
2829
- 'In HTML, <a> cannot be a descendant of <a>.\n' +
2830
- 'This will cause a hydration error.\n' +
2831
- '\n' +
2832
- ' <Link>\n' +
2833
- '> <a>\n' +
2834
- ' <div>\n' +
2835
- ' <Link>\n' +
2836
- '> <a>\n' +
2837
- '\n in a (at **)' +
2838
- '\n in Link (at **)' +
2839
- '\n in div (at **)' +
2840
- '\n in a (at **)' +
2841
- '\n in Link (at **)',
2842
- ],
2843
- );
2653
+ assertConsoleErrorDev([
2654
+ 'In HTML, <a> cannot be a descendant of <a>.\n' +
2655
+ 'This will cause a hydration error.\n' +
2656
+ '\n' +
2657
+ ' <Link>\n' +
2658
+ '> <a>\n' +
2659
+ ' <div>\n' +
2660
+ ' <Link>\n' +
2661
+ '> <a>\n' +
2662
+ '\n in a (at **)' +
2663
+ '\n in Link (at **)',
2664
+ '<a> cannot contain a nested <a>.\n' +
2665
+ 'See this log for the ancestor stack trace.' +
2666
+ '\n in a (at **)' +
2667
+ '\n in Link (at **)',
2668
+ ]);
2669
});
2670
2671
it('should warn about incorrect casing on properties (ssr)', () => {
@@ -3099,11 +2924,9 @@ describe('ReactDOMComponent', () => {
2924
});
2925
assertConsoleErrorDev([
2926
'Invalid DOM property `class`. Did you mean `className`?\n' +
3102
- ' in span (at **)' +
3103
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
2927
+ ' in span (at **)',
2928
'Invalid event handler property `onclick`. Did you mean `onClick`?\n' +
3105
- ' in strong (at **)' +
3106
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
2929
+ ' in strong (at **)',
2930
]);
2931
});
2932
@@ -3119,12 +2942,10 @@ describe('ReactDOMComponent', () => {
2942
);
2943
assertConsoleErrorDev([
2944
'Invalid DOM property `class`. Did you mean `className`?\n' +
3122
- ' in span (at **)' +
3123
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
2945
+ ' in span (at **)',
2946
'Invalid event handler property `onclick`. ' +
2947
'React events use the camelCase naming convention, for example `onClick`.\n' +
3126
- ' in strong (at **)' +
3127
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
2948
+ ' in strong (at **)',
2949
]);
2950
});
2951
@@ -3175,12 +2996,10 @@ describe('ReactDOMComponent', () => {
2996
'Invalid DOM property `class`. Did you mean `className`?\n' +
2997
' in span (at **)\n' +
2998
' in Child1 (at **)\n' +
3178
- (gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
2999
' in Parent (at **)',
3000
'Invalid event handler property `onclick`. Did you mean `onClick`?\n' +
3001
' in strong (at **)\n' +
3002
' in Child3 (at **)\n' +
3183
- (gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
3003
' in Parent (at **)',
3004
]);
3005
});
@@ -3230,13 +3049,11 @@ describe('ReactDOMComponent', () => {
3049
'Invalid DOM property `class`. Did you mean `className`?\n' +
3050
' in span (at **)\n' +
3051
' in Child1 (at **)\n' +
3233
- (gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
3052
' in Parent (at **)',
3053
'Invalid event handler property `onclick`. ' +
3054
'React events use the camelCase naming convention, for example `onClick`.\n' +
3055
' in strong (at **)\n' +
3056
' in Child3 (at **)\n' +
3239
- (gate('enableOwnerStacks') ? '' : ' in div (at **)\n') +
3057
' in Parent (at **)',
3058
]);
3059
});
@@ -3362,8 +3179,7 @@ describe('ReactDOMComponent', () => {
3179
});
3180
assertConsoleErrorDev([
3181
'Invalid DOM property `arabic-form`. Did you mean `arabicForm`?\n' +
3365
- ' in text (at **)' +
3366
- (gate('enableOwnerStacks') ? '' : '\n in svg (at **)'),
3182
+ ' in text (at **)',
3183
]);
3184
const text = el.querySelector('text');
3185
@@ -3844,8 +3660,7 @@ describe('ReactDOMComponent', () => {
3660
});
3661
assertConsoleErrorDev([
3662
'Invalid DOM property `x-height`. Did you mean `xHeight`?\n' +
3847
- ' in font-face (at **)' +
3848
- (gate('enableOwnerStacks') ? '' : '\n in svg (at **)'),
3663
+ ' in font-face (at **)',
3664
]);
3665
3666
expect(el.querySelector('font-face').hasAttribute('x-height')).toBe(
@@ -3871,8 +3686,7 @@ describe('ReactDOMComponent', () => {
3686
'whatever="false" or whatever={value.toString()}.\n\n' +
3687
'If you used to conditionally omit it with whatever={condition && value}, ' +
3688
'pass whatever={condition ? value : undefined} instead.\n' +
3874
- ' in font-face (at **)' +
3875
- (gate('enableOwnerStacks') ? '' : '\n in svg (at **)'),
3689
+ ' in font-face (at **)',
3690
]);
3691
3692
expect(el.querySelector('font-face').hasAttribute('whatever')).toBe(
packages/react-dom/src/__tests__/ReactDOMFiber-test.js
-1
@@ -751,7 +751,6 @@ describe('ReactDOMFiber', () => {
751
' in Parent (at **)',
752
'Component uses the legacy contextTypes API which will soon be removed. ' +
753
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
754
- (gate('enableOwnerStacks') ? '' : ' in Component (at **)\n') +
754
' in Parent (at **)',
755
]);
756
expect(container.innerHTML).toBe('');
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
-1
@@ -386,7 +386,6 @@ describe('ReactDOMFizzForm', () => {
386
'Cannot specify a formTarget for a button that specifies a function as a formAction. ' +
387
'The function will always be executed in the same window.\n' +
388
' in input (at **)\n' +
389
- (gate('enableOwnerStacks') ? '' : ' in form (at **)\n') +
389
' in App (at **)',
390
]);
391
let root;
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+62
-147
@@ -1843,15 +1843,9 @@ describe('ReactDOMFizzServer', () => {
1843
assertConsoleErrorDev([
1844
'<inCorrectTag /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.' +
1845
'\n' +
1846
- (gate(flags => flags.enableOwnerStacks)
1847
- ? ' in inCorrectTag (at **)\n' +
1848
- ' in C (at **)\n' +
1849
- ' in A (at **)'
1850
- : ' in inCorrectTag (at **)\n' +
1851
- ' in C (at **)\n' +
1852
- ' in Suspense (at **)\n' +
1853
- ' in div (at **)\n' +
1854
- ' in A (at **)'),
1846
+ ' in inCorrectTag (at **)\n' +
1847
+ ' in C (at **)\n' +
1848
+ ' in A (at **)',
1849
]);
1850
1851
await act(() => {
@@ -1862,17 +1856,11 @@ describe('ReactDOMFizzServer', () => {
1856
assertConsoleErrorDev([
1857
'Each child in a list should have a unique "key" prop.\n\nCheck the render method of `B`.' +
1858
' See https://react.dev/link/warning-keys for more information.\n' +
1865
- (gate(flags => flags.enableOwnerStacks)
1866
- ? ' in span (at **)\n' +
1867
- ' in mapper (at **)\n' +
1868
- ' in Array.map (at **)\n' +
1869
- ' in B (at **)\n' +
1870
- ' in A (at **)'
1871
- : ' in span (at **)\n' +
1872
- ' in B (at **)\n' +
1873
- ' in Suspense (at **)\n' +
1874
- ' in div (at **)\n' +
1875
- ' in A (at **)'),
1859
+ ' in span (at **)\n' +
1860
+ ' in mapper (at **)\n' +
1861
+ ' in Array.map (at **)\n' +
1862
+ ' in B (at **)\n' +
1863
+ ' in A (at **)',
1864
]);
1865
1866
expect(getVisibleChildren(container)).toEqual(
@@ -1954,13 +1942,7 @@ describe('ReactDOMFizzServer', () => {
1942
' in TestProvider (at **)',
1943
'TestConsumer uses the legacy contextTypes API which will soon be removed. ' +
1944
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
1957
- ' in TestConsumer (at **)' +
1958
- (gate('enableOwnerStacks')
1959
- ? ''
1960
- : '\n in TestProvider (at **)' +
1961
- '\n in Suspense (at **)' +
1962
- '\n in div (at **)' +
1963
- '\n in TestProvider (at **)'),
1945
+ ' in TestConsumer (at **)',
1946
]);
1947
expect(getVisibleChildren(container)).toEqual(
1948
<div>
@@ -5871,7 +5853,6 @@ describe('ReactDOMFizzServer', () => {
5853
'If your `children` prop is using this form try rewriting it using a template string: ' +
5854
'<title>{`hello ${nameOfUser}`}</title>.\n' +
5855
' in title (at **)\n' +
5874
- (gate('enableOwnerStacks') ? '' : ' in head (at **)\n') +
5856
' in App (at **)',
5857
]);
5858
@@ -5917,7 +5898,6 @@ describe('ReactDOMFizzServer', () => {
5898
'React Component try moving the <title> tag into that component. ' +
5899
'If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.\n' +
5900
' in title (at **)\n' +
5920
- (gate('enableOwnerStacks') ? '' : ' in head (at **)\n') +
5901
' in App (at **)',
5902
]);
5903
// object titles are toStringed when float is on
@@ -5961,7 +5941,6 @@ describe('ReactDOMFizzServer', () => {
5941
'string or number value if so. Otherwise implement a `toString` method that React can ' +
5942
'use to produce a valid <title>.\n' +
5943
' in title (at **)\n' +
5964
- (gate('enableOwnerStacks') ? '' : ' in head (at **)\n') +
5944
' in App (at **)',
5945
]);
5946
// object titles are toStringed when float is on
@@ -6545,23 +6524,11 @@ describe('ReactDOMFizzServer', () => {
6524
6525
assertConsoleErrorDev([
6526
'A script element was rendered with a number for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
6548
- componentStack(
6549
- gate(flags => flags.enableOwnerStacks)
6550
- ? ['script', 'App']
6551
- : ['script', 'body', 'html', 'App'],
6552
- ),
6527
+ componentStack(['script', 'App']),
6528
'A script element was rendered with an array for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
6554
- componentStack(
6555
- gate(flags => flags.enableOwnerStacks)
6556
- ? ['script', 'App']
6557
- : ['script', 'body', 'html', 'App'],
6558
- ),
6529
+ componentStack(['script', 'App']),
6530
'A script element was rendered with something unexpected for children. If script element has children it must be a single string. Consider using dangerouslySetInnerHTML or passing a plain string as children.' +
6560
- componentStack(
6561
- gate(flags => flags.enableOwnerStacks)
6562
- ? ['script', 'App']
6563
- : ['script', 'body', 'html', 'App'],
6564
- ),
6531
+ componentStack(['script', 'App']),
6532
]);
6533
});
6534
@@ -8544,7 +8511,7 @@ describe('ReactDOMFizzServer', () => {
8511
expect(document.body.textContent).toBe('HelloWorld');
8512
});
8513
8547
- // @gate __DEV__ && enableOwnerStacks
8514
+ // @gate __DEV__
8515
it('can get the component owner stacks during rendering in dev', async () => {
8516
let stack;
8517
@@ -8577,7 +8544,7 @@ describe('ReactDOMFizzServer', () => {
8544
);
8545
});
8546
8580
- // @gate __DEV__ && enableOwnerStacks
8547
+ // @gate __DEV__
8548
it('can get the component owner stacks for onError in dev', async () => {
8549
const thrownError = new Error('hi');
8550
let caughtError;
@@ -9111,56 +9078,30 @@ describe('ReactDOMFizzServer', () => {
9078
</body>
9079
</html>,
9080
);
9114
- if (gate(flags => flags.enableOwnerStacks)) {
9115
- assertConsoleErrorDev([
9116
- [
9117
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9118
- {withoutStack: true},
9119
- ],
9120
- 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9121
- '\n' +
9122
- '\n <App>' +
9123
- '\n> <html>' +
9124
- '\n <Suspense fallback="this fallb...">' +
9125
- '\n <meta>' +
9126
- '\n> <meta itemProp="" content="before">' +
9127
- '\n ...' +
9128
- '\n' +
9129
- '\n in meta (at **)' +
9130
- '\n in App (at **)',
9131
- '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
9132
- '\n in html (at **)' +
9133
- '\n in App (at **)',
9134
- [
9135
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9136
- {withoutStack: true},
9137
- ],
9138
- ]);
9139
- } else {
9140
- assertConsoleErrorDev([
9141
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.' +
9142
- '\n in Suspense (at **)' +
9143
- '\n in html (at **)' +
9144
- '\n in App (at **)',
9145
- 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9146
- '\n' +
9147
- '\n <App>' +
9148
- '\n> <html>' +
9149
- '\n <Suspense fallback="this fallb...">' +
9150
- '\n <meta>' +
9151
- '\n> <meta itemProp="" content="before">' +
9152
- '\n ...' +
9153
- '\n' +
9154
- '\n in meta (at **)' +
9155
- '\n in Suspense (at **)' +
9156
- '\n in html (at **)' +
9157
- '\n in App (at **)',
9158
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.' +
9159
- '\n in Suspense (at **)' +
9160
- '\n in html (at **)' +
9161
- '\n in App (at **)',
9162
- ]);
9163
- }
9081
+ assertConsoleErrorDev([
9082
+ [
9083
+ 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9084
+ {withoutStack: true},
9085
+ ],
9086
+ 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9087
+ '\n' +
9088
+ '\n <App>' +
9089
+ '\n> <html>' +
9090
+ '\n <Suspense fallback="this fallb...">' +
9091
+ '\n <meta>' +
9092
+ '\n> <meta itemProp="" content="before">' +
9093
+ '\n ...' +
9094
+ '\n' +
9095
+ '\n in meta (at **)' +
9096
+ '\n in App (at **)',
9097
+ '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
9098
+ '\n in html (at **)' +
9099
+ '\n in App (at **)',
9100
+ [
9101
+ 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9102
+ {withoutStack: true},
9103
+ ],
9104
+ ]);
9105
9106
await root.unmount();
9107
expect(getVisibleChildren(document)).toEqual(
@@ -9253,56 +9194,30 @@ describe('ReactDOMFizzServer', () => {
9194
</body>
9195
</html>,
9196
);
9256
- if (gate(flags => flags.enableOwnerStacks)) {
9257
- assertConsoleErrorDev([
9258
- [
9259
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9260
- {withoutStack: true},
9261
- ],
9262
- 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9263
- '\n' +
9264
- '\n <App>' +
9265
- '\n> <html>' +
9266
- '\n <Suspense fallback="this fallb...">' +
9267
- '\n <meta>' +
9268
- '\n> <meta itemProp="" content="before">' +
9269
- '\n ...' +
9270
- '\n' +
9271
- '\n in meta (at **)' +
9272
- '\n in App (at **)',
9273
- '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
9274
- '\n in html (at **)' +
9275
- '\n in App (at **)',
9276
- [
9277
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9278
- {withoutStack: true},
9279
- ],
9280
- ]);
9281
- } else {
9282
- assertConsoleErrorDev([
9283
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.' +
9284
- '\n in Suspense (at **)' +
9285
- '\n in html (at **)' +
9286
- '\n in App (at **)',
9287
- 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9288
- '\n' +
9289
- '\n <App>' +
9290
- '\n> <html>' +
9291
- '\n <Suspense fallback="this fallb...">' +
9292
- '\n <meta>' +
9293
- '\n> <meta itemProp="" content="before">' +
9294
- '\n ...' +
9295
- '\n' +
9296
- '\n in meta (at **)' +
9297
- '\n in Suspense (at **)' +
9298
- '\n in html (at **)' +
9299
- '\n in App (at **)',
9300
- 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.' +
9301
- '\n in Suspense (at **)' +
9302
- '\n in html (at **)' +
9303
- '\n in App (at **)',
9304
- ]);
9305
- }
9197
+ assertConsoleErrorDev([
9198
+ [
9199
+ 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9200
+ {withoutStack: true},
9201
+ ],
9202
+ 'In HTML, <meta> cannot be a child of <html>.\nThis will cause a hydration error.' +
9203
+ '\n' +
9204
+ '\n <App>' +
9205
+ '\n> <html>' +
9206
+ '\n <Suspense fallback="this fallb...">' +
9207
+ '\n <meta>' +
9208
+ '\n> <meta itemProp="" content="before">' +
9209
+ '\n ...' +
9210
+ '\n' +
9211
+ '\n in meta (at **)' +
9212
+ '\n in App (at **)',
9213
+ '<html> cannot contain a nested <meta>.\nSee this log for the ancestor stack trace.' +
9214
+ '\n in html (at **)' +
9215
+ '\n in App (at **)',
9216
+ [
9217
+ 'Cannot render a <meta> outside the main document if it has an `itemProp` prop. `itemProp` suggests the tag belongs to an `itemScope` which can appear anywhere in the DOM. If you were intending for React to hoist this <meta> remove the `itemProp` prop. Otherwise, try moving this tag into the <head> or <body> of the Document.',
9218
+ {withoutStack: true},
9219
+ ],
9220
+ ]);
9221
9222
await root.unmount();
9223
expect(getVisibleChildren(document)).toEqual(
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+17
-63
@@ -529,8 +529,7 @@ describe('ReactDOMFloat', () => {
529
'> <template>\n' +
530
' ...\n' +
531
'\n' +
532
- ' in template (at **)' +
533
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
532
+ ' in template (at **)',
533
]);
534
535
root.render(
@@ -555,8 +554,7 @@ describe('ReactDOMFloat', () => {
554
' <body>\n' +
555
'> <style>\n' +
556
'\n' +
558
- ' in style (at **)' +
559
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
557
+ ' in style (at **)',
558
]);
559
560
root.render(
@@ -596,8 +594,7 @@ describe('ReactDOMFloat', () => {
594
' <body>\n' +
595
'> <script href="foo">\n' +
596
'\n' +
599
- ' in script (at **)' +
600
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
597
+ ' in script (at **)',
598
]);
599
600
root.render(
@@ -2269,21 +2266,11 @@ body {
2266
'spell it as lowercase `nonstandardattr` instead. If you accidentally passed it from a ' +
2267
'parent component, remove it from the DOM element.\n' +
2268
' in link (at **)\n' +
2272
- (gate('enableOwnerStacks')
2273
- ? ''
2274
- : ' in div (at **)\n' +
2275
- ' in body (at **)\n' +
2276
- ' in html (at **)\n') +
2269
' in App (at **)',
2270
'Invalid values for props `shouldnotincludefunctions`, `norsymbols` on <link> tag. ' +
2271
'Either remove them from the element, or pass a string or number value to keep them in the DOM. ' +
2272
'For details, see https://react.dev/link/attribute-behavior \n' +
2273
' in link (at **)\n' +
2282
- (gate('enableOwnerStacks')
2283
- ? ''
2284
- : ' in div (at **)\n' +
2285
- ' in body (at **)\n' +
2286
- ' in html (at **)\n') +
2274
' in App (at **)',
2275
]);
2276
@@ -2642,8 +2629,7 @@ body {
2629
'> <html>\n' +
2630
'> <meta itemProp="foo">' +
2631
'\n' +
2645
- '\n in meta (at **)' +
2646
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2632
+ '\n in meta (at **)',
2633
]);
2634
});
2635
@@ -2668,8 +2654,7 @@ body {
2654
'> <html>\n' +
2655
'> <title itemProp="foo">' +
2656
'\n' +
2671
- '\n in title (at **)' +
2672
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2657
+ '\n in title (at **)',
2658
]);
2659
});
2660
@@ -2694,8 +2679,7 @@ body {
2679
'> <html>\n' +
2680
'> <style itemProp="foo">' +
2681
'\n' +
2697
- '\n in style (at **)' +
2698
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2682
+ '\n in style (at **)',
2683
]);
2684
});
2685
@@ -2720,8 +2704,7 @@ body {
2704
'> <html>\n' +
2705
'> <link itemProp="foo">\n' +
2706
'\n' +
2723
- ' in link (at **)' +
2724
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2707
+ ' in link (at **)',
2708
]);
2709
});
2710
@@ -2746,8 +2729,7 @@ body {
2729
'> <html>\n' +
2730
'> <script itemProp="foo">\n' +
2731
'\n' +
2749
- ' in script (at **)' +
2750
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
2732
+ ' in script (at **)',
2733
]);
2734
});
2735
@@ -4844,9 +4826,6 @@ body {
4826
'React encountered a hoistable style tag for the same href as a preload: "foo". ' +
4827
'When using a style tag to inline styles you should not also preload it as a stylsheet.\n' +
4828
' in style (at **)\n' +
4847
- (gate('enableOwnerStacks')
4848
- ? ''
4849
- : ' in body (at **)\n' + ' in html (at **)\n') +
4829
' in App (at **)',
4830
]);
4831
@@ -7753,64 +7732,43 @@ body {
7732
'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7733
'`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
7734
'otherwise remove the `precedence` prop.\n' +
7756
- ' in link (at **)' +
7757
- (gate('enableOwnerStacks')
7758
- ? ''
7759
- : '\n in body (at **)' + '\n in html (at **)'),
7735
+ ' in link (at **)',
7736
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7737
'expected the `href` prop to be a non-empty string but ecountered an empty string instead. ' +
7738
'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7739
'`precedence` prop ensure there is a non-empty string `href` prop as well, ' +
7740
'otherwise remove the `precedence` prop.\n' +
7765
- ' in link (at **)' +
7766
- (gate('enableOwnerStacks')
7767
- ? ''
7768
- : '\n in body (at **)' + '\n in html (at **)'),
7741
+ ' in link (at **)',
7742
'An empty string ("") was passed to the href attribute. ' +
7743
'To fix this, either do not render the element at all or ' +
7744
'pass null to href instead of an empty string.\n' +
7772
- ' in link (at **)' +
7773
- (gate('enableOwnerStacks')
7774
- ? ''
7775
- : '\n in body (at **)' + '\n in html (at **)'),
7745
+ ' in link (at **)',
7746
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7747
'`onLoad` and `onError` props. The presence of loading and error handlers indicates ' +
7748
'an intent to manage the stylesheet loading state from your from your Component code ' +
7749
'and React will not hoist or deduplicate this stylesheet. ' +
7750
'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7751
'`precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
7782
- ' in link (at **)' +
7783
- (gate('enableOwnerStacks')
7784
- ? ''
7785
- : '\n in body (at **)' + '\n in html (at **)'),
7752
+ ' in link (at **)',
7753
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and ' +
7754
'`onLoad` prop. The presence of loading and error handlers indicates an intent to ' +
7755
'manage the stylesheet loading state from your from your Component code and ' +
7756
'React will not hoist or deduplicate this stylesheet. ' +
7757
'If your intent was to have React hoist and deduplciate this stylesheet using the ' +
7758
'`precedence` prop remove the `onLoad` prop, otherwise remove the `precedence` prop.\n' +
7792
- ' in link (at **)' +
7793
- (gate('enableOwnerStacks')
7794
- ? ''
7795
- : '\n in body (at **)' + '\n in html (at **)'),
7759
+ ' in link (at **)',
7760
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onError` prop. ' +
7761
'The presence of loading and error handlers indicates an intent to manage the stylesheet loading state ' +
7762
'from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7763
'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7764
'prop remove the `onError` prop, otherwise remove the `precedence` prop.\n' +
7801
- ' in link (at **)' +
7802
- (gate('enableOwnerStacks')
7803
- ? ''
7804
- : '\n in body (at **)' + '\n in html (at **)'),
7765
+ ' in link (at **)',
7766
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and a `disabled` prop. ' +
7767
'The presence of the `disabled` prop indicates an intent to manage the stylesheet active state from ' +
7768
'your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7769
'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7770
'prop remove the `disabled` prop, otherwise remove the `precedence` prop.\n' +
7810
- ' in link (at **)' +
7811
- (gate('enableOwnerStacks')
7812
- ? ''
7813
- : '\n in body (at **)' + '\n in html (at **)'),
7771
+ ' in link (at **)',
7772
].filter(Boolean),
7773
);
7774
@@ -7836,8 +7794,7 @@ body {
7794
'loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. ' +
7795
'If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` ' +
7796
'prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.\n' +
7839
- ' in body (at **)' +
7840
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
7797
+ ' in body (at **)',
7798
]);
7799
});
7800
@@ -8429,10 +8386,7 @@ background-color: green;
8386
'using the `precedence` prop to not have any spaces but ecountered spaces instead. ' +
8387
'using spaces in this prop will cause hydration of this style to fail on the client. ' +
8388
'The href for the <style> where this ocurred is "foo bar".\n' +
8432
- ' in style (at **)' +
8433
- (gate('enableOwnerStacks')
8434
- ? ''
8435
- : '\n in body (at **)' + '\n in html (at **)'),
8389
+ ' in style (at **)',
8390
]);
8391
});
8392
});
packages/react-dom/src/__tests__/ReactDOMForm-test.js
+2
-5
@@ -391,8 +391,7 @@ describe('ReactDOMForm', () => {
391
'> <form action={function outerAction}>\n' +
392
' <input>\n' +
393
'> <form action={function innerAction} ref={{current:null}}>\n' +
394
- '\n in form (at **)' +
395
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in form (at **)'),
394
+ '\n in form (at **)',
395
]);
396
397
await submit(ref.current);
@@ -588,8 +587,7 @@ describe('ReactDOMForm', () => {
587
'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' +
588
'React needs it to encode which action should be invoked. ' +
589
'It will get overridden.\n' +
591
- ' in input (at **)' +
592
- (gate('enableOwnerStacks') ? '' : '\n in form (at **)'),
590
+ ' in input (at **)',
591
]);
592
593
await submit(inputRef.current);
@@ -1971,7 +1969,6 @@ describe('ReactDOMForm', () => {
1969
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1970
'For details, see https://react.dev/link/attribute-behavior \n' +
1971
' in button (at **)\n' +
1974
- (gate('enableOwnerStacks') ? '' : ' in form (at **)\n') +
1972
' in App (at **)',
1973
]);
1974
await submit(buttonRef.current);
packages/react-dom/src/__tests__/ReactDOMOption-test.js
+2
-8
@@ -59,10 +59,7 @@ describe('ReactDOMOption', () => {
59
'> <div>\n' +
60
' ...\n' +
61
'\n' +
62
- ' in div (at **)' +
63
- (gate(flags => flags.enableOwnerStacks)
64
- ? ''
65
- : '\n in option (at **)'),
62
+ ' in div (at **)',
63
]);
64
expect(container.firstChild.innerHTML).toBe('1 <div></div> 2');
65
await renderIntoDocument(el);
@@ -279,10 +276,7 @@ describe('ReactDOMOption', () => {
276
'> <div ref={{current:null}}>\n' +
277
' ...\n' +
278
'\n' +
282
- ' in div (at **)' +
283
- (gate(flags => flags.enableOwnerStacks)
284
- ? ''
285
- : '\n in option (at **)' + '\n in select (at **)'),
279
+ ' in div (at **)',
280
]);
281
option = container.firstChild.firstChild;
282
packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+20
-41
@@ -794,7 +794,6 @@ describe('ReactDOMSelect', () => {
794
'Use the `defaultValue` or `value` props on <select> instead of ' +
795
'setting `selected` on <option>.\n' +
796
' in option (at **)\n' +
797
- (gate('enableOwnerStacks') ? '' : ' in select (at **)\n') +
797
' in App (at **)',
798
]);
799
@@ -1072,8 +1071,7 @@ describe('ReactDOMSelect', () => {
1071
'Invalid value for prop `value` on <option> tag. ' +
1072
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1073
'For details, see https://react.dev/link/attribute-behavior \n' +
1075
- ' in option (at **)' +
1076
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1074
+ ' in option (at **)',
1075
]);
1076
1077
const node = container.firstChild;
@@ -1096,8 +1094,7 @@ describe('ReactDOMSelect', () => {
1094
'Invalid value for prop `value` on <option> tag. ' +
1095
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1096
'For details, see https://react.dev/link/attribute-behavior \n' +
1099
- ' in option (at **)' +
1100
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1097
+ ' in option (at **)',
1098
]);
1099
1100
let node = container.firstChild;
@@ -1134,8 +1131,7 @@ describe('ReactDOMSelect', () => {
1131
'Invalid value for prop `value` on <option> tag. ' +
1132
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1133
'For details, see https://react.dev/link/attribute-behavior \n' +
1137
- ' in option (at **)' +
1138
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1134
+ ' in option (at **)',
1135
]);
1136
1137
const node = container.firstChild;
@@ -1158,8 +1154,7 @@ describe('ReactDOMSelect', () => {
1154
'Invalid value for prop `value` on <option> tag. ' +
1155
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1156
'For details, see https://react.dev/link/attribute-behavior \n' +
1161
- ' in option (at **)' +
1162
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1157
+ ' in option (at **)',
1158
]);
1159
1160
let node = container.firstChild;
@@ -1199,8 +1194,7 @@ describe('ReactDOMSelect', () => {
1194
'Invalid value for prop `value` on <option> tag. ' +
1195
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1196
'For details, see https://react.dev/link/attribute-behavior \n' +
1202
- ' in option (at **)' +
1203
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1197
+ ' in option (at **)',
1198
]);
1199
1200
const node = container.firstChild;
@@ -1223,8 +1217,7 @@ describe('ReactDOMSelect', () => {
1217
'Invalid value for prop `value` on <option> tag. ' +
1218
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1219
'For details, see https://react.dev/link/attribute-behavior \n' +
1226
- ' in option (at **)' +
1227
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1220
+ ' in option (at **)',
1221
]);
1222
1223
const node = container.firstChild;
@@ -1247,8 +1240,7 @@ describe('ReactDOMSelect', () => {
1240
'Invalid value for prop `value` on <option> tag. ' +
1241
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1242
'For details, see https://react.dev/link/attribute-behavior \n' +
1250
- ' in option (at **)' +
1251
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1243
+ ' in option (at **)',
1244
]);
1245
1246
let node = container.firstChild;
@@ -1284,8 +1276,7 @@ describe('ReactDOMSelect', () => {
1276
'Invalid value for prop `value` on <option> tag. ' +
1277
'Either remove it from the element, or pass a string or number value to keep it in the DOM. ' +
1278
'For details, see https://react.dev/link/attribute-behavior \n' +
1287
- ' in option (at **)' +
1288
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1279
+ ' in option (at **)',
1280
]);
1281
1282
let node = container.firstChild;
@@ -1366,12 +1357,10 @@ describe('ReactDOMSelect', () => {
1357
assertConsoleErrorDev([
1358
'The provided `value` attribute is an unsupported type TemporalLike.' +
1359
' This value must be coerced to a string before using it here.\n' +
1369
- ' in option (at **)' +
1370
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1360
+ ' in option (at **)',
1361
'The provided `value` attribute is an unsupported type TemporalLike.' +
1362
' This value must be coerced to a string before using it here.\n' +
1373
- ' in option (at **)' +
1374
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1363
+ ' in option (at **)',
1364
]);
1365
});
1366
@@ -1395,12 +1384,10 @@ describe('ReactDOMSelect', () => {
1384
assertConsoleErrorDev([
1385
'The provided `value` attribute is an unsupported type TemporalLike.' +
1386
' This value must be coerced to a string before using it here.\n' +
1398
- ' in option (at **)' +
1399
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1387
+ ' in option (at **)',
1388
'The provided `value` attribute is an unsupported type TemporalLike.' +
1389
' This value must be coerced to a string before using it here.\n' +
1402
- ' in option (at **)' +
1403
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1390
+ ' in option (at **)',
1391
]);
1392
});
1393
@@ -1467,8 +1454,7 @@ describe('ReactDOMSelect', () => {
1454
assertConsoleErrorDev([
1455
'The provided `value` attribute is an unsupported type TemporalLike.' +
1456
' This value must be coerced to a string before using it here.\n' +
1470
- ' in option (at **)' +
1471
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1457
+ ' in option (at **)',
1458
]);
1459
});
1460
@@ -1508,8 +1494,7 @@ describe('ReactDOMSelect', () => {
1494
assertConsoleErrorDev([
1495
'The provided `value` attribute is an unsupported type TemporalLike.' +
1496
' This value must be coerced to a string before using it here.\n' +
1511
- ' in option (at **)' +
1512
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1497
+ ' in option (at **)',
1498
'Form field values (value, checked, defaultValue, or defaultChecked props)' +
1499
' must be strings, not TemporalLike. ' +
1500
'This value must be coerced to a string before using it here.\n' +
@@ -1563,12 +1548,10 @@ describe('ReactDOMSelect', () => {
1548
assertConsoleErrorDev([
1549
'The provided `value` attribute is an unsupported type TemporalLike.' +
1550
' This value must be coerced to a string before using it here.\n' +
1566
- ' in option (at **)' +
1567
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1551
+ ' in option (at **)',
1552
'The provided `value` attribute is an unsupported type TemporalLike.' +
1553
' This value must be coerced to a string before using it here.\n' +
1570
- ' in option (at **)' +
1571
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1554
+ ' in option (at **)',
1555
]);
1556
});
1557
@@ -1591,12 +1574,10 @@ describe('ReactDOMSelect', () => {
1574
assertConsoleErrorDev([
1575
'The provided `value` attribute is an unsupported type TemporalLike.' +
1576
' This value must be coerced to a string before using it here.\n' +
1594
- ' in option (at **)' +
1595
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1577
+ ' in option (at **)',
1578
'The provided `value` attribute is an unsupported type TemporalLike.' +
1579
' This value must be coerced to a string before using it here.\n' +
1598
- ' in option (at **)' +
1599
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1580
+ ' in option (at **)',
1581
]);
1582
});
1583
@@ -1670,12 +1651,10 @@ describe('ReactDOMSelect', () => {
1651
assertConsoleErrorDev([
1652
'The provided `value` attribute is an unsupported type TemporalLike.' +
1653
' This value must be coerced to a string before using it here.\n' +
1673
- ' in option (at **)' +
1674
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1654
+ ' in option (at **)',
1655
'The provided `value` attribute is an unsupported type TemporalLike.' +
1656
' This value must be coerced to a string before using it here.\n' +
1677
- ' in option (at **)' +
1678
- (gate('enableOwnerStacks') ? '' : '\n in select (at **)'),
1657
+ ' in option (at **)',
1658
]);
1659
});
1660
packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
-35
@@ -995,18 +995,6 @@ describe('ReactDOMServerIntegration', () => {
995
async render => {
996
let EmptyComponent = {};
997
EmptyComponent = <EmptyComponent />;
998
- assertConsoleErrorDev(
999
- gate(flags => flags.enableOwnerStacks)
1000
- ? []
1001
- : [
1002
- 'React.jsx: type is invalid -- expected a string ' +
1003
- '(for built-in components) or a class/function (for composite ' +
1004
- 'components) but got: object. You likely forgot to export your ' +
1005
- "component from the file it's defined in, or you might have mixed up " +
1006
- 'default and named imports.',
1007
- ],
1008
- {withoutStack: true},
1009
- );
998
await render(EmptyComponent);
999
},
1000
'Element type is invalid: expected a string (for built-in components) or a class/function ' +
@@ -1022,16 +1010,6 @@ describe('ReactDOMServerIntegration', () => {
1010
async render => {
1011
let NullComponent = null;
1012
NullComponent = <NullComponent />;
1025
- assertConsoleErrorDev(
1026
- gate(flags => flags.enableOwnerStacks)
1027
- ? []
1028
- : [
1029
- 'React.jsx: type is invalid -- expected a string ' +
1030
- '(for built-in components) or a class/function (for composite ' +
1031
- 'components) but got: null.',
1032
- ],
1033
- {withoutStack: true},
1034
- );
1013
await render(NullComponent);
1014
},
1015
'Element type is invalid: expected a string (for built-in components) or a class/function ' +
@@ -1043,19 +1021,6 @@ describe('ReactDOMServerIntegration', () => {
1021
async render => {
1022
let UndefinedComponent = undefined;
1023
UndefinedComponent = <UndefinedComponent />;
1046
- assertConsoleErrorDev(
1047
- gate(flags => flags.enableOwnerStacks)
1048
- ? []
1049
- : [
1050
- 'React.jsx: type is invalid -- expected a string ' +
1051
- '(for built-in components) or a class/function (for composite ' +
1052
- 'components) but got: undefined. You likely forgot to export your ' +
1053
- "component from the file it's defined in, or you might have mixed up " +
1054
- 'default and named imports.',
1055
- ],
1056
- {withoutStack: true},
1057
- );
1058
-
1024
await render(UndefinedComponent);
1025
},
1026
'Element type is invalid: expected a string (for built-in components) or a class/function ' +
packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
-1
@@ -286,7 +286,6 @@ describe('ReactDOMServerLifecycles', () => {
286
'usually means you called setState() outside componentWillMount() on ' +
287
'the server. This is a no-op.\n\n' +
288
'Please check the code for the Outer component.\n' +
289
- (gate('enableOwnerStacks') ? '' : ' in Inner (at **)\n') +
289
' in Outer (at **)',
290
]);
291
});
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
-5
@@ -1923,11 +1923,6 @@ describe('ReactDOMServerPartialHydration', () => {
1923
"Can't perform a React state update on a component that hasn't mounted yet. " +
1924
'This indicates that you have a side-effect in your render function that ' +
1925
'asynchronously later calls tries to update the component. Move this work to useEffect instead.\n' +
1926
- (gate('enableOwnerStacks')
1927
- ? ''
1928
- : ' in Child (at **)\n' +
1929
- ' in Suspense (at **)\n' +
1930
- ' in div (at **)\n') +
1926
' in App (at **)',
1927
]);
1928
packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+1
-2
@@ -171,8 +171,7 @@ describe('ReactDOM HostSingleton', () => {
171
'children of these components will likely fail in unpredictable ways. ' +
172
'Please only render a single instance of <head> and if you need to mount a new one, ' +
173
'ensure any previous ones have unmounted first.\n' +
174
- ' in head (at **)' +
175
- (gate('enableOwnerStacks') ? '' : '\n in html (at **)'),
174
+ ' in head (at **)',
175
]);
176
expect(getVisibleChildren(document)).toEqual(
177
<html>
packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
+8
-6
@@ -60,11 +60,13 @@ describe('ReactDeprecationWarnings', () => {
60
</div>,
61
);
62
await waitForAll([]);
63
- assertConsoleErrorDev([
64
- 'FunctionalComponent: Support for defaultProps ' +
65
- 'will be removed from memo components in a future major ' +
66
- 'release. Use JavaScript default parameters instead.\n' +
67
- ' in div (at **)',
68
- ]);
63
+ assertConsoleErrorDev(
64
+ [
65
+ 'FunctionalComponent: Support for defaultProps ' +
66
+ 'will be removed from memo components in a future major ' +
67
+ 'release. Use JavaScript default parameters instead.',
68
+ ],
69
+ {withoutStack: true},
70
+ );
71
});
72
});
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
-23
@@ -2381,17 +2381,6 @@ describe('ReactErrorBoundaries', () => {
2381
'class/function (for composite components) but got: null.',
2382
);
2383
2384
- if (!gate('enableOwnerStacks')) {
2385
- assertConsoleErrorDev(
2386
- [
2387
- 'React.jsx: type is invalid -- expected a string ' +
2388
- '(for built-in components) or a class/function ' +
2389
- '(for composite components) but got: null.',
2390
- ],
2391
- {withoutStack: true},
2392
- );
2393
- }
2394
-
2384
await expect(async () => {
2385
const container = document.createElement('div');
2386
const root = ReactDOMClient.createRoot(container);
@@ -2403,18 +2392,6 @@ describe('ReactErrorBoundaries', () => {
2392
'expected a string (for built-in components) or a ' +
2393
'class/function (for composite components) but got: undefined.',
2394
);
2406
- if (!gate('enableOwnerStacks')) {
2407
- assertConsoleErrorDev(
2408
- [
2409
- 'React.jsx: type is invalid -- expected a string ' +
2410
- '(for built-in components) or a class/function ' +
2411
- '(for composite components) but got: undefined. ' +
2412
- "You likely forgot to export your component from the file it's defined in, " +
2413
- 'or you might have mixed up default and named imports.',
2414
- ],
2415
- {withoutStack: true},
2416
- );
2417
- }
2395
});
2396
2397
it('renders empty output if error boundary does not handle the error', async () => {
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
-2
@@ -116,7 +116,6 @@ describe('ReactFunctionComponent', () => {
116
' in GrandParent (at **)',
117
'Child uses the legacy contextTypes API which will soon be removed. ' +
118
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
119
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
119
' in Parent (at **)\n' +
120
' in GrandParent (at **)',
121
]);
@@ -260,7 +259,6 @@ describe('ReactFunctionComponent', () => {
259
' in Parent (at **)',
260
'Child uses the legacy contextTypes API which will be removed soon. ' +
261
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
263
- ' in Child (at **)\n' +
262
' in Parent (at **)',
263
]);
264
expect(el.textContent).toBe('en');
packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
+1
-18
@@ -121,13 +121,9 @@ describe('ReactLegacyCompositeComponent', () => {
121
assertConsoleErrorDev([
122
'Child uses the legacy childContextTypes API which will soon be removed. ' +
123
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
124
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
124
' in Parent (at **)',
125
'Grandchild uses the legacy contextTypes API which will soon be removed. ' +
126
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
128
- (gate('enableOwnerStacks')
129
- ? ''
130
- : ' in Grandchild (at **)\n' + ' in Child (at **)\n') +
127
' in Parent (at **)',
128
]);
129
expect(findDOMNode(component).innerHTML).toBe('bar');
@@ -200,10 +196,7 @@ describe('ReactLegacyCompositeComponent', () => {
196
' in Parent (at **)',
197
'Child uses the legacy contextTypes API which will soon be removed. ' +
198
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
203
- ' in Child (at **)' +
204
- (gate('enableOwnerStacks')
205
- ? ''
206
- : '\n in Middle (at **)' + '\n in Parent (at **)'),
199
+ ' in Child (at **)',
200
]);
201
202
await act(() => {
@@ -268,15 +261,9 @@ describe('ReactLegacyCompositeComponent', () => {
261
assertConsoleErrorDev([
262
'Parent uses the legacy childContextTypes API which will soon be removed. ' +
263
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
271
- (gate('enableOwnerStacks') ? '' : ' in Parent (at **)\n') +
264
' in Wrapper (at **)',
265
'Child uses the legacy contextTypes API which will soon be removed. ' +
266
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
275
- (gate('enableOwnerStacks')
276
- ? ''
277
- : ' in Child (at **)\n' +
278
- ' in div (at **)\n' +
279
- ' in Parent (at **)\n') +
267
' in Wrapper (at **)',
268
]);
269
@@ -361,15 +348,12 @@ describe('ReactLegacyCompositeComponent', () => {
348
' in Parent (at **)',
349
'Child uses the legacy childContextTypes API which will soon be removed. ' +
350
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
364
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
351
' in Parent (at **)',
352
'Child uses the legacy contextTypes API which will soon be removed. ' +
353
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
368
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
354
' in Parent (at **)',
355
'Grandchild uses the legacy contextTypes API which will soon be removed. ' +
356
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
372
- (gate('enableOwnerStacks') ? '' : ' in Grandchild (at **)\n') +
357
' in Child (at **)\n' +
358
' in Parent (at **)',
359
]);
@@ -441,7 +425,6 @@ describe('ReactLegacyCompositeComponent', () => {
425
assertConsoleErrorDev([
426
'Child uses the legacy contextTypes API which will soon be removed. ' +
427
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
444
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
428
' in Parent (at **)',
429
]);
430
packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
+4
-16
@@ -104,16 +104,10 @@ describe('ReactLegacyContextDisabled', () => {
104
' in LegacyProvider (at **)',
105
'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
106
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
107
- ' in LegacyClsConsumer (at **)' +
108
- (gate('enableOwnerStacks')
109
- ? ''
110
- : '\n' + ' in span (at **)\n' + ' in LegacyProvider (at **)'),
107
+ ' in LegacyClsConsumer (at **)',
108
'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
109
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
113
- ' in LegacyFnConsumer (at **)' +
114
- (gate('enableOwnerStacks')
115
- ? ''
116
- : '\n' + ' in span (at **)\n' + ' in LegacyProvider (at **)'),
110
+ ' in LegacyFnConsumer (at **)',
111
]);
112
expect(container.textContent).toBe('{}undefinedundefined');
113
expect(lifecycleContextLog).toEqual([]);
@@ -151,16 +145,10 @@ describe('ReactLegacyContextDisabled', () => {
145
' in LegacyProvider (at **)',
146
'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
147
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
154
- ' in LegacyClsConsumer (at **)' +
155
- (gate('enableOwnerStacks')
156
- ? ''
157
- : '\n' + ' in span (at **)\n' + ' in LegacyProvider (at **)'),
148
+ ' in LegacyClsConsumer (at **)',
149
'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
150
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
160
- ' in LegacyFnConsumer (at **)' +
161
- (gate('enableOwnerStacks')
162
- ? ''
163
- : '\n' + ' in span (at **)\n' + ' in LegacyProvider (at **)'),
151
+ ' in LegacyFnConsumer (at **)',
152
]);
153
expect(text).toBe('<span>{}<!-- -->undefined<!-- -->undefined</span>');
154
expect(lifecycleContextLog).toEqual([{}, {}, {}]);
packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
-20
@@ -2112,16 +2112,6 @@ describe('ReactLegacyErrorBoundaries', () => {
2112
ReactDOM.render(<X />, container);
2113
});
2114
}).rejects.toThrow('got: null');
2115
- if (gate(flags => !flags.enableOwnerStacks)) {
2116
- assertConsoleErrorDev(
2117
- [
2118
- 'React.jsx: type is invalid -- expected a string ' +
2119
- '(for built-in components) or a class/function ' +
2120
- '(for composite components) but got: null.',
2121
- ],
2122
- {withoutStack: true},
2123
- );
2124
- }
2115
2116
await expect(async () => {
2117
const container = document.createElement('div');
@@ -2129,16 +2119,6 @@ describe('ReactLegacyErrorBoundaries', () => {
2119
ReactDOM.render(<Y />, container);
2120
});
2121
}).rejects.toThrow('got: undefined');
2132
- if (gate(flags => !flags.enableOwnerStacks)) {
2133
- assertConsoleErrorDev(
2134
- [
2135
- 'React.jsx: type is invalid -- expected a string ' +
2136
- '(for built-in components) or a class/function ' +
2137
- '(for composite components) but got: undefined.',
2138
- ],
2139
- {withoutStack: true},
2140
- );
2141
- }
2122
});
2123
2124
// @gate !disableLegacyMode
packages/react-dom/src/__tests__/ReactMultiChild-test.js
+2
-14
@@ -228,13 +228,7 @@ describe('ReactMultiChild', () => {
228
'across updates. Non-unique keys may cause children to be ' +
229
'duplicated and/or omitted — the behavior is unsupported and ' +
230
'could change in a future version.\n' +
231
- ' in div (at **)' +
232
- (gate(flags => flags.enableOwnerStacks)
233
- ? ''
234
- : '\n in div (at **)' +
235
- '\n in WrapperComponent (at **)' +
236
- '\n in div (at **)' +
237
- '\n in Parent (at **)'),
231
+ ' in div (at **)',
232
]);
233
});
234
@@ -290,13 +284,7 @@ describe('ReactMultiChild', () => {
284
'across updates. Non-unique keys may cause children to be ' +
285
'duplicated and/or omitted — the behavior is unsupported and ' +
286
'could change in a future version.\n' +
293
- ' in div (at **)' +
294
- (gate(flags => flags.enableOwnerStacks)
295
- ? ''
296
- : '\n in div (at **)' +
297
- '\n in WrapperComponent (at **)' +
298
- '\n in div (at **)' +
299
- '\n in Parent (at **)'),
287
+ ' in div (at **)',
288
]);
289
});
290
});
packages/react-dom/src/__tests__/ReactServerRendering-test.js
+25
-66
@@ -758,20 +758,12 @@ describe('ReactDOMServer', () => {
758
'<inPUT /> is using incorrect casing. ' +
759
'Use PascalCase for React components, ' +
760
'or lowercase for HTML elements.\n' +
761
- ' in inPUT (at **)' +
762
- (gate('enableOwnerStacks') ? '' : '\n in div (at **)'),
761
+ ' in inPUT (at **)',
762
// linearGradient doesn't warn
763
'<iFrame /> is using incorrect casing. ' +
764
'Use PascalCase for React components, ' +
765
'or lowercase for HTML elements.\n' +
767
- ' in iFrame (at **)' +
768
- (gate('enableOwnerStacks')
769
- ? ''
770
- : '\n in foreignObject (at **)' +
771
- '\n in g (at **)' +
772
- '\n in CompositeG (at **)' +
773
- '\n in svg (at **)' +
774
- '\n in div (at **)'),
766
+ ' in iFrame (at **)',
767
]);
768
});
769
@@ -869,30 +861,14 @@ describe('ReactDOMServer', () => {
861
ReactDOMServer.renderToString(<App />);
862
assertConsoleErrorDev([
863
'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
872
- (gate(flags => flags.enableOwnerStacks)
873
- ? ' in span (at **)\n' +
874
- ' in B (at **)\n' +
875
- ' in Child (at **)\n' +
876
- ' in App (at **)'
877
- : ' in span (at **)\n' +
878
- ' in b (at **)\n' +
879
- ' in C (at **)\n' +
880
- ' in font (at **)\n' +
881
- ' in B (at **)\n' +
882
- ' in Child (at **)\n' +
883
- ' in span (at **)\n' +
884
- ' in div (at **)\n' +
885
- ' in App (at **)'),
864
+ ' in span (at **)\n' +
865
+ ' in B (at **)\n' +
866
+ ' in Child (at **)\n' +
867
+ ' in App (at **)',
868
'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
887
- (gate(flags => flags.enableOwnerStacks)
888
- ? ' in span (at **)\n' +
889
- ' in Child (at **)\n' +
890
- ' in App (at **)'
891
- : ' in span (at **)\n' +
892
- ' in Child (at **)\n' +
893
- ' in span (at **)\n' +
894
- ' in div (at **)\n' +
895
- ' in App (at **)'),
869
+ ' in span (at **)\n' +
870
+ ' in Child (at **)\n' +
871
+ ' in App (at **)',
872
]);
873
});
874
@@ -929,47 +905,30 @@ describe('ReactDOMServer', () => {
905
assertConsoleErrorDev([
906
// ReactDOMServer(App > div > span)
907
'Invalid ARIA attribute `ariaTypo`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
932
- (gate(flags => flags.enableOwnerStacks)
933
- ? ' in span (at **)\n' + ' in App (at **)'
934
- : ' in span (at **)\n' +
935
- ' in div (at **)\n' +
936
- ' in App (at **)'),
908
+ ' in span (at **)\n' +
909
+ ' in App (at **)',
910
// ReactDOMServer(App > div > Child) >>> ReactDOMServer(App2) >>> ReactDOMServer(blink)
911
'Invalid ARIA attribute `ariaTypo2`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
939
- (gate(flags => flags.enableOwnerStacks)
940
- ? ' in blink (at **)\n' +
941
- ' in App2 (at **)\n' +
942
- ' in Child (at **)\n' +
943
- ' in App (at **)'
944
- : ' in blink (at **)'),
912
+ ' in blink (at **)\n' +
913
+ ' in App2 (at **)\n' +
914
+ ' in Child (at **)\n' +
915
+ ' in App (at **)',
916
// ReactDOMServer(App > div > Child) >>> ReactDOMServer(App2 > Child2 > span)
917
'Invalid ARIA attribute `ariaTypo3`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
947
- (gate(flags => flags.enableOwnerStacks)
948
- ? ' in span (at **)\n' +
949
- ' in Child2 (at **)\n' +
950
- ' in App2 (at **)\n' +
951
- ' in Child (at **)\n' +
952
- ' in App (at **)'
953
- : ' in span (at **)\n' +
954
- ' in Child2 (at **)\n' +
955
- ' in App2 (at **)'),
918
+ ' in span (at **)\n' +
919
+ ' in Child2 (at **)\n' +
920
+ ' in App2 (at **)\n' +
921
+ ' in Child (at **)\n' +
922
+ ' in App (at **)',
923
// ReactDOMServer(App > div > Child > span)
924
'Invalid ARIA attribute `ariaTypo4`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
958
- (gate(flags => flags.enableOwnerStacks)
959
- ? ' in span (at **)\n' +
960
- ' in Child (at **)\n' +
961
- ' in App (at **)'
962
- : ' in span (at **)\n' +
963
- ' in Child (at **)\n' +
964
- ' in div (at **)\n' +
965
- ' in App (at **)'),
925
+ ' in span (at **)\n' +
926
+ ' in Child (at **)\n' +
927
+ ' in App (at **)',
928
// ReactDOMServer(App > div > font)
929
'Invalid ARIA attribute `ariaTypo5`. ARIA attributes follow the pattern aria-* and must be lowercase.\n' +
968
- (gate(flags => flags.enableOwnerStacks)
969
- ? ' in font (at **)\n' + ' in App (at **)'
970
- : ' in font (at **)\n' +
971
- ' in div (at **)\n' +
972
- ' in App (at **)'),
930
+ ' in font (at **)\n' +
931
+ ' in App (at **)',
932
]);
933
});
934
packages/react-dom/src/__tests__/ReactUpdates-test.js
+2
-8
@@ -1877,9 +1877,7 @@ describe('ReactUpdates', () => {
1877
const originalConsoleError = console.error;
1878
console.error = e => {
1879
error = e;
1880
- ownerStack = gate(flags => flags.enableOwnerStacks)
1881
- ? React.captureOwnerStack()
1882
- : null;
1880
+ ownerStack = React.captureOwnerStack();
1881
debugStack = new Error().stack;
1882
Scheduler.log('stop');
1883
};
@@ -1895,11 +1893,7 @@ describe('ReactUpdates', () => {
1893
expect(error).toContain('Maximum update depth exceeded');
1894
// The currently executing effect should be on the native stack
1895
expect(debugStack).toContain('at myEffect');
1898
- if (gate(flags => flags.enableOwnerStacks)) {
1899
- expect(ownerStack).toContain('at App');
1900
- } else {
1901
- expect(ownerStack).toBe(null);
1902
- }
1896
+ expect(ownerStack).toContain('at App');
1897
});
1898
1899
it('can have nested updates if they do not cross the limit', async () => {
packages/react-dom/src/__tests__/validateDOMNesting-test.js
+24
-50
@@ -121,34 +121,20 @@ describe('validateDOMNesting', () => {
121
);
122
expectWarnings(
123
['div', 'ul', 'li', 'div', 'li'],
124
- gate(flags => flags.enableOwnerStacks)
125
- ? [
126
- 'In HTML, <li> cannot be a descendant of <li>.\n' +
127
- 'This will cause a hydration error.\n' +
128
- '\n' +
129
- ' <ul>\n' +
130
- '> <li>\n' +
131
- ' <div>\n' +
132
- '> <li>\n' +
133
- '\n' +
134
- ' in li (at **)',
135
- '<li> cannot contain a nested <li>.\nSee this log for the ancestor stack trace.\n' +
136
- ' in li (at **)',
137
- ]
138
- : [
139
- 'In HTML, <li> cannot be a descendant of <li>.\n' +
140
- 'This will cause a hydration error.\n' +
141
- '\n' +
142
- ' <ul>\n' +
143
- '> <li>\n' +
144
- ' <div>\n' +
145
- '> <li>\n' +
146
- '\n' +
147
- ' in li (at **)\n' +
148
- ' in div (at **)\n' +
149
- ' in li (at **)\n' +
150
- ' in ul (at **)',
151
- ],
124
+
125
+ [
126
+ 'In HTML, <li> cannot be a descendant of <li>.\n' +
127
+ 'This will cause a hydration error.\n' +
128
+ '\n' +
129
+ ' <ul>\n' +
130
+ '> <li>\n' +
131
+ ' <div>\n' +
132
+ '> <li>\n' +
133
+ '\n' +
134
+ ' in li (at **)',
135
+ '<li> cannot contain a nested <li>.\nSee this log for the ancestor stack trace.\n' +
136
+ ' in li (at **)',
137
+ ],
138
);
139
expectWarnings(
140
['div', 'html'],
@@ -208,28 +194,16 @@ describe('validateDOMNesting', () => {
194
);
195
expectWarnings(
196
['svg', 'foreignObject', 'body', 'p'],
211
- gate(flags => flags.enableOwnerStacks)
212
- ? [
213
- // TODO, this should say "In SVG",
214
- 'In HTML, <body> cannot be a child of <foreignObject>.\n' +
215
- 'This will cause a hydration error.\n' +
216
- '\n' +
217
- '> <foreignObject>\n' +
218
- '> <body>\n' +
219
- '\n' +
220
- ' in body (at **)',
221
- ]
222
- : [
223
- // TODO, this should say "In SVG",
224
- 'In HTML, <body> cannot be a child of <foreignObject>.\n' +
225
- 'This will cause a hydration error.\n' +
226
- '\n' +
227
- '> <foreignObject>\n' +
228
- '> <body>\n' +
229
- '\n' +
230
- ' in body (at **)\n' +
231
- ' in foreignObject (at **)',
232
- ],
197
+ [
198
+ // TODO, this should say "In SVG",
199
+ 'In HTML, <body> cannot be a child of <foreignObject>.\n' +
200
+ 'This will cause a hydration error.\n' +
201
+ '\n' +
202
+ '> <foreignObject>\n' +
203
+ '> <body>\n' +
204
+ '\n' +
205
+ ' in body (at **)',
206
+ ],
207
);
208
});
209
packages/react-markup/src/__tests__/ReactMarkupClient-test.js
+1
-3
@@ -233,9 +233,7 @@ if (!__EXPERIMENTAL__) {
233
'\n in div (at **)',
234
);
235
expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
236
- __DEV__ && gate(flags => flags.enableOwnerStacks)
237
- ? '\n in Bar (at **)' + '\n in Foo (at **)'
238
- : null,
236
+ __DEV__ ? '\n in Bar (at **)' + '\n in Foo (at **)' : null,
237
);
238
});
239
});
packages/react-markup/src/__tests__/ReactMarkupServer-test.js
+1
-3
@@ -269,9 +269,7 @@ if (!__EXPERIMENTAL__) {
269
: '\n in div (at **)' + '\n in div (at **)',
270
);
271
expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
272
- __DEV__ && gate(flags => flags.enableOwnerStacks)
273
- ? '\n in Bar (at **)' + '\n in Foo (at **)'
274
- : null,
272
+ __DEV__ ? '\n in Bar (at **)' + '\n in Foo (at **)' : null,
273
);
274
});
275
});
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+1
-4
@@ -875,10 +875,7 @@ describe('ReactFabric', () => {
875
});
876
assertConsoleErrorDev([
877
'Text strings must be rendered within a <Text> component.\n' +
878
- ' in RCTScrollView (at **)' +
879
- (gate(flags => !flags.enableOwnerStacks)
880
- ? '\n in RCTText (at **)'
881
- : ''),
878
+ ' in RCTScrollView (at **)',
879
]);
880
});
881
packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+2
-4
@@ -7,8 +7,6 @@
7
8
import isArray from 'shared/isArray';
9
10
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
11
-
10
import {runWithFiberInDEV} from 'react-reconciler/src/ReactCurrentFiber';
11
12
let hasError = false;
@@ -99,7 +97,7 @@ export function executeDispatchesInOrder(event) {
97
// Listeners and Instances are two parallel arrays that are always in sync.
98
const listener = dispatchListeners[i];
99
const instance = dispatchInstances[i];
102
- if (__DEV__ && enableOwnerStacks && instance !== null) {
100
+ if (__DEV__ && instance !== null) {
101
runWithFiberInDEV(instance, executeDispatch, event, listener, instance);
102
} else {
103
executeDispatch(event, listener, instance);
@@ -108,7 +106,7 @@ export function executeDispatchesInOrder(event) {
106
} else if (dispatchListeners) {
107
const listener = dispatchListeners;
108
const instance = dispatchInstances;
111
- if (__DEV__ && enableOwnerStacks && instance !== null) {
109
+ if (__DEV__ && instance !== null) {
110
runWithFiberInDEV(instance, executeDispatch, event, listener, instance);
111
} else {
112
executeDispatch(event, listener, instance);
packages/react-reconciler/src/ReactChildFiber.js
+8
-25
@@ -47,7 +47,6 @@ import isArray from 'shared/isArray';
47
import {
48
enableAsyncIterableChildren,
49
disableLegacyMode,
50
- enableOwnerStacks,
50
} from 'shared/ReactFeatureFlags';
51
52
import {
@@ -488,9 +487,7 @@ function createChildReconciler(
487
if (__DEV__) {
488
// We treat the parent as the owner for stack purposes.
489
created._debugOwner = returnFiber;
491
- if (enableOwnerStacks) {
492
- created._debugTask = returnFiber._debugTask;
493
- }
490
+ created._debugTask = returnFiber._debugTask;
491
created._debugInfo = currentDebugInfo;
492
}
493
return created;
@@ -609,9 +606,7 @@ function createChildReconciler(
606
if (__DEV__) {
607
// We treat the parent as the owner for stack purposes.
608
created._debugOwner = returnFiber;
612
- if (enableOwnerStacks) {
613
- created._debugTask = returnFiber._debugTask;
614
- }
609
+ created._debugTask = returnFiber._debugTask;
610
created._debugInfo = currentDebugInfo;
611
}
612
return created;
@@ -649,9 +644,7 @@ function createChildReconciler(
644
if (__DEV__) {
645
// We treat the parent as the owner for stack purposes.
646
created._debugOwner = returnFiber;
652
- if (enableOwnerStacks) {
653
- created._debugTask = returnFiber._debugTask;
654
- }
647
+ created._debugTask = returnFiber._debugTask;
648
created._debugInfo = currentDebugInfo;
649
}
650
return created;
@@ -718,9 +711,7 @@ function createChildReconciler(
711
if (__DEV__) {
712
// We treat the parent as the owner for stack purposes.
713
created._debugOwner = returnFiber;
721
- if (enableOwnerStacks) {
722
- created._debugTask = returnFiber._debugTask;
723
- }
714
+ created._debugTask = returnFiber._debugTask;
715
const prevDebugInfo = pushDebugInfo(newChild._debugInfo);
716
created._debugInfo = currentDebugInfo;
717
currentDebugInfo = prevDebugInfo;
@@ -1605,9 +1596,7 @@ function createChildReconciler(
1596
if (__DEV__) {
1597
// We treat the parent as the owner for stack purposes.
1598
created._debugOwner = returnFiber;
1608
- if (enableOwnerStacks) {
1609
- created._debugTask = returnFiber._debugTask;
1610
- }
1599
+ created._debugTask = returnFiber._debugTask;
1600
created._debugInfo = currentDebugInfo;
1601
}
1602
return created;
@@ -1685,9 +1674,7 @@ function createChildReconciler(
1674
if (__DEV__) {
1675
// We treat the parent as the owner for stack purposes.
1676
created._debugOwner = returnFiber;
1688
- if (enableOwnerStacks) {
1689
- created._debugTask = returnFiber._debugTask;
1690
- }
1677
+ created._debugTask = returnFiber._debugTask;
1678
created._debugInfo = currentDebugInfo;
1679
}
1680
validateFragmentProps(element, created, returnFiber);
@@ -1980,16 +1967,12 @@ function createChildReconciler(
1967
// thing when it's thrown from the same async component but not if you await
1968
// a promise started from a different component/task.
1969
throwFiber._debugOwner = returnFiber._debugOwner;
1983
- if (enableOwnerStacks) {
1984
- throwFiber._debugTask = returnFiber._debugTask;
1985
- }
1970
+ throwFiber._debugTask = returnFiber._debugTask;
1971
if (debugInfo != null) {
1972
for (let i = debugInfo.length - 1; i >= 0; i--) {
1973
if (typeof debugInfo[i].stack === 'string') {
1974
throwFiber._debugOwner = (debugInfo[i]: any);
1990
- if (enableOwnerStacks) {
1991
- throwFiber._debugTask = debugInfo[i].debugTask;
1992
- }
1975
+ throwFiber._debugTask = debugInfo[i].debugTask;
1976
break;
1977
}
1978
}
packages/react-reconciler/src/ReactCurrentFiber.js
+6
-15
@@ -10,12 +10,8 @@
10
import type {Fiber} from './ReactInternalTypes';
11
12
import ReactSharedInternals from 'shared/ReactSharedInternals';
13
-import {
14
- getStackByFiberInDevAndProd,
15
- getOwnerStackByFiberInDev,
16
-} from './ReactFiberComponentStack';
13
+import {getOwnerStackByFiberInDev} from './ReactFiberComponentStack';
14
import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
18
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
15
16
export let current: Fiber | null = null;
17
export let isRendering: boolean = false;
@@ -42,10 +38,7 @@ function getCurrentFiberStackInDev(): string {
38
// and it is guaranteed to be the work-in-progress version.
39
// TODO: The above comment is not actually true. We might be
40
// in a commit phase or preemptive set state callback.
45
- if (enableOwnerStacks) {
46
- return getOwnerStackByFiberInDev(current);
47
- }
48
- return getStackByFiberInDevAndProd(current);
41
+ return getOwnerStackByFiberInDev(current);
42
}
43
return '';
44
}
@@ -63,12 +56,10 @@ export function runWithFiberInDEV<A0, A1, A2, A3, A4, T>(
56
const previousFiber = current;
57
setCurrentFiber(fiber);
58
try {
66
- if (enableOwnerStacks) {
67
- if (fiber !== null && fiber._debugTask) {
68
- return fiber._debugTask.run(
69
- callback.bind(null, arg0, arg1, arg2, arg3, arg4),
70
- );
71
- }
59
+ if (fiber !== null && fiber._debugTask) {
60
+ return fiber._debugTask.run(
61
+ callback.bind(null, arg0, arg1, arg2, arg3, arg4),
62
+ );
63
}
64
return callback(arg0, arg1, arg2, arg3, arg4);
65
} finally {
packages/react-reconciler/src/ReactFiber.js
+8
-17
@@ -40,7 +40,6 @@ import {
40
enableRenderableContext,
41
disableLegacyMode,
42
enableObjectFiber,
43
- enableOwnerStacks,
43
enableViewTransition,
44
} from 'shared/ReactFeatureFlags';
45
import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
@@ -202,10 +201,8 @@ function FiberNode(
201
// This isn't directly used but is handy for debugging internals:
202
this._debugInfo = null;
203
this._debugOwner = null;
205
- if (enableOwnerStacks) {
206
- this._debugStack = null;
207
- this._debugTask = null;
208
- }
204
+ this._debugStack = null;
205
+ this._debugTask = null;
206
this._debugNeedsRemount = false;
207
this._debugHookTypes = null;
208
if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
@@ -293,10 +290,8 @@ function createFiberImplObject(
290
// This isn't directly used but is handy for debugging internals:
291
fiber._debugInfo = null;
292
fiber._debugOwner = null;
296
- if (enableOwnerStacks) {
297
- fiber._debugStack = null;
298
- fiber._debugTask = null;
299
- }
293
+ fiber._debugStack = null;
294
+ fiber._debugTask = null;
295
fiber._debugNeedsRemount = false;
296
fiber._debugHookTypes = null;
297
if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
@@ -352,10 +347,8 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
347
// DEV-only fields
348
349
workInProgress._debugOwner = current._debugOwner;
355
- if (enableOwnerStacks) {
356
- workInProgress._debugStack = current._debugStack;
357
- workInProgress._debugTask = current._debugTask;
358
- }
350
+ workInProgress._debugStack = current._debugStack;
351
+ workInProgress._debugTask = current._debugTask;
352
workInProgress._debugHookTypes = current._debugHookTypes;
353
}
354
@@ -766,10 +759,8 @@ export function createFiberFromElement(
759
);
760
if (__DEV__) {
761
fiber._debugOwner = element._owner;
769
- if (enableOwnerStacks) {
770
- fiber._debugStack = element._debugStack;
771
- fiber._debugTask = element._debugTask;
772
- }
762
+ fiber._debugStack = element._debugStack;
763
+ fiber._debugTask = element._debugTask;
764
}
765
return fiber;
766
}
packages/react-reconciler/src/ReactFiberBeginWork.js
+2
-5
@@ -114,7 +114,6 @@ import {
114
enableRenderableContext,
115
disableLegacyMode,
116
disableDefaultPropsExceptForClasses,
117
- enableOwnerStacks,
117
enableHydrationLaneScheduling,
118
enableViewTransition,
119
} from 'shared/ReactFeatureFlags';
@@ -3782,10 +3781,8 @@ function beginWork(
3781
workInProgress.mode,
3782
workInProgress.lanes,
3783
);
3785
- if (enableOwnerStacks) {
3786
- copiedFiber._debugStack = workInProgress._debugStack;
3787
- copiedFiber._debugTask = workInProgress._debugTask;
3788
- }
3784
+ copiedFiber._debugStack = workInProgress._debugStack;
3785
+ copiedFiber._debugTask = workInProgress._debugTask;
3786
return remountFiber(current, workInProgress, copiedFiber);
3787
}
3788
}
packages/react-reconciler/src/ReactFiberComponentStack.js
+2
-5
@@ -7,10 +7,7 @@
7
* @flow
8
*/
9
10
-import {
11
- enableOwnerStacks,
12
- enableViewTransition,
13
-} from 'shared/ReactFeatureFlags';
10
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
11
import type {Fiber} from './ReactInternalTypes';
12
import type {ReactComponentInfo} from 'shared/ReactTypes';
13
@@ -101,7 +98,7 @@ function describeFunctionComponentFrameWithoutLineNumber(fn: Function): string {
98
}
99
100
export function getOwnerStackByFiberInDev(workInProgress: Fiber): string {
104
- if (!enableOwnerStacks || !__DEV__) {
101
+ if (!__DEV__) {
102
return '';
103
}
104
try {
packages/react-reconciler/src/ReactFiberErrorLogger.js
+2
-32
@@ -18,8 +18,6 @@ import reportGlobalError from 'shared/reportGlobalError';
18
19
import ReactSharedInternals from 'shared/ReactSharedInternals';
20
21
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
22
-
21
import {bindToConsole} from './ReactFiberConfig';
22
23
// Side-channel since I'm not sure we want to make this part of the public API
@@ -46,18 +44,6 @@ export function defaultOnUncaughtError(
44
'Consider adding an error boundary to your tree to customize error handling behavior.\n' +
45
'Visit https://react.dev/link/error-boundaries to learn more about error boundaries.';
46
49
- const prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
50
- if (!enableOwnerStacks) {
51
- // The current Fiber is disconnected at this point which means that console printing
52
- // cannot add a component stack since it terminates at the deletion node. This is not
53
- // a problem for owner stacks which are not disconnected but for the parent component
54
- // stacks we need to use the snapshot we've previously extracted.
55
- const componentStack =
56
- errorInfo.componentStack != null ? errorInfo.componentStack : '';
57
- ReactSharedInternals.getCurrentStack = function () {
58
- return componentStack;
59
- };
60
- }
47
try {
48
console.warn(
49
'%s\n\n%s\n',
@@ -66,9 +52,7 @@ export function defaultOnUncaughtError(
52
// We let our console.error wrapper add the component stack to the end.
53
);
54
} finally {
69
- if (!enableOwnerStacks) {
70
- ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
71
- }
55
+ // ignore
56
}
57
}
58
}
@@ -97,18 +81,6 @@ export function defaultOnCaughtError(
81
errorBoundaryName || 'Anonymous'
82
}.`;
83
100
- const prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
101
- if (!enableOwnerStacks) {
102
- // The current Fiber is disconnected at this point which means that console printing
103
- // cannot add a component stack since it terminates at the deletion node. This is not
104
- // a problem for owner stacks which are not disconnected but for the parent component
105
- // stacks we need to use the snapshot we've previously extracted.
106
- const componentStack =
107
- errorInfo.componentStack != null ? errorInfo.componentStack : '';
108
- ReactSharedInternals.getCurrentStack = function () {
109
- return componentStack;
110
- };
111
- }
84
try {
85
if (
86
typeof error === 'object' &&
@@ -138,9 +110,7 @@ export function defaultOnCaughtError(
110
);
111
}
112
} finally {
141
- if (!enableOwnerStacks) {
142
- ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
143
- }
113
+ // ignore
114
}
115
} else {
116
// In production, we print the error directly.
packages/react-reconciler/src/__tests__/ErrorBoundaryReconciliation-test.internal.js
-6
@@ -6,7 +6,6 @@ describe('ErrorBoundaryReconciliation', () => {
6
let ReactTestRenderer;
7
let span;
8
let act;
9
- let assertConsoleErrorDev;
9
10
beforeEach(() => {
11
jest.resetModules();
@@ -14,8 +13,6 @@ describe('ErrorBoundaryReconciliation', () => {
13
ReactTestRenderer = require('react-test-renderer');
14
React = require('react');
15
act = require('internal-test-utils').act;
17
- assertConsoleErrorDev =
18
- require('internal-test-utils').assertConsoleErrorDev;
16
DidCatchErrorBoundary = class extends React.Component {
17
state = {error: null};
18
componentDidCatch(error) {
@@ -68,9 +65,6 @@ describe('ErrorBoundaryReconciliation', () => {
65
</ErrorBoundary>,
66
);
67
});
71
- if (gate(flags => !flags.enableOwnerStacks)) {
72
- assertConsoleErrorDev(['invalid', 'invalid']);
73
- }
68
69
const Fallback = fallbackTagName;
70
expect(renderer).toMatchRenderedOutput(<Fallback prop="ErrorBoundary" />);
packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js
+1
-3
@@ -168,9 +168,7 @@ describe('ReactFragment', () => {
168
'Foo',
169
'CatchingBoundary',
170
]),
171
- gate(flags => flags.enableOwnerStacks) && __DEV__
172
- ? componentStack(['Bar', 'Foo'])
173
- : null,
171
+ __DEV__ ? componentStack(['Bar', 'Foo']) : null,
172
]);
173
});
174
});
packages/react-reconciler/src/__tests__/ReactFragment-test.js
+6
-13
@@ -744,19 +744,12 @@ describe('ReactFragment', () => {
744
ReactNoop.render(<Foo condition={false} />);
745
await waitForAll([]);
746
assertConsoleErrorDev([
747
- gate('enableOwnerStacks')
748
- ? 'Each child in a list should have a unique "key" prop.\n' +
749
- '\n' +
750
- 'Check the render method of `div`. ' +
751
- 'It was passed a child from Foo. ' +
752
- 'See https://react.dev/link/warning-keys for more information.\n' +
753
- ' in Foo (at **)'
754
- : 'Each child in a list should have a unique "key" prop.\n' +
755
- '\n' +
756
- 'Check the render method of `Foo`. ' +
757
- 'See https://react.dev/link/warning-keys for more information.\n' +
758
- ' in Stateful (at **)\n' +
759
- ' in Foo (at **)',
747
+ 'Each child in a list should have a unique "key" prop.\n' +
748
+ '\n' +
749
+ 'Check the render method of `div`. ' +
750
+ 'It was passed a child from Foo. ' +
751
+ 'See https://react.dev/link/warning-keys for more information.\n' +
752
+ ' in Foo (at **)',
753
]);
754
755
expect(ops).toEqual([]);
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+8
-16
@@ -1236,24 +1236,20 @@ describe('ReactHooks', () => {
1236
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
1237
'In function components, you can read it directly in the function body, ' +
1238
'but not inside Hooks like useReducer() or useMemo().\n' +
1239
- ' in App (at **)' +
1240
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1239
+ ' in App (at **)',
1240
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1241
'You can only call Hooks at the top level of your React function. ' +
1242
'For more information, see https://react.dev/link/rules-of-hooks\n' +
1244
- ' in App (at **)' +
1245
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1243
+ ' in App (at **)',
1244
'Context can only be read while React is rendering. ' +
1245
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
1246
'In function components, you can read it directly in the function body, ' +
1247
'but not inside Hooks like useReducer() or useMemo().\n' +
1250
- ' in App (at **)' +
1251
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1248
+ ' in App (at **)',
1249
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1250
'You can only call Hooks at the top level of your React function. ' +
1251
'For more information, see https://react.dev/link/rules-of-hooks\n' +
1255
- ' in App (at **)' +
1256
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1252
+ ' in App (at **)',
1253
]);
1254
1255
function Valid() {
@@ -1293,24 +1289,20 @@ describe('ReactHooks', () => {
1289
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
1290
'In function components, you can read it directly in the function body, ' +
1291
'but not inside Hooks like useReducer() or useMemo().\n' +
1296
- ' in App (at **)' +
1297
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1292
+ ' in App (at **)',
1293
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1294
'You can only call Hooks at the top level of your React function. ' +
1295
'For more information, see https://react.dev/link/rules-of-hooks\n' +
1301
- ' in App (at **)' +
1302
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1296
+ ' in App (at **)',
1297
'Context can only be read while React is rendering. ' +
1298
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
1299
'In function components, you can read it directly in the function body, ' +
1300
'but not inside Hooks like useReducer() or useMemo().\n' +
1307
- ' in App (at **)' +
1308
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1301
+ ' in App (at **)',
1302
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1303
'You can only call Hooks at the top level of your React function. ' +
1304
'For more information, see https://react.dev/link/rules-of-hooks\n' +
1312
- ' in App (at **)' +
1313
- (gate('enableOwnerStacks') ? '' : '\n in Boundary (at **)'),
1305
+ ' in App (at **)',
1306
]);
1307
});
1308
packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+17
-82
@@ -1803,14 +1803,10 @@ describe('ReactIncremental', () => {
1803
' in Intl (at **)',
1804
'ShowLocale uses the legacy contextTypes API which will soon be removed. ' +
1805
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
1806
- ' in ShowLocale (at **)' +
1807
- (gate('enableOwnerStacks') ? '' : '\n in Intl (at **)'),
1806
+ ' in ShowLocale (at **)',
1807
'ShowBoth uses the legacy contextTypes API which will be removed soon. ' +
1808
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
1810
- ' in ShowBoth (at **)' +
1811
- (gate('enableOwnerStacks')
1812
- ? ''
1813
- : '\n in div (at **)' + '\n in Intl (at **)'),
1809
+ ' in ShowBoth (at **)',
1810
]);
1811
1812
ReactNoop.render(
@@ -1865,16 +1861,10 @@ describe('ReactIncremental', () => {
1861
assertConsoleErrorDev([
1862
'Router uses the legacy childContextTypes API which will soon be removed. ' +
1863
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
1868
- ' in Router (at **)' +
1869
- (gate('enableOwnerStacks') ? '' : '\n in Intl (at **)'),
1864
+ ' in Router (at **)',
1865
'ShowRoute uses the legacy contextTypes API which will soon be removed. ' +
1866
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
1872
- (gate('enableOwnerStacks')
1873
- ? ' in Indirection (at **)'
1874
- : ' in ShowRoute (at **)\n' +
1875
- ' in Indirection (at **)\n' +
1876
- ' in Router (at **)\n' +
1877
- ' in Intl (at **)'),
1867
+ ' in Indirection (at **)',
1868
]);
1869
});
1870
@@ -1972,8 +1962,7 @@ describe('ReactIncremental', () => {
1962
' in Intl (at **)',
1963
'ShowLocale uses the legacy contextTypes API which will soon be removed. ' +
1964
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
1975
- ' in ShowLocale (at **)' +
1976
- (gate('enableOwnerStacks') ? '' : '\n in Intl (at **)'),
1965
+ ' in ShowLocale (at **)',
1966
]);
1967
1968
await waitForAll([
@@ -2068,22 +2057,10 @@ describe('ReactIncremental', () => {
2057
' in Intl (at **)',
2058
'ShowLocaleClass uses the legacy contextTypes API which will soon be removed. ' +
2059
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2071
- ' in ShowLocaleClass (at **)' +
2072
- (gate('enableOwnerStacks')
2073
- ? ''
2074
- : '\n in Stateful (at **)' +
2075
- '\n in IndirectionClass (at **)' +
2076
- '\n in IndirectionFn (at **)' +
2077
- ' in Intl (at **)'),
2060
+ ' in ShowLocaleClass (at **)',
2061
'ShowLocaleFn uses the legacy contextTypes API which will be removed soon. ' +
2062
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
2080
- ' in ShowLocaleFn (at **)' +
2081
- (gate('enableOwnerStacks')
2082
- ? ''
2083
- : '\n in Stateful (at **)' +
2084
- '\n in IndirectionClass (at **)' +
2085
- '\n in IndirectionFn (at **)' +
2086
- ' in Intl (at **)'),
2063
+ ' in ShowLocaleFn (at **)',
2064
]);
2065
2066
statefulInst.setState({x: 1});
@@ -2174,26 +2151,14 @@ describe('ReactIncremental', () => {
2151
assertConsoleErrorDev([
2152
'Intl uses the legacy childContextTypes API which will soon be removed. ' +
2153
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2177
- (gate('enableOwnerStacks') ? '' : ' in Intl (at **)\n') +
2154
' in Stateful (at **)',
2155
'ShowLocaleClass uses the legacy contextTypes API which will soon be removed. ' +
2156
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2181
- ' in ShowLocaleClass (at **)' +
2182
- (gate('enableOwnerStacks')
2183
- ? ''
2184
- : '\n in IndirectionClass (at **)' +
2185
- '\n in IndirectionFn (at **)' +
2186
- '\n in Intl (at **)' +
2187
- '\n in Stateful (at **)'),
2157
+ ' in ShowLocaleClass (at **)',
2158
+
2159
'ShowLocaleFn uses the legacy contextTypes API which will be removed soon. ' +
2160
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
2190
- ' in ShowLocaleFn (at **)' +
2191
- (gate('enableOwnerStacks')
2192
- ? ''
2193
- : '\n in IndirectionClass (at **)' +
2194
- '\n in IndirectionFn (at **)' +
2195
- '\n in Intl (at **)' +
2196
- '\n in Stateful (at **)'),
2161
+ ' in ShowLocaleFn (at **)',
2162
]);
2163
2164
statefulInst.setState({locale: 'gr'});
@@ -2255,7 +2220,6 @@ describe('ReactIncremental', () => {
2220
assertConsoleErrorDev([
2221
'Child uses the legacy childContextTypes API which will soon be removed. ' +
2222
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2258
- (gate('enableOwnerStacks') ? '' : ' in Child (at **)\n') +
2223
' in Middle (at **)\n' +
2224
' in Root (at **)',
2225
]);
@@ -2309,7 +2273,6 @@ describe('ReactIncremental', () => {
2273
assertConsoleErrorDev([
2274
'ContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
2275
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2312
- (gate('enableOwnerStacks') ? '' : ' in ContextProvider (at **)\n') +
2276
' in Root (at **)',
2277
]);
2278
@@ -2511,10 +2474,7 @@ describe('ReactIncremental', () => {
2474
' in TopContextProvider (at **)',
2475
'Child uses the legacy contextTypes API which will soon be removed. ' +
2476
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2514
- ' in Child (at **)' +
2515
- (gate('enableOwnerStacks')
2516
- ? ''
2517
- : '\n in Middle (at **)' + '\n in TopContextProvider (at **)'),
2477
+ ' in Child (at **)',
2478
]);
2479
instance.updateCount();
2480
await waitForAll(['count:1']);
@@ -2578,17 +2538,10 @@ describe('ReactIncremental', () => {
2538
' in TopContextProvider (at **)',
2539
'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
2540
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2581
- ' in MiddleContextProvider (at **)' +
2582
- (gate('enableOwnerStacks')
2583
- ? ''
2584
- : '\n in TopContextProvider (at **)'),
2541
+ ' in MiddleContextProvider (at **)',
2542
'Child uses the legacy contextTypes API which will soon be removed. ' +
2543
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2587
- ' in Child (at **)' +
2588
- (gate('enableOwnerStacks')
2589
- ? ''
2590
- : '\n in MiddleContextProvider (at **)' +
2591
- '\n in TopContextProvider (at **)'),
2544
+ ' in Child (at **)',
2545
]);
2546
instance.updateCount();
2547
await waitForAll(['count:1']);
@@ -2661,19 +2614,10 @@ describe('ReactIncremental', () => {
2614
' in TopContextProvider (at **)',
2615
'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
2616
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2664
- ' in MiddleContextProvider (at **)' +
2665
- (gate('enableOwnerStacks')
2666
- ? ''
2667
- : '\n in MiddleScu (at **)' +
2668
- '\n in TopContextProvider (at **)'),
2617
+ ' in MiddleContextProvider (at **)',
2618
'Child uses the legacy contextTypes API which will soon be removed. ' +
2619
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2671
- ' in Child (at **)' +
2672
- (gate('enableOwnerStacks')
2673
- ? ''
2674
- : '\n in MiddleContextProvider (at **)' +
2675
- '\n in MiddleScu (at **)' +
2676
- '\n in TopContextProvider (at **)'),
2620
+ ' in Child (at **)',
2621
]);
2622
instance.updateCount();
2623
await waitForAll([]);
@@ -2756,19 +2700,10 @@ describe('ReactIncremental', () => {
2700
' in TopContextProvider (at **)',
2701
'MiddleContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
2702
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
2759
- ' in MiddleContextProvider (at **)' +
2760
- (gate('enableOwnerStacks')
2761
- ? ''
2762
- : '\n in MiddleScu (at **)' +
2763
- '\n in TopContextProvider (at **)'),
2703
+ ' in MiddleContextProvider (at **)',
2704
'Child uses the legacy contextTypes API which will soon be removed. ' +
2705
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
2766
- ' in Child (at **)' +
2767
- (gate('enableOwnerStacks')
2768
- ? ''
2769
- : '\n in MiddleContextProvider (at **)' +
2770
- '\n in MiddleScu (at **)' +
2771
- '\n in TopContextProvider (at **)'),
2706
+ ' in Child (at **)',
2707
]);
2708
topInstance.updateCount();
2709
await waitForAll([]);
packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+2
-47
@@ -1222,8 +1222,7 @@ describe('ReactIncrementalErrorHandling', () => {
1222
' in Provider (at **)',
1223
'Connector uses the legacy contextTypes API which will be removed soon. ' +
1224
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
1225
- ' in Connector (at **)' +
1226
- (gate('enableOwnerStacks') ? '' : '\n in Provider (at **)'),
1225
+ ' in Connector (at **)',
1226
]);
1227
1228
// If the context stack does not unwind, span will get 'abcde'
@@ -1254,23 +1253,6 @@ describe('ReactIncrementalErrorHandling', () => {
1253
</ErrorBoundary>,
1254
);
1255
await waitForAll([]);
1257
- if (gate(flags => !flags.enableOwnerStacks)) {
1258
- assertConsoleErrorDev([
1259
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
1260
- 'or a class/function (for composite components) but got: undefined. ' +
1261
- "You likely forgot to export your component from the file it's defined in, " +
1262
- 'or you might have mixed up default and named imports.\n' +
1263
- ' in BrokenRender (at **)\n' +
1264
- ' in ErrorBoundary (at **)',
1265
- // React retries once on error
1266
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
1267
- 'or a class/function (for composite components) but got: undefined. ' +
1268
- "You likely forgot to export your component from the file it's defined in, " +
1269
- 'or you might have mixed up default and named imports.\n' +
1270
- ' in BrokenRender (at **)\n' +
1271
- ' in ErrorBoundary (at **)',
1272
- ]);
1273
- }
1256
1257
expect(ReactNoop).toMatchRenderedOutput(
1258
<span
@@ -1319,23 +1301,7 @@ describe('ReactIncrementalErrorHandling', () => {
1301
</ErrorBoundary>,
1302
);
1303
await waitForAll([]);
1322
- if (gate(flags => !flags.enableOwnerStacks)) {
1323
- assertConsoleErrorDev([
1324
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
1325
- 'or a class/function (for composite components) but got: undefined. ' +
1326
- "You likely forgot to export your component from the file it's defined in, " +
1327
- 'or you might have mixed up default and named imports.\n' +
1328
- ' in BrokenRender (at **)\n' +
1329
- ' in ErrorBoundary (at **)',
1330
- // React retries once on error
1331
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
1332
- 'or a class/function (for composite components) but got: undefined. ' +
1333
- "You likely forgot to export your component from the file it's defined in, " +
1334
- 'or you might have mixed up default and named imports.\n' +
1335
- ' in BrokenRender (at **)\n' +
1336
- ' in ErrorBoundary (at **)',
1337
- ]);
1338
- }
1304
+
1305
expect(ReactNoop).toMatchRenderedOutput(
1306
<span
1307
prop={
@@ -1354,17 +1320,6 @@ describe('ReactIncrementalErrorHandling', () => {
1320
it('recovers from uncaught reconciler errors', async () => {
1321
const InvalidType = undefined;
1322
ReactNoop.render(<InvalidType />);
1357
- if (gate(flags => !flags.enableOwnerStacks)) {
1358
- assertConsoleErrorDev(
1359
- [
1360
- 'React.jsx: type is invalid -- expected a string (for built-in components) ' +
1361
- 'or a class/function (for composite components) but got: undefined. ' +
1362
- "You likely forgot to export your component from the file it's defined in, " +
1363
- 'or you might have mixed up default and named imports.',
1364
- ],
1365
- {withoutStack: true},
1366
- );
1367
- }
1323
1324
await waitForThrow(
1325
'Element type is invalid: expected a string (for built-in components) or ' +
packages/react-reconciler/src/__tests__/ReactIncrementalErrorLogging-test.js
+4
-21
@@ -94,11 +94,7 @@ describe('ReactIncrementalErrorLogging', () => {
94
// The component stack is not added without the polyfill/devtools.
95
// expect.stringMatching(
96
// new RegExp(
97
- // gate(flags => flags.enableOwnerStacks)
98
- // ? '\\s+(in|at) ErrorThrowingComponent'
99
- // : '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
100
- // '\\s+(in|at) span(.*)\n' +
101
- // '\\s+(in|at) div(.*)',
97
+ // '\\s+(in|at) ErrorThrowingComponent'
98
// ),
99
// ),
100
);
@@ -143,11 +139,7 @@ describe('ReactIncrementalErrorLogging', () => {
139
// The component stack is not added without the polyfill/devtools.
140
// expect.stringMatching(
141
// new RegExp(
146
- // gate(flags => flags.enableOwnerStacks)
147
- // ? '\\s+(in|at) ErrorThrowingComponent'
148
- // : '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
149
- // '\\s+(in|at) span(.*)\n' +
150
- // '\\s+(in|at) div(.*)',
142
+ // '\\s+(in|at) ErrorThrowingComponent'
143
// ),
144
// ),
145
);
@@ -204,12 +196,7 @@ describe('ReactIncrementalErrorLogging', () => {
196
// The component stack is not added without the polyfill/devtools.
197
// expect.stringMatching(
198
// new RegExp(
207
- // gate(flags => flags.enableOwnerStacks)
208
- // ? '\\s+(in|at) ErrorThrowingComponent'
209
- // : '\\s+(in|at) ErrorThrowingComponent (.*)\n' +
210
- // '\\s+(in|at) span(.*)\n' +
211
- // '\\s+(in|at) ErrorBoundary(.*)\n' +
212
- // '\\s+(in|at) div(.*)',
199
+ // '\\s+(in|at) ErrorThrowingComponent'
200
// ),
201
// ),
202
);
@@ -287,11 +274,7 @@ describe('ReactIncrementalErrorLogging', () => {
274
),
275
// The component stack is not added without the polyfill/devtools.
276
// expect.stringMatching(
290
- // gate(flag => flag.enableOwnerStacks)
291
- // ? new RegExp('\\s+(in|at) Foo')
292
- // : new RegExp(
293
- // '\\s+(in|at) Foo (.*)\n' + '\\s+(in|at) ErrorBoundary(.*)',
294
- // ),
277
+ // new RegExp('\\s+(in|at) Foo')
278
// ),
279
);
280
} else {
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+288
-70
@@ -240,9 +240,6 @@ describe('ReactLazy', () => {
240
' }\n\n' +
241
'Your code should look like: \n ' +
242
"const MyComponent = lazy(() => import('./MyComponent'))\n" +
243
- (gate('enableOwnerStacks')
244
- ? ''
245
- : ' in Lazy (at **)\n' + ' in Suspense (at **)\n') +
243
' in App (at **)',
244
'lazy: Expected the result of a dynamic import() call. ' +
245
'Instead received: function Text(props) {\n' +
@@ -251,9 +248,6 @@ describe('ReactLazy', () => {
248
' }\n\n' +
249
'Your code should look like: \n ' +
250
"const MyComponent = lazy(() => import('./MyComponent'))\n" +
254
- (gate('enableOwnerStacks')
255
- ? ''
256
- : ' in Lazy (at **)\n' + ' in Suspense (at **)\n') +
251
' in App (at **)',
252
]);
253
expect(root).not.toMatchRenderedOutput('Hi');
@@ -749,8 +743,7 @@ describe('ReactLazy', () => {
743
'T: Support for defaultProps ' +
744
'will be removed from function components in a future major ' +
745
'release. Use JavaScript default parameters instead.\n' +
752
- ' in T (at **)\n' +
753
- ' in Suspense (at **)',
746
+ ' in T (at **)',
747
]);
748
749
expect(root).toMatchRenderedOutput('Hi Bye');
@@ -855,11 +848,15 @@ describe('ReactLazy', () => {
848
);
849
});
850
858
- async function verifyResolvesProps(
859
- Add,
860
- shouldWarnAboutFunctionDefaultProps,
861
- shouldWarnAboutMemoDefaultProps,
862
- ) {
851
+ // @gate !disableDefaultPropsExceptForClasses
852
+ it('resolves props for function component with defaultProps', async () => {
853
+ function Add(props) {
854
+ expect(props.innerWithDefault).toBe(42);
855
+ return props.inner + props.outer;
856
+ }
857
+ Add.defaultProps = {
858
+ innerWithDefault: 42,
859
+ };
860
const LazyAdd = lazy(() => fakeImport(Add));
861
const root = ReactTestRenderer.create(
862
<Suspense fallback={<Text text="Loading..." />}>
@@ -876,18 +873,10 @@ describe('ReactLazy', () => {
873
// Mount
874
await act(() => resolveFakeImport(Add));
875
879
- if (shouldWarnAboutFunctionDefaultProps) {
880
- assertConsoleErrorDev([
881
- 'Add: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.\n' +
882
- ' in Add (at **)\n' +
883
- ' in Suspense (at **)',
884
- ]);
885
- } else if (shouldWarnAboutMemoDefaultProps) {
886
- assertConsoleErrorDev([
887
- 'Add: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.\n' +
888
- ' in Suspense (at **)',
889
- ]);
890
- }
876
+ assertConsoleErrorDev([
877
+ 'Add: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.\n' +
878
+ ' in Add (at **)',
879
+ ]);
880
881
expect(root).toMatchRenderedOutput('22');
882
@@ -899,25 +888,38 @@ describe('ReactLazy', () => {
888
);
889
await waitForAll([]);
890
expect(root).toMatchRenderedOutput('0');
902
- }
903
-
904
- // @gate !disableDefaultPropsExceptForClasses
905
- it('resolves props for function component with defaultProps', async () => {
906
- function Add(props) {
907
- expect(props.innerWithDefault).toBe(42);
908
- return props.inner + props.outer;
909
- }
910
- Add.defaultProps = {
911
- innerWithDefault: 42,
912
- };
913
- await verifyResolvesProps(Add, true);
891
});
892
893
it('resolves props for function component without defaultProps', async () => {
894
function Add(props) {
895
return props.inner + props.outer;
896
}
920
- await verifyResolvesProps(Add);
897
+ const LazyAdd = lazy(() => fakeImport(Add));
898
+ const root = ReactTestRenderer.create(
899
+ <Suspense fallback={<Text text="Loading..." />}>
900
+ <LazyAdd inner="2" outer="2" />
901
+ </Suspense>,
902
+ {
903
+ unstable_isConcurrent: true,
904
+ },
905
+ );
906
+
907
+ await waitForAll(['Loading...']);
908
+ expect(root).not.toMatchRenderedOutput('22');
909
+
910
+ // Mount
911
+ await act(() => resolveFakeImport(Add));
912
+
913
+ expect(root).toMatchRenderedOutput('22');
914
+
915
+ // Update
916
+ root.update(
917
+ <Suspense fallback={<Text text="Loading..." />}>
918
+ <LazyAdd inner={false} outer={false} />
919
+ </Suspense>,
920
+ );
921
+ await waitForAll([]);
922
+ expect(root).toMatchRenderedOutput('0');
923
});
924
925
it('resolves props for class component with defaultProps', async () => {
@@ -930,7 +932,32 @@ describe('ReactLazy', () => {
932
Add.defaultProps = {
933
innerWithDefault: 42,
934
};
933
- await verifyResolvesProps(Add);
935
+ const LazyAdd = lazy(() => fakeImport(Add));
936
+ const root = ReactTestRenderer.create(
937
+ <Suspense fallback={<Text text="Loading..." />}>
938
+ <LazyAdd inner="2" outer="2" />
939
+ </Suspense>,
940
+ {
941
+ unstable_isConcurrent: true,
942
+ },
943
+ );
944
+
945
+ await waitForAll(['Loading...']);
946
+ expect(root).not.toMatchRenderedOutput('22');
947
+
948
+ // Mount
949
+ await act(() => resolveFakeImport(Add));
950
+
951
+ expect(root).toMatchRenderedOutput('22');
952
+
953
+ // Update
954
+ root.update(
955
+ <Suspense fallback={<Text text="Loading..." />}>
956
+ <LazyAdd inner={false} outer={false} />
957
+ </Suspense>,
958
+ );
959
+ await waitForAll([]);
960
+ expect(root).toMatchRenderedOutput('0');
961
});
962
963
it('resolves props for class component without defaultProps', async () => {
@@ -939,7 +966,32 @@ describe('ReactLazy', () => {
966
return this.props.inner + this.props.outer;
967
}
968
}
942
- await verifyResolvesProps(Add);
969
+ const LazyAdd = lazy(() => fakeImport(Add));
970
+ const root = ReactTestRenderer.create(
971
+ <Suspense fallback={<Text text="Loading..." />}>
972
+ <LazyAdd inner="2" outer="2" />
973
+ </Suspense>,
974
+ {
975
+ unstable_isConcurrent: true,
976
+ },
977
+ );
978
+
979
+ await waitForAll(['Loading...']);
980
+ expect(root).not.toMatchRenderedOutput('22');
981
+
982
+ // Mount
983
+ await act(() => resolveFakeImport(Add));
984
+
985
+ expect(root).toMatchRenderedOutput('22');
986
+
987
+ // Update
988
+ root.update(
989
+ <Suspense fallback={<Text text="Loading..." />}>
990
+ <LazyAdd inner={false} outer={false} />
991
+ </Suspense>,
992
+ );
993
+ await waitForAll([]);
994
+ expect(root).toMatchRenderedOutput('0');
995
});
996
997
// @gate !disableDefaultPropsExceptForClasses
@@ -952,7 +1004,32 @@ describe('ReactLazy', () => {
1004
Add.defaultProps = {
1005
innerWithDefault: 42,
1006
};
955
- await verifyResolvesProps(Add);
1007
+ const LazyAdd = lazy(() => fakeImport(Add));
1008
+ const root = ReactTestRenderer.create(
1009
+ <Suspense fallback={<Text text="Loading..." />}>
1010
+ <LazyAdd inner="2" outer="2" />
1011
+ </Suspense>,
1012
+ {
1013
+ unstable_isConcurrent: true,
1014
+ },
1015
+ );
1016
+
1017
+ await waitForAll(['Loading...']);
1018
+ expect(root).not.toMatchRenderedOutput('22');
1019
+
1020
+ // Mount
1021
+ await act(() => resolveFakeImport(Add));
1022
+
1023
+ expect(root).toMatchRenderedOutput('22');
1024
+
1025
+ // Update
1026
+ root.update(
1027
+ <Suspense fallback={<Text text="Loading..." />}>
1028
+ <LazyAdd inner={false} outer={false} />
1029
+ </Suspense>,
1030
+ );
1031
+ await waitForAll([]);
1032
+ expect(root).toMatchRenderedOutput('0');
1033
});
1034
1035
it('resolves props for forwardRef component without defaultProps', async () => {
@@ -960,7 +1037,33 @@ describe('ReactLazy', () => {
1037
return props.inner + props.outer;
1038
});
1039
Add.displayName = 'Add';
963
- await verifyResolvesProps(Add);
1040
+
1041
+ const LazyAdd = lazy(() => fakeImport(Add));
1042
+ const root = ReactTestRenderer.create(
1043
+ <Suspense fallback={<Text text="Loading..." />}>
1044
+ <LazyAdd inner="2" outer="2" />
1045
+ </Suspense>,
1046
+ {
1047
+ unstable_isConcurrent: true,
1048
+ },
1049
+ );
1050
+
1051
+ await waitForAll(['Loading...']);
1052
+ expect(root).not.toMatchRenderedOutput('22');
1053
+
1054
+ // Mount
1055
+ await act(() => resolveFakeImport(Add));
1056
+
1057
+ expect(root).toMatchRenderedOutput('22');
1058
+
1059
+ // Update
1060
+ root.update(
1061
+ <Suspense fallback={<Text text="Loading..." />}>
1062
+ <LazyAdd inner={false} outer={false} />
1063
+ </Suspense>,
1064
+ );
1065
+ await waitForAll([]);
1066
+ expect(root).toMatchRenderedOutput('0');
1067
});
1068
1069
// @gate !disableDefaultPropsExceptForClasses
@@ -973,7 +1076,39 @@ describe('ReactLazy', () => {
1076
Add.defaultProps = {
1077
innerWithDefault: 42,
1078
};
976
- await verifyResolvesProps(Add, false, true);
1079
+ const LazyAdd = lazy(() => fakeImport(Add));
1080
+ const root = ReactTestRenderer.create(
1081
+ <Suspense fallback={<Text text="Loading..." />}>
1082
+ <LazyAdd inner="2" outer="2" />
1083
+ </Suspense>,
1084
+ {
1085
+ unstable_isConcurrent: true,
1086
+ },
1087
+ );
1088
+
1089
+ await waitForAll(['Loading...']);
1090
+ expect(root).not.toMatchRenderedOutput('22');
1091
+
1092
+ // Mount
1093
+ await act(() => resolveFakeImport(Add));
1094
+
1095
+ assertConsoleErrorDev(
1096
+ [
1097
+ 'Add: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.',
1098
+ ],
1099
+ {withoutStack: true},
1100
+ );
1101
+
1102
+ expect(root).toMatchRenderedOutput('22');
1103
+
1104
+ // Update
1105
+ root.update(
1106
+ <Suspense fallback={<Text text="Loading..." />}>
1107
+ <LazyAdd inner={false} outer={false} />
1108
+ </Suspense>,
1109
+ );
1110
+ await waitForAll([]);
1111
+ expect(root).toMatchRenderedOutput('0');
1112
});
1113
1114
it('resolves props for outer memo component without defaultProps', async () => {
@@ -981,7 +1116,32 @@ describe('ReactLazy', () => {
1116
return props.inner + props.outer;
1117
};
1118
Add = React.memo(Add);
984
- await verifyResolvesProps(Add);
1119
+ const LazyAdd = lazy(() => fakeImport(Add));
1120
+ const root = ReactTestRenderer.create(
1121
+ <Suspense fallback={<Text text="Loading..." />}>
1122
+ <LazyAdd inner="2" outer="2" />
1123
+ </Suspense>,
1124
+ {
1125
+ unstable_isConcurrent: true,
1126
+ },
1127
+ );
1128
+
1129
+ await waitForAll(['Loading...']);
1130
+ expect(root).not.toMatchRenderedOutput('22');
1131
+
1132
+ // Mount
1133
+ await act(() => resolveFakeImport(Add));
1134
+
1135
+ expect(root).toMatchRenderedOutput('22');
1136
+
1137
+ // Update
1138
+ root.update(
1139
+ <Suspense fallback={<Text text="Loading..." />}>
1140
+ <LazyAdd inner={false} outer={false} />
1141
+ </Suspense>,
1142
+ );
1143
+ await waitForAll([]);
1144
+ expect(root).toMatchRenderedOutput('0');
1145
});
1146
1147
// @gate !disableDefaultPropsExceptForClasses
@@ -994,7 +1154,40 @@ describe('ReactLazy', () => {
1154
Add.defaultProps = {
1155
innerWithDefault: 42,
1156
};
997
- await verifyResolvesProps(React.memo(Add), true);
1157
+ const MemoAdd = React.memo(Add);
1158
+ const LazyAdd = lazy(() => fakeImport(MemoAdd));
1159
+ const root = ReactTestRenderer.create(
1160
+ <Suspense fallback={<Text text="Loading..." />}>
1161
+ <LazyAdd inner="2" outer="2" />
1162
+ </Suspense>,
1163
+ {
1164
+ unstable_isConcurrent: true,
1165
+ },
1166
+ );
1167
+
1168
+ await waitForAll(['Loading...']);
1169
+ expect(root).not.toMatchRenderedOutput('22');
1170
+
1171
+ // Mount
1172
+ await act(() => resolveFakeImport(MemoAdd));
1173
+
1174
+ assertConsoleErrorDev(
1175
+ [
1176
+ 'Add: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
1177
+ ],
1178
+ {withoutStack: true},
1179
+ );
1180
+
1181
+ expect(root).toMatchRenderedOutput('22');
1182
+
1183
+ // Update
1184
+ root.update(
1185
+ <Suspense fallback={<Text text="Loading..." />}>
1186
+ <LazyAdd inner={false} outer={false} />
1187
+ </Suspense>,
1188
+ );
1189
+ await waitForAll([]);
1190
+ expect(root).toMatchRenderedOutput('0');
1191
});
1192
1193
it('resolves props for inner memo component without defaultProps', async () => {
@@ -1002,7 +1195,32 @@ describe('ReactLazy', () => {
1195
return props.inner + props.outer;
1196
};
1197
Add.displayName = 'Add';
1005
- await verifyResolvesProps(React.memo(Add));
1198
+ const LazyAdd = lazy(() => fakeImport(Add));
1199
+ const root = ReactTestRenderer.create(
1200
+ <Suspense fallback={<Text text="Loading..." />}>
1201
+ <LazyAdd inner="2" outer="2" />
1202
+ </Suspense>,
1203
+ {
1204
+ unstable_isConcurrent: true,
1205
+ },
1206
+ );
1207
+
1208
+ await waitForAll(['Loading...']);
1209
+ expect(root).not.toMatchRenderedOutput('22');
1210
+
1211
+ // Mount
1212
+ await act(() => resolveFakeImport(Add));
1213
+
1214
+ expect(root).toMatchRenderedOutput('22');
1215
+
1216
+ // Update
1217
+ root.update(
1218
+ <Suspense fallback={<Text text="Loading..." />}>
1219
+ <LazyAdd inner={false} outer={false} />
1220
+ </Suspense>,
1221
+ );
1222
+ await waitForAll([]);
1223
+ expect(root).toMatchRenderedOutput('0');
1224
});
1225
1226
// @gate !disableDefaultPropsExceptForClasses
@@ -1030,12 +1248,13 @@ describe('ReactLazy', () => {
1248
// Mount
1249
await act(() => resolveFakeImport(T));
1250
assertLog(['Inner default text']);
1033
- assertConsoleErrorDev([
1034
- 'T: Support for defaultProps will be removed from function components in a future major release. ' +
1035
- 'Use JavaScript default parameters instead.\n' +
1036
- ' in T (at **)\n' +
1037
- ' in Suspense (at **)',
1038
- ]);
1251
+ assertConsoleErrorDev(
1252
+ [
1253
+ 'T: Support for defaultProps will be removed from function components in a future major release. ' +
1254
+ 'Use JavaScript default parameters instead.',
1255
+ ],
1256
+ {withoutStack: true},
1257
+ );
1258
expect(root).toMatchRenderedOutput('Inner default text');
1259
1260
// Update
@@ -1074,11 +1293,7 @@ describe('ReactLazy', () => {
1293
'\n' +
1294
'Check the render method of `Foo`. ' +
1295
'See https://react.dev/link/warning-keys for more information.\n' +
1077
- (gate(flags => flags.enableOwnerStacks)
1078
- ? ' in Foo (at **)'
1079
- : ' in Text (at **)\n' +
1080
- ' in Foo (at **)\n' +
1081
- ' in Suspense (at **)'),
1296
+ ' in Foo (at **)',
1297
]);
1298
expect(root).toMatchRenderedOutput(<div>AB</div>);
1299
});
@@ -1154,11 +1369,13 @@ describe('ReactLazy', () => {
1369
1370
// Mount
1371
await act(() => resolveFakeImport(Add));
1157
- assertConsoleErrorDev([
1158
- 'Unknown: Support for defaultProps will be removed from memo components in a future major release. ' +
1159
- 'Use JavaScript default parameters instead.\n' +
1160
- ' in Suspense (at **)',
1161
- ]);
1372
+ assertConsoleErrorDev(
1373
+ [
1374
+ 'Unknown: Support for defaultProps will be removed from memo components in a future major release. ' +
1375
+ 'Use JavaScript default parameters instead.',
1376
+ ],
1377
+ {withoutStack: true},
1378
+ );
1379
expect(root).toMatchRenderedOutput('4');
1380
1381
// Update (shallowly equal)
@@ -1243,14 +1460,15 @@ describe('ReactLazy', () => {
1460
1461
// Mount
1462
await act(() => resolveFakeImport(Add));
1246
- assertConsoleErrorDev([
1247
- 'Memo: Support for defaultProps will be removed from memo components in a future major release. ' +
1248
- 'Use JavaScript default parameters instead.\n' +
1249
- ' in Suspense (at **)',
1250
- 'Unknown: Support for defaultProps will be removed from memo components in a future major release. ' +
1251
- 'Use JavaScript default parameters instead.\n' +
1252
- ' in Suspense (at **)',
1253
- ]);
1463
+ assertConsoleErrorDev(
1464
+ [
1465
+ 'Memo: Support for defaultProps will be removed from memo components in a future major release. ' +
1466
+ 'Use JavaScript default parameters instead.',
1467
+ 'Unknown: Support for defaultProps will be removed from memo components in a future major release. ' +
1468
+ 'Use JavaScript default parameters instead.',
1469
+ ],
1470
+ {withoutStack: true},
1471
+ );
1472
expect(root).toMatchRenderedOutput('4');
1473
1474
// Update
packages/react-reconciler/src/__tests__/ReactMemo-test.js
+29
-23
@@ -407,12 +407,22 @@ describe('memo', () => {
407
);
408
});
409
assertLog(['Loading...', 15]);
410
- assertConsoleErrorDev([
411
- 'Counter: Support for defaultProps will be removed from memo components in a future major release. ' +
412
- 'Use JavaScript default parameters instead.\n' +
413
- (label === 'lazy' ? '' : ' in Indirection (at **)\n') +
414
- ' in Suspense (at **)',
415
- ]);
410
+ if (label === 'lazy') {
411
+ assertConsoleErrorDev(
412
+ [
413
+ 'Counter: Support for defaultProps will be removed from memo components in a future major release. ' +
414
+ 'Use JavaScript default parameters instead.',
415
+ ],
416
+ {withoutStack: true},
417
+ );
418
+ } else {
419
+ assertConsoleErrorDev([
420
+ 'Counter: Support for defaultProps will be removed from memo components in a future major release. ' +
421
+ 'Use JavaScript default parameters instead.\n' +
422
+ ' in Indirection (at **)',
423
+ ]);
424
+ }
425
+
426
expect(ReactNoop).toMatchRenderedOutput(<span prop={15} />);
427
428
// Should bail out because props have not changed
@@ -475,12 +485,14 @@ describe('memo', () => {
485
</div>,
486
);
487
});
478
- assertConsoleErrorDev([
479
- 'Inner: ' +
480
- 'Support for defaultProps will be removed from memo components in a future major release. ' +
481
- 'Use JavaScript default parameters instead.\n' +
482
- ' in div (at **)',
483
- ]);
488
+ assertConsoleErrorDev(
489
+ [
490
+ 'Inner: ' +
491
+ 'Support for defaultProps will be removed from memo components in a future major release. ' +
492
+ 'Use JavaScript default parameters instead.',
493
+ ],
494
+ {withoutStack: true},
495
+ );
496
expect(root).toMatchRenderedOutput(<div>111</div>);
497
498
await act(async () => {
@@ -576,9 +588,7 @@ describe('memo', () => {
588
'Each child in a list should have a unique "key" prop. ' +
589
'See https://react.dev/link/warning-keys for more information.\n' +
590
' in span (at **)\n' +
579
- (gate('enableOwnerStacks')
580
- ? ' in **/ReactMemo-test.js:**:** (at **)'
581
- : ' in p (at **)'),
591
+ ' in **/ReactMemo-test.js:**:** (at **)',
592
]);
593
});
594
@@ -597,8 +607,7 @@ describe('memo', () => {
607
'\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
608
'See https://react.dev/link/warning-keys for more information.\n' +
609
' in span (at **)\n' +
600
- ' in Inner (at **)' +
601
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
610
+ ' in Inner (at **)',
611
]);
612
});
613
@@ -619,8 +628,7 @@ describe('memo', () => {
628
'\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
629
'See https://react.dev/link/warning-keys for more information.\n' +
630
' in span (at **)\n' +
622
- ' in Inner (at **)' +
623
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
631
+ ' in Inner (at **)',
632
]);
633
});
634
@@ -640,8 +648,7 @@ describe('memo', () => {
648
'\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
649
'See https://react.dev/link/warning-keys for more information.\n' +
650
' in span (at **)\n' +
643
- ' in Outer (at **)' +
644
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
651
+ ' in Outer (at **)',
652
]);
653
});
654
@@ -663,8 +670,7 @@ describe('memo', () => {
670
'\n\nCheck the top-level render call using <Inner>. It was passed a child from Inner. ' +
671
'See https://react.dev/link/warning-keys for more information.\n' +
672
' in span (at **)\n' +
666
- ' in Inner (at **)' +
667
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
673
+ ' in Inner (at **)',
674
]);
675
});
676
}
packages/react-reconciler/src/__tests__/ReactOwnerStacks-test.js
+2
-2
@@ -41,7 +41,7 @@ describe('ReactOwnerStacks', () => {
41
}
42
});
43
44
- // @gate __DEV__ && enableOwnerStacks
44
+ // @gate __DEV__
45
it('can get the component owner stacks during rendering in dev', async () => {
46
let stack;
47
@@ -75,7 +75,7 @@ describe('ReactOwnerStacks', () => {
75
76
it('returns null outside of render', async () => {
77
// Awkward to gate since some builds will have `captureOwnerStack` return null in prod
78
- if (__DEV__ && gate('enableOwnerStacks')) {
78
+ if (__DEV__) {
79
expect(React.captureOwnerStack()).toBe(null);
80
81
await act(() => {
packages/react-reconciler/src/__tests__/ReactUse-test.js
+7
-67
@@ -257,9 +257,6 @@ describe('ReactUse', () => {
257
'A component was suspended by an uncached promise. Creating ' +
258
'promises inside a Client Component or hook is not yet ' +
259
'supported, except via a Suspense-compatible library or framework.\n' +
260
- (gate('enableOwnerStacks')
261
- ? ''
262
- : ' in Async (at **)\n' + ' in Suspense (at **)\n') +
260
' in App (at **)',
261
]);
262
assertLog(['ABC']);
@@ -430,20 +427,10 @@ describe('ReactUse', () => {
427
'A component was suspended by an uncached promise. Creating ' +
428
'promises inside a Client Component or hook is not yet ' +
429
'supported, except via a Suspense-compatible library or framework.\n' +
433
- (gate('enableOwnerStacks')
434
- ? ''
435
- : ' in Async (at **)\n' +
436
- ' in ErrorBoundary (at **)\n' +
437
- ' in Suspense (at **)\n') +
430
' in App (at **)',
431
'A component was suspended by an uncached promise. Creating ' +
432
'promises inside a Client Component or hook is not yet ' +
433
'supported, except via a Suspense-compatible library or framework.\n' +
442
- (gate('enableOwnerStacks')
443
- ? ''
444
- : ' in Async (at **)\n' +
445
- ' in ErrorBoundary (at **)\n' +
446
- ' in Suspense (at **)\n') +
434
' in App (at **)',
435
]);
436
assertLog([
@@ -617,8 +604,7 @@ describe('ReactUse', () => {
604
'A component was suspended by an uncached promise. ' +
605
'Creating promises inside a Client Component or hook is not yet supported, ' +
606
'except via a Suspense-compatible library or framework.\n' +
620
- ' in App (at **)\n' +
621
- ' in Suspense (at **)',
607
+ ' in App (at **)',
608
]);
609
expect(root).toMatchRenderedOutput('Async');
610
});
@@ -667,8 +653,7 @@ describe('ReactUse', () => {
653
'A component was suspended by an uncached promise. ' +
654
'Creating promises inside a Client Component or hook is not yet supported, ' +
655
'except via a Suspense-compatible library or framework.\n' +
670
- ' in App (at **)\n' +
671
- ' in Suspense (at **)',
656
+ ' in App (at **)',
657
]);
658
expect(root).toMatchRenderedOutput('Async');
659
});
@@ -1216,8 +1201,7 @@ describe('ReactUse', () => {
1201
'A component was suspended by an uncached promise. ' +
1202
'Creating promises inside a Client Component or hook is not yet supported, ' +
1203
'except via a Suspense-compatible library or framework.\n' +
1219
- ' in AsyncText (at **)\n' +
1220
- ' in Suspense (at **)',
1204
+ ' in AsyncText (at **)',
1205
]);
1206
expect(root).toMatchRenderedOutput('A(Loading B...)');
1207
@@ -1243,9 +1227,7 @@ describe('ReactUse', () => {
1227
'A component was suspended by an uncached promise. ' +
1228
'Creating promises inside a Client Component or hook is not yet supported, ' +
1229
'except via a Suspense-compatible library or framework.\n' +
1246
- ' in AsyncText (at **)\n' +
1247
- ' in Suspense (at **)\n' +
1248
- ' in Suspense (at **)',
1230
+ ' in AsyncText (at **)',
1231
]);
1232
expect(root).toMatchRenderedOutput('AB(Loading C...)');
1233
@@ -1263,10 +1245,7 @@ describe('ReactUse', () => {
1245
'A component was suspended by an uncached promise. ' +
1246
'Creating promises inside a Client Component or hook is not yet supported, ' +
1247
'except via a Suspense-compatible library or framework.\n' +
1266
- ' in AsyncText (at **)\n' +
1267
- ' in Suspense (at **)\n' +
1268
- ' in Suspense (at **)\n' +
1269
- ' in Suspense (at **)',
1248
+ ' in AsyncText (at **)',
1249
]);
1250
expect(root).toMatchRenderedOutput('ABC');
1251
});
@@ -1301,16 +1280,10 @@ describe('ReactUse', () => {
1280
'A component was suspended by an uncached promise. ' +
1281
'Creating promises inside a Client Component or hook is not yet supported, ' +
1282
'except via a Suspense-compatible library or framework.\n' +
1304
- (gate('enableOwnerStacks')
1305
- ? ''
1306
- : ' in Async (at **)\n' + ' in Suspense (at **)\n') +
1283
' in App (at **)',
1284
'A component was suspended by an uncached promise. ' +
1285
'Creating promises inside a Client Component or hook is not yet supported, ' +
1286
'except via a Suspense-compatible library or framework.\n' +
1311
- (gate('enableOwnerStacks')
1312
- ? ''
1313
- : ' in Async (at **)\n' + ' in Suspense (at **)\n') +
1287
' in App (at **)',
1288
]);
1289
expect(root).toMatchRenderedOutput('A1');
@@ -1685,10 +1658,6 @@ describe('ReactUse', () => {
1658
'A component was suspended by an uncached promise. ' +
1659
'Creating promises inside a Client Component or hook is not yet supported, ' +
1660
'except via a Suspense-compatible library or framework.\n' +
1688
- (gate('enableOwnerStacks')
1689
- ? ''
1690
- : ' in **/ReactUse-test.js:**:** (at **)\n' +
1691
- ' in Suspense (at **)\n') +
1661
' in App (at **)',
1662
]);
1663
expect(root).toMatchRenderedOutput('Async');
@@ -1723,10 +1692,6 @@ describe('ReactUse', () => {
1692
'A component was suspended by an uncached promise. ' +
1693
'Creating promises inside a Client Component or hook is not yet supported, ' +
1694
'except via a Suspense-compatible library or framework.\n' +
1726
- (gate('enableOwnerStacks')
1727
- ? ''
1728
- : ' in **/ReactUse-test.js:**:** (at **)\n' +
1729
- ' in Suspense (at **)\n') +
1695
' in App (at **)',
1696
]);
1697
expect(root).toMatchRenderedOutput('Async');
@@ -1752,10 +1717,6 @@ describe('ReactUse', () => {
1717
'A component was suspended by an uncached promise. ' +
1718
'Creating promises inside a Client Component or hook is not yet supported, ' +
1719
'except via a Suspense-compatible library or framework.\n' +
1755
- (gate('enableOwnerStacks')
1756
- ? ''
1757
- : ' in **/ReactUse-test.js:**:** (at **)\n' +
1758
- ' in Suspense (at **)\n') +
1720
' in App (at **)',
1721
]);
1722
expect(root).toMatchRenderedOutput('Async!');
@@ -1810,36 +1771,17 @@ describe('ReactUse', () => {
1771
assertConsoleErrorDev([
1772
'ContextProvider uses the legacy childContextTypes API which will soon be removed. ' +
1773
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
1813
- (gate('enableOwnerStacks') ? '' : ' in ContextProvider (at **)\n') +
1774
' in App (at **)',
1775
'Async uses the legacy contextTypes API which will be removed soon. ' +
1776
'Use React.createContext() with React.useContext() instead. (https://react.dev/link/legacy-context)\n' +
1817
- (gate('enableOwnerStacks')
1818
- ? ''
1819
- : ' in Async (at **)\n' +
1820
- ' in div (at **)\n' +
1821
- ' in Suspense (at **)\n' +
1822
- ' in ContextProvider (at **)\n') +
1777
' in App (at **)',
1778
'A component was suspended by an uncached promise. ' +
1779
'Creating promises inside a Client Component or hook is not yet supported, ' +
1780
'except via a Suspense-compatible library or framework.\n' +
1827
- (gate('enableOwnerStacks')
1828
- ? ''
1829
- : ' in Async (at **)\n' +
1830
- ' in div (at **)\n' +
1831
- ' in Suspense (at **)\n' +
1832
- ' in ContextProvider (at **)\n') +
1781
' in App (at **)',
1782
'A component was suspended by an uncached promise. ' +
1783
'Creating promises inside a Client Component or hook is not yet supported, ' +
1784
'except via a Suspense-compatible library or framework.\n' +
1837
- (gate('enableOwnerStacks')
1838
- ? ''
1839
- : ' in Async (at **)\n' +
1840
- ' in div (at **)\n' +
1841
- ' in Suspense (at **)\n' +
1842
- ' in ContextProvider (at **)\n') +
1785
' in App (at **)',
1786
]);
1787
expect(root).toMatchRenderedOutput(
@@ -1921,8 +1863,7 @@ describe('ReactUse', () => {
1863
'Only Server Components can be async at the moment. ' +
1864
"This error is often caused by accidentally adding `'use client'` " +
1865
'to a module that was originally written for the server.\n' +
1924
- ' in AsyncClientComponent (at **)' +
1925
- (gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
1866
+ ' in AsyncClientComponent (at **)',
1867
]);
1868
assertLog([
1869
'An unknown Component is an async Client Component. ' +
@@ -1977,8 +1918,7 @@ describe('ReactUse', () => {
1918
'Only Server Components can be async at the moment. ' +
1919
"This error is often caused by accidentally adding `'use client'` " +
1920
'to a module that was originally written for the server.\n' +
1980
- ' in AsyncClientComponent (at **)' +
1981
- (gate('enableOwnerStacks') ? '' : '\n in ErrorBoundary (at **)'),
1921
+ ' in AsyncClientComponent (at **)',
1922
]);
1923
assertLog([
1924
'An unknown Component is an async Client Component. ' +
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+6
-16
@@ -1170,25 +1170,15 @@ describe('ReactFlightDOMBrowser', () => {
1170
);
1171
const result = await ReactServerDOMClient.createFromReadableStream(stream);
1172
1173
- if (!gate(flags => flags.enableOwnerStacks)) {
1174
- assertConsoleErrorDev([
1175
- 'Each child in a list should have a unique "key" prop. ' +
1176
- 'See https://react.dev/link/warning-keys for more information.\n' +
1177
- ' in div (at **)',
1178
- ]);
1179
- }
1180
-
1173
await act(() => {
1174
root.render(result);
1175
});
1184
- if (gate(flags => flags.enableOwnerStacks)) {
1185
- assertConsoleErrorDev([
1186
- 'Each child in a list should have a unique "key" prop.\n\n' +
1187
- 'Check the top-level render call using <ParentClient>. ' +
1188
- 'See https://react.dev/link/warning-keys for more information.\n' +
1189
- ' in div (at **)',
1190
- ]);
1191
- }
1176
+ assertConsoleErrorDev([
1177
+ 'Each child in a list should have a unique "key" prop.\n\n' +
1178
+ 'Check the top-level render call using <ParentClient>. ' +
1179
+ 'See https://react.dev/link/warning-keys for more information.\n' +
1180
+ ' in div (at **)',
1181
+ ]);
1182
});
1183
1184
it('basic use(promise)', async () => {
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+1
-1
@@ -1020,7 +1020,7 @@ describe('ReactFlightDOMEdge', () => {
1020
}
1021
});
1022
1023
- // @gate __DEV__ && enableOwnerStacks
1023
+ // @gate __DEV__
1024
it('can get the component owner stacks asynchronously', async () => {
1025
let stack;
1026
packages/react-server/src/ReactFizzComponentStack.js
+2
-5
@@ -26,10 +26,7 @@ import {
26
REACT_VIEW_TRANSITION_TYPE,
27
} from 'shared/ReactSymbols';
28
29
-import {
30
- enableOwnerStacks,
31
- enableViewTransition,
32
-} from 'shared/ReactFeatureFlags';
29
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
30
31
import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
32
@@ -134,7 +131,7 @@ function describeFunctionComponentFrameWithoutLineNumber(fn: Function): string {
131
export function getOwnerStackByComponentStackNodeInDev(
132
componentStack: ComponentStackNode,
133
): string {
137
- if (!enableOwnerStacks || !__DEV__) {
134
+ if (!__DEV__) {
135
return '';
136
}
137
try {
packages/react-server/src/ReactFizzServer.js
+45
-69
@@ -165,7 +165,6 @@ import {
165
enableRenderableContext,
166
disableDefaultPropsExceptForClasses,
167
enableAsyncIterableChildren,
168
- enableOwnerStacks,
168
enableViewTransition,
169
} from 'shared/ReactFeatureFlags';
170
@@ -787,7 +786,7 @@ function createRenderTask(
786
if (!disableLegacyContext) {
787
task.legacyContext = legacyContext;
788
}
790
- if (__DEV__ && enableOwnerStacks) {
789
+ if (__DEV__) {
790
task.debugTask = debugTask;
791
}
792
abortSet.add(task);
@@ -840,7 +839,7 @@ function createReplayTask(
839
if (!disableLegacyContext) {
840
task.legacyContext = legacyContext;
841
}
843
- if (__DEV__ && enableOwnerStacks) {
842
+ if (__DEV__) {
843
task.debugTask = debugTask;
844
}
845
abortSet.add(task);
@@ -875,12 +874,9 @@ function getCurrentStackInDEV(): string {
874
if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
875
return '';
876
}
878
- if (enableOwnerStacks) {
879
- return getOwnerStackByComponentStackNodeInDev(
880
- currentTaskInDEV.componentStack,
881
- );
882
- }
883
- return getStackByComponentStackNode(currentTaskInDEV.componentStack);
877
+ return getOwnerStackByComponentStackNodeInDev(
878
+ currentTaskInDEV.componentStack,
879
+ );
880
}
881
return '';
882
}
@@ -907,18 +903,16 @@ function pushServerComponentStack(
903
if (typeof componentInfo.name !== 'string') {
904
continue;
905
}
910
- if (enableOwnerStacks && componentInfo.debugStack === undefined) {
906
+ if (componentInfo.debugStack === undefined) {
907
continue;
908
}
909
task.componentStack = {
910
parent: task.componentStack,
911
type: componentInfo,
912
owner: componentInfo.owner,
917
- stack: enableOwnerStacks ? componentInfo.debugStack : null,
913
+ stack: componentInfo.debugStack,
914
};
919
- if (enableOwnerStacks) {
920
- task.debugTask = (componentInfo.debugTask: any);
921
- }
915
+ task.debugTask = (componentInfo.debugTask: any);
916
}
917
}
918
}
@@ -934,12 +928,10 @@ function pushComponentStack(task: Task): void {
928
const element: any = node;
929
const type = element.type;
930
const owner = __DEV__ ? element._owner : null;
937
- const stack = __DEV__ && enableOwnerStacks ? element._debugStack : null;
931
+ const stack = __DEV__ ? element._debugStack : null;
932
if (__DEV__) {
933
pushServerComponentStack(task, element._debugInfo);
940
- if (enableOwnerStacks) {
941
- task.debugTask = element._debugTask;
942
- }
934
+ task.debugTask = element._debugTask;
935
}
936
task.componentStack = createComponentStackFromType(
937
task.componentStack,
@@ -1056,7 +1048,7 @@ function logPostpone(
1048
// If this callback errors, we intentionally let that error bubble up to become a fatal error
1049
// so that someone fixes the error reporting instead of hiding it.
1050
const onPostpone = request.onPostpone;
1059
- if (__DEV__ && enableOwnerStacks && debugTask) {
1051
+ if (__DEV__ && debugTask) {
1052
debugTask.run(onPostpone.bind(null, reason, postponeInfo));
1053
} else {
1054
onPostpone(reason, postponeInfo);
@@ -1073,7 +1065,7 @@ function logRecoverableError(
1065
// so that someone fixes the error reporting instead of hiding it.
1066
const onError = request.onError;
1067
const errorDigest =
1076
- __DEV__ && enableOwnerStacks && debugTask
1068
+ __DEV__ && debugTask
1069
? debugTask.run(onError.bind(null, error, errorInfo))
1070
: onError(error, errorInfo);
1071
if (errorDigest != null && typeof errorDigest !== 'string') {
@@ -1101,7 +1093,7 @@ function fatalError(
1093
// It's also called if React itself or its host configs errors.
1094
const onShellError = request.onShellError;
1095
const onFatalError = request.onFatalError;
1104
- if (__DEV__ && enableOwnerStacks && debugTask) {
1096
+ if (__DEV__ && debugTask) {
1097
debugTask.run(onShellError.bind(null, error));
1098
debugTask.run(onFatalError.bind(null, error));
1099
} else {
@@ -1261,7 +1253,7 @@ function renderSuspenseBoundary(
1253
task.componentStack,
1254
task.isFallback,
1255
!disableLegacyContext ? task.legacyContext : emptyContextObject,
1264
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1256
+ __DEV__ ? task.debugTask : null,
1257
);
1258
pushComponentStack(suspendedPrimaryTask);
1259
request.pingedTasks.push(suspendedPrimaryTask);
@@ -1334,7 +1326,7 @@ function renderSuspenseBoundary(
1326
request,
1327
postponeInstance.message,
1328
thrownInfo,
1337
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1329
+ __DEV__ ? task.debugTask : null,
1330
);
1331
// TODO: Figure out a better signal than a magic digest value.
1332
errorDigest = 'POSTPONE';
@@ -1343,7 +1335,7 @@ function renderSuspenseBoundary(
1335
request,
1336
error,
1337
thrownInfo,
1346
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1338
+ __DEV__ ? task.debugTask : null,
1339
);
1340
}
1341
encodeErrorForBoundary(
@@ -1387,7 +1379,7 @@ function renderSuspenseBoundary(
1379
task.componentStack,
1380
true,
1381
!disableLegacyContext ? task.legacyContext : emptyContextObject,
1390
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1382
+ __DEV__ ? task.debugTask : null,
1383
);
1384
pushComponentStack(suspendedFallbackTask);
1385
// TODO: This should be queued at a separate lower priority queue so that we only work
@@ -1485,7 +1477,7 @@ function replaySuspenseBoundary(
1477
request,
1478
postponeInstance.message,
1479
thrownInfo,
1488
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1480
+ __DEV__ ? task.debugTask : null,
1481
);
1482
// TODO: Figure out a better signal than a magic digest value.
1483
errorDigest = 'POSTPONE';
@@ -1494,7 +1486,7 @@ function replaySuspenseBoundary(
1486
request,
1487
error,
1488
thrownInfo,
1497
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1489
+ __DEV__ ? task.debugTask : null,
1490
);
1491
}
1492
encodeErrorForBoundary(
@@ -1545,7 +1537,7 @@ function replaySuspenseBoundary(
1537
task.componentStack,
1538
true,
1539
!disableLegacyContext ? task.legacyContext : emptyContextObject,
1548
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1540
+ __DEV__ ? task.debugTask : null,
1541
);
1542
1543
pushComponentStack(suspendedFallbackTask);
@@ -1587,7 +1579,7 @@ function renderPreamble(
1579
task.componentStack,
1580
task.isFallback,
1581
!disableLegacyContext ? task.legacyContext : emptyContextObject,
1590
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1582
+ __DEV__ ? task.debugTask : null,
1583
);
1584
pushComponentStack(preambleTask);
1585
request.pingedTasks.push(preambleTask);
@@ -2489,7 +2481,7 @@ function replayElement(
2481
thrownInfo,
2482
childNodes,
2483
childSlots,
2492
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
2484
+ __DEV__ ? task.debugTask : null,
2485
);
2486
}
2487
task.replay = replay;
@@ -2654,15 +2646,14 @@ function renderNodeDestructive(
2646
task.childIndex = childIndex;
2647
2648
const previousComponentStack = task.componentStack;
2657
- const previousDebugTask =
2658
- __DEV__ && enableOwnerStacks ? task.debugTask : null;
2649
+ const previousDebugTask = __DEV__ ? task.debugTask : null;
2650
2651
pushComponentStack(task);
2652
2653
retryNode(request, task);
2654
2655
task.componentStack = previousComponentStack;
2665
- if (__DEV__ && enableOwnerStacks) {
2656
+ if (__DEV__) {
2657
task.debugTask = previousDebugTask;
2658
}
2659
}
@@ -2689,8 +2680,7 @@ function retryNode(request: Request, task: Task): void {
2680
const refProp = props.ref;
2681
const ref = refProp !== undefined ? refProp : null;
2682
2692
- const debugTask: null | ConsoleTask =
2693
- __DEV__ && enableOwnerStacks ? task.debugTask : null;
2683
+ const debugTask: null | ConsoleTask = __DEV__ ? task.debugTask : null;
2684
2685
const name = getComponentNameFromType(type);
2686
const keyOrIndex =
@@ -3002,7 +2992,7 @@ function replayFragment(
2992
thrownInfo,
2993
childNodes,
2994
childSlots,
3005
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
2995
+ __DEV__ ? task.debugTask : null,
2996
);
2997
}
2998
task.replay = replay;
@@ -3094,7 +3084,7 @@ function warnForMissingKey(request: Request, task: Task, child: mixed): void {
3084
task.componentStack,
3085
(child: any).type,
3086
(child: any)._owner,
3097
- enableOwnerStacks ? (child: any)._debugStack : null,
3087
+ (child: any)._debugStack,
3088
);
3089
task.componentStack = stackFrame;
3090
console.error(
@@ -3117,9 +3107,7 @@ function renderChildrenArray(
3107
const previousComponentStack = task.componentStack;
3108
let previousDebugTask = null;
3109
if (__DEV__) {
3120
- if (enableOwnerStacks) {
3121
- previousDebugTask = task.debugTask;
3122
- }
3110
+ previousDebugTask = task.debugTask;
3111
// We read debugInfo from task.node instead of children because it might have been an
3112
// unwrapped iterable so we read from the original node.
3113
pushServerComponentStack(task, (task.node: any)._debugInfo);
@@ -3137,9 +3125,7 @@ function renderChildrenArray(
3125
task.keyPath = prevKeyPath;
3126
if (__DEV__) {
3127
task.componentStack = previousComponentStack;
3140
- if (enableOwnerStacks) {
3141
- task.debugTask = previousDebugTask;
3142
- }
3128
+ task.debugTask = previousDebugTask;
3129
}
3130
return;
3131
}
@@ -3173,9 +3159,7 @@ function renderChildrenArray(
3159
task.keyPath = prevKeyPath;
3160
if (__DEV__) {
3161
task.componentStack = previousComponentStack;
3176
- if (enableOwnerStacks) {
3177
- task.debugTask = previousDebugTask;
3178
- }
3162
+ task.debugTask = previousDebugTask;
3163
}
3164
return;
3165
}
@@ -3198,9 +3182,7 @@ function renderChildrenArray(
3182
task.keyPath = prevKeyPath;
3183
if (__DEV__) {
3184
task.componentStack = previousComponentStack;
3201
- if (enableOwnerStacks) {
3202
- task.debugTask = previousDebugTask;
3203
- }
3185
+ task.debugTask = previousDebugTask;
3186
}
3187
}
3188
@@ -3394,12 +3376,7 @@ function injectPostponedHole(
3376
reason: string,
3377
thrownInfo: ThrownInfo,
3378
): Segment {
3397
- logPostpone(
3398
- request,
3399
- reason,
3400
- thrownInfo,
3401
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
3402
- );
3379
+ logPostpone(request, reason, thrownInfo, __DEV__ ? task.debugTask : null);
3380
// Something suspended, we'll need to create a new segment and resolve it later.
3381
const segment = task.blockedSegment;
3382
const insertionIndex = segment.chunks.length;
@@ -3440,7 +3417,7 @@ function spawnNewSuspendedReplayTask(
3417
task.componentStack,
3418
task.isFallback,
3419
!disableLegacyContext ? task.legacyContext : emptyContextObject,
3443
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
3420
+ __DEV__ ? task.debugTask : null,
3421
);
3422
}
3423
@@ -3482,7 +3459,7 @@ function spawnNewSuspendedRenderTask(
3459
task.componentStack,
3460
task.isFallback,
3461
!disableLegacyContext ? task.legacyContext : emptyContextObject,
3485
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
3462
+ __DEV__ ? task.debugTask : null,
3463
);
3464
}
3465
@@ -3504,8 +3481,7 @@ function renderNode(
3481
const previousKeyPath = task.keyPath;
3482
const previousTreeContext = task.treeContext;
3483
const previousComponentStack = task.componentStack;
3507
- const previousDebugTask =
3508
- __DEV__ && enableOwnerStacks ? task.debugTask : null;
3484
+ const previousDebugTask = __DEV__ ? task.debugTask : null;
3485
let x;
3486
// Store how much we've pushed at this point so we can reset it in case something
3487
// suspended partially through writing something.
@@ -3551,7 +3527,7 @@ function renderNode(
3527
task.keyPath = previousKeyPath;
3528
task.treeContext = previousTreeContext;
3529
task.componentStack = previousComponentStack;
3554
- if (__DEV__ && enableOwnerStacks) {
3530
+ if (__DEV__) {
3531
task.debugTask = previousDebugTask;
3532
}
3533
// Restore all active ReactContexts to what they were before.
@@ -3584,7 +3560,7 @@ function renderNode(
3560
task.keyPath = previousKeyPath;
3561
task.treeContext = previousTreeContext;
3562
task.componentStack = previousComponentStack;
3587
- if (__DEV__ && enableOwnerStacks) {
3563
+ if (__DEV__) {
3564
task.debugTask = previousDebugTask;
3565
}
3566
// Restore all active ReactContexts to what they were before.
@@ -3642,7 +3618,7 @@ function renderNode(
3618
task.keyPath = previousKeyPath;
3619
task.treeContext = previousTreeContext;
3620
task.componentStack = previousComponentStack;
3645
- if (__DEV__ && enableOwnerStacks) {
3621
+ if (__DEV__) {
3622
task.debugTask = previousDebugTask;
3623
}
3624
// Restore all active ReactContexts to what they were before.
@@ -3681,7 +3657,7 @@ function renderNode(
3657
task.keyPath = previousKeyPath;
3658
task.treeContext = previousTreeContext;
3659
task.componentStack = previousComponentStack;
3684
- if (__DEV__ && enableOwnerStacks) {
3660
+ if (__DEV__) {
3661
task.debugTask = previousDebugTask;
3662
}
3663
// Restore all active ReactContexts to what they were before.
@@ -3714,7 +3690,7 @@ function renderNode(
3690
task.keyPath = previousKeyPath;
3691
task.treeContext = previousTreeContext;
3692
task.componentStack = previousComponentStack;
3717
- if (__DEV__ && enableOwnerStacks) {
3693
+ if (__DEV__) {
3694
task.debugTask = previousDebugTask;
3695
}
3696
// Restore all active ReactContexts to what they were before.
@@ -4421,14 +4397,14 @@ function retryRenderTask(
4397
request,
4398
postponeInstance.message,
4399
thrownInfo,
4424
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
4400
+ __DEV__ ? task.debugTask : null,
4401
);
4402
} else {
4403
logRecoverableError(
4404
request,
4405
x,
4406
thrownInfo,
4431
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
4407
+ __DEV__ ? task.debugTask : null,
4408
);
4409
}
4410
@@ -4464,7 +4440,7 @@ function retryRenderTask(
4440
request,
4441
postponeInstance.message,
4442
postponeInfo,
4467
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
4443
+ __DEV__ ? task.debugTask : null,
4444
);
4445
trackPostpone(request, trackedPostpones, task, segment);
4446
finishedTask(request, task.blockedBoundary, segment);
@@ -4481,7 +4457,7 @@ function retryRenderTask(
4457
task.blockedBoundary,
4458
x,
4459
errorInfo,
4484
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
4460
+ __DEV__ ? task.debugTask : null,
4461
);
4462
return;
4463
} finally {
@@ -4560,7 +4536,7 @@ function retryReplayTask(request: Request, task: ReplayTask): void {
4536
errorInfo,
4537
task.replay.nodes,
4538
task.replay.slots,
4563
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
4539
+ __DEV__ ? task.debugTask : null,
4540
);
4541
request.pendingRootTasks--;
4542
if (request.pendingRootTasks === 0) {
packages/react-server/src/ReactFlightServer.js
+87
-132
@@ -17,7 +17,6 @@ import {
17
enablePostpone,
18
enableHalt,
19
enableTaint,
20
- enableOwnerStacks,
20
enableProfilerTimer,
21
enableComponentPerformanceTrack,
22
} from 'shared/ReactFeatureFlags';
@@ -254,15 +253,11 @@ if (__DEV__ && typeof console === 'object' && console !== null) {
253
254
function getCurrentStackInDEV(): string {
255
if (__DEV__) {
257
- if (enableOwnerStacks) {
258
- const owner: null | ReactComponentInfo = resolveOwner();
259
- if (owner === null) {
260
- return '';
261
- }
262
- return getOwnerStackByComponentInfoInDev(owner);
256
+ const owner: null | ReactComponentInfo = resolveOwner();
257
+ if (owner === null) {
258
+ return '';
259
}
264
- // We don't have Parent Stacks in Flight.
265
- return '';
260
+ return getOwnerStackByComponentInfoInDev(owner);
261
}
262
return '';
263
}
@@ -624,8 +619,8 @@ function serializeThenable(
619
task.implicitSlot,
620
request.abortableTasks,
621
__DEV__ ? task.debugOwner : null,
627
- __DEV__ && enableOwnerStacks ? task.debugStack : null,
628
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
622
+ __DEV__ ? task.debugStack : null,
623
+ __DEV__ ? task.debugTask : null,
624
);
625
if (__DEV__) {
626
// If this came from Flight, forward any debug info into this new row.
@@ -744,8 +739,8 @@ function serializeReadableStream(
739
task.implicitSlot,
740
request.abortableTasks,
741
__DEV__ ? task.debugOwner : null,
747
- __DEV__ && enableOwnerStacks ? task.debugStack : null,
748
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
742
+ __DEV__ ? task.debugStack : null,
743
+ __DEV__ ? task.debugTask : null,
744
);
745
request.abortableTasks.delete(streamTask);
746
@@ -834,8 +829,8 @@ function serializeAsyncIterable(
829
task.implicitSlot,
830
request.abortableTasks,
831
__DEV__ ? task.debugOwner : null,
837
- __DEV__ && enableOwnerStacks ? task.debugStack : null,
838
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
832
+ __DEV__ ? task.debugStack : null,
833
+ __DEV__ ? task.debugTask : null,
834
);
835
request.abortableTasks.delete(streamTask);
836
@@ -1035,23 +1030,21 @@ function callWithDebugContextInDEV<A, T>(
1030
key: null,
1031
owner: task.debugOwner,
1032
};
1038
- if (enableOwnerStacks) {
1039
- // $FlowFixMe[cannot-write]
1040
- componentDebugInfo.stack =
1041
- task.debugStack === null
1042
- ? null
1043
- : filterStackTrace(request, task.debugStack, 1);
1044
- // $FlowFixMe[cannot-write]
1045
- componentDebugInfo.debugStack = task.debugStack;
1046
- // $FlowFixMe[cannot-write]
1047
- componentDebugInfo.debugTask = task.debugTask;
1048
- }
1033
+ // $FlowFixMe[cannot-write]
1034
+ componentDebugInfo.stack =
1035
+ task.debugStack === null
1036
+ ? null
1037
+ : filterStackTrace(request, task.debugStack, 1);
1038
+ // $FlowFixMe[cannot-write]
1039
+ componentDebugInfo.debugStack = task.debugStack;
1040
+ // $FlowFixMe[cannot-write]
1041
+ componentDebugInfo.debugTask = task.debugTask;
1042
const debugTask = task.debugTask;
1043
// We don't need the async component storage context here so we only set the
1044
// synchronous tracking of owner.
1045
setCurrentOwner(componentDebugInfo);
1046
try {
1054
- if (enableOwnerStacks && debugTask) {
1047
+ if (debugTask) {
1048
return debugTask.run(callback.bind(null, arg));
1049
}
1050
return callback(arg);
@@ -1238,22 +1231,18 @@ function renderFunctionComponent<Props>(
1231
key: key,
1232
owner: task.debugOwner,
1233
}: ReactComponentInfo);
1241
- if (enableOwnerStacks) {
1242
- // $FlowFixMe[cannot-write]
1243
- componentDebugInfo.stack =
1244
- task.debugStack === null
1245
- ? null
1246
- : filterStackTrace(request, task.debugStack, 1);
1247
- // $FlowFixMe[cannot-write]
1248
- componentDebugInfo.props = props;
1249
- // $FlowFixMe[cannot-write]
1250
- componentDebugInfo.debugStack = task.debugStack;
1251
- // $FlowFixMe[cannot-write]
1252
- componentDebugInfo.debugTask = task.debugTask;
1253
- } else {
1254
- // $FlowFixMe[cannot-write]
1255
- componentDebugInfo.props = props;
1256
- }
1234
+ // $FlowFixMe[cannot-write]
1235
+ componentDebugInfo.stack =
1236
+ task.debugStack === null
1237
+ ? null
1238
+ : filterStackTrace(request, task.debugStack, 1);
1239
+ // $FlowFixMe[cannot-write]
1240
+ componentDebugInfo.props = props;
1241
+ // $FlowFixMe[cannot-write]
1242
+ componentDebugInfo.debugStack = task.debugStack;
1243
+ // $FlowFixMe[cannot-write]
1244
+ componentDebugInfo.debugTask = task.debugTask;
1245
+
1246
// We outline this model eagerly so that we can refer to by reference as an owner.
1247
// If we had a smarter way to dedupe we might not have to do this if there ends up
1248
// being no references to this as an owner.
@@ -1271,14 +1260,14 @@ function renderFunctionComponent<Props>(
1260
// We've emitted the latest environment for this task so we track that.
1261
task.environmentName = componentEnv;
1262
1274
- if (enableOwnerStacks && validated === 2) {
1263
+ if (validated === 2) {
1264
warnForMissingKey(request, key, componentDebugInfo, task.debugTask);
1265
}
1266
}
1267
prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
1268
if (supportsComponentStorage) {
1269
// Run the component in an Async Context that tracks the current owner.
1281
- if (enableOwnerStacks && task.debugTask) {
1270
+ if (task.debugTask) {
1271
result = task.debugTask.run(
1272
// $FlowFixMe[method-unbinding]
1273
componentStorage.run.bind(
@@ -1300,7 +1289,7 @@ function renderFunctionComponent<Props>(
1289
);
1290
}
1291
} else {
1303
- if (enableOwnerStacks && task.debugTask) {
1292
+ if (task.debugTask) {
1293
result = task.debugTask.run(
1294
callComponentInDEV.bind(null, Component, props, componentDebugInfo),
1295
);
@@ -1387,7 +1376,7 @@ function warnForMissingKey(
1376
1377
if (supportsComponentStorage) {
1378
// Run the component in an Async Context that tracks the current owner.
1390
- if (enableOwnerStacks && debugTask) {
1379
+ if (debugTask) {
1380
debugTask.run(
1381
// $FlowFixMe[method-unbinding]
1382
componentStorage.run.bind(
@@ -1409,7 +1398,7 @@ function warnForMissingKey(
1398
);
1399
}
1400
} else {
1412
- if (enableOwnerStacks && debugTask) {
1401
+ if (debugTask) {
1402
debugTask.run(
1403
callComponentInDEV.bind(null, logKeyError, null, componentDebugInfo),
1404
);
@@ -1445,23 +1434,15 @@ function renderFragment(
1434
// We have a Server Component that specifies a key but we're now splitting
1435
// the tree using a fragment.
1436
const fragment = __DEV__
1448
- ? enableOwnerStacks
1449
- ? [
1450
- REACT_ELEMENT_TYPE,
1451
- REACT_FRAGMENT_TYPE,
1452
- task.keyPath,
1453
- {children},
1454
- null,
1455
- null,
1456
- 0,
1457
- ]
1458
- : [
1459
- REACT_ELEMENT_TYPE,
1460
- REACT_FRAGMENT_TYPE,
1461
- task.keyPath,
1462
- {children},
1463
- null,
1464
- ]
1437
+ ? [
1438
+ REACT_ELEMENT_TYPE,
1439
+ REACT_FRAGMENT_TYPE,
1440
+ task.keyPath,
1441
+ {children},
1442
+ null,
1443
+ null,
1444
+ 0,
1445
+ ]
1446
: [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
1447
if (!task.implicitSlot) {
1448
// If this was keyed inside a set. I.e. the outer Server Component was keyed
@@ -1517,23 +1498,15 @@ function renderAsyncFragment(
1498
// We have a Server Component that specifies a key but we're now splitting
1499
// the tree using a fragment.
1500
const fragment = __DEV__
1520
- ? enableOwnerStacks
1521
- ? [
1522
- REACT_ELEMENT_TYPE,
1523
- REACT_FRAGMENT_TYPE,
1524
- task.keyPath,
1525
- {children},
1526
- null,
1527
- null,
1528
- 0,
1529
- ]
1530
- : [
1531
- REACT_ELEMENT_TYPE,
1532
- REACT_FRAGMENT_TYPE,
1533
- task.keyPath,
1534
- {children},
1535
- null,
1536
- ]
1501
+ ? [
1502
+ REACT_ELEMENT_TYPE,
1503
+ REACT_FRAGMENT_TYPE,
1504
+ task.keyPath,
1505
+ {children},
1506
+ null,
1507
+ null,
1508
+ 0,
1509
+ ]
1510
: [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
1511
if (!task.implicitSlot) {
1512
// If this was keyed inside a set. I.e. the outer Server Component was keyed
@@ -1586,19 +1559,17 @@ function renderClientElement(
1559
}
1560
}
1561
const element = __DEV__
1589
- ? enableOwnerStacks
1590
- ? [
1591
- REACT_ELEMENT_TYPE,
1592
- type,
1593
- key,
1594
- props,
1595
- task.debugOwner,
1596
- task.debugStack === null
1597
- ? null
1598
- : filterStackTrace(request, task.debugStack, 1),
1599
- validated,
1600
- ]
1601
- : [REACT_ELEMENT_TYPE, type, key, props, task.debugOwner]
1562
+ ? [
1563
+ REACT_ELEMENT_TYPE,
1564
+ type,
1565
+ key,
1566
+ props,
1567
+ task.debugOwner,
1568
+ task.debugStack === null
1569
+ ? null
1570
+ : filterStackTrace(request, task.debugStack, 1),
1571
+ validated,
1572
+ ]
1573
: [REACT_ELEMENT_TYPE, type, key, props];
1574
if (task.implicitSlot && key !== null) {
1575
// The root Server Component had no key so it was in an implicit slot.
@@ -1626,8 +1597,8 @@ function outlineTask(request: Request, task: Task): ReactJSONValue {
1597
task.implicitSlot,
1598
request.abortableTasks,
1599
__DEV__ ? task.debugOwner : null,
1629
- __DEV__ && enableOwnerStacks ? task.debugStack : null,
1630
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
1600
+ __DEV__ ? task.debugStack : null,
1601
+ __DEV__ ? task.debugTask : null,
1602
);
1603
1604
retryTask(request, newTask);
@@ -1694,7 +1665,7 @@ function renderElement(
1665
} else if (type === REACT_FRAGMENT_TYPE && key === null) {
1666
// For key-less fragments, we add a small optimization to avoid serializing
1667
// it as a wrapper.
1697
- if (__DEV__ && enableOwnerStacks && validated === 2) {
1668
+ if (__DEV__ && validated === 2) {
1669
// Create a fake owner node for the error stack.
1670
const componentDebugInfo: ReactComponentInfo = {
1671
name: 'Fragment',
@@ -1900,10 +1871,8 @@ function createTask(
1871
if (__DEV__) {
1872
task.environmentName = request.environmentName();
1873
task.debugOwner = debugOwner;
1903
- if (enableOwnerStacks) {
1904
- task.debugStack = debugStack;
1905
- task.debugTask = debugTask;
1906
- }
1874
+ task.debugStack = debugStack;
1875
+ task.debugTask = debugTask;
1876
}
1877
abortSet.add(task);
1878
return task;
@@ -2348,8 +2317,8 @@ function renderModel(
2317
task.implicitSlot,
2318
request.abortableTasks,
2319
__DEV__ ? task.debugOwner : null,
2351
- __DEV__ && enableOwnerStacks ? task.debugStack : null,
2352
- __DEV__ && enableOwnerStacks ? task.debugTask : null,
2320
+ __DEV__ ? task.debugStack : null,
2321
+ __DEV__ ? task.debugTask : null,
2322
);
2323
const ping = newTask.ping;
2324
(x: any).then(ping, ping);
@@ -2487,10 +2456,8 @@ function renderModelDestructive(
2456
2457
if (__DEV__) {
2458
task.debugOwner = element._owner;
2490
- if (enableOwnerStacks) {
2491
- task.debugStack = element._debugStack;
2492
- task.debugTask = element._debugTask;
2493
- }
2459
+ task.debugStack = element._debugStack;
2460
+ task.debugTask = element._debugTask;
2461
// TODO: Pop this. Since we currently don't have a point where we can pop the stack
2462
// this debug information will be used for errors inside sibling properties that
2463
// are not elements. Leading to the wrong attribution on the server. We could fix
@@ -2506,7 +2473,7 @@ function renderModelDestructive(
2473
element.key,
2474
ref,
2475
props,
2509
- __DEV__ && enableOwnerStacks ? element._store.validated : 0,
2476
+ __DEV__ ? element._store.validated : 0,
2477
);
2478
if (
2479
typeof newChild === 'object' &&
@@ -3291,10 +3258,8 @@ function outlineComponentInfo(
3258
key: componentInfo.key,
3259
owner: componentInfo.owner,
3260
};
3294
- if (enableOwnerStacks) {
3295
- // $FlowFixMe[cannot-write]
3296
- componentDebugInfo.stack = componentInfo.stack;
3297
- }
3261
+ // $FlowFixMe[cannot-write]
3262
+ componentDebugInfo.stack = componentInfo.stack;
3263
// Ensure we serialize props after the stack to favor the stack being complete.
3264
// $FlowFixMe[cannot-write]
3265
componentDebugInfo.props = componentInfo.props;
@@ -3435,33 +3400,23 @@ function renderConsoleValue(
3400
doNotLimit.add(element._owner);
3401
}
3402
3438
- if (enableOwnerStacks) {
3439
- let debugStack: null | ReactStackTrace = null;
3440
- if (element._debugStack != null) {
3441
- // Outline the debug stack so that it doesn't get cut off.
3442
- debugStack = filterStackTrace(request, element._debugStack, 1);
3443
- doNotLimit.add(debugStack);
3444
- for (let i = 0; i < debugStack.length; i++) {
3445
- doNotLimit.add(debugStack[i]);
3446
- }
3403
+ let debugStack: null | ReactStackTrace = null;
3404
+ if (element._debugStack != null) {
3405
+ // Outline the debug stack so that it doesn't get cut off.
3406
+ debugStack = filterStackTrace(request, element._debugStack, 1);
3407
+ doNotLimit.add(debugStack);
3408
+ for (let i = 0; i < debugStack.length; i++) {
3409
+ doNotLimit.add(debugStack[i]);
3410
}
3448
- return [
3449
- REACT_ELEMENT_TYPE,
3450
- element.type,
3451
- element.key,
3452
- element.props,
3453
- element._owner,
3454
- debugStack,
3455
- element._store.validated,
3456
- ];
3411
}
3458
-
3412
return [
3413
REACT_ELEMENT_TYPE,
3414
element.type,
3415
element.key,
3416
element.props,
3417
element._owner,
3418
+ debugStack,
3419
+ element._store.validated,
3420
];
3421
}
3422
}
packages/react/index.fb.js
+2
-2
@@ -7,8 +7,8 @@
7
* @flow
8
*/
9
10
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
10
import {captureOwnerStack as captureOwnerStackImpl} from './src/ReactClient';
11
+
12
export {
13
__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
14
__COMPILER_RUNTIME,
@@ -72,7 +72,7 @@ export {useMemoCache as c} from './src/ReactHooks';
72
73
// Only export captureOwnerStack in development.
74
let captureOwnerStack: ?() => null | string;
75
-if (__DEV__ && enableOwnerStacks) {
75
+if (__DEV__) {
76
captureOwnerStack = captureOwnerStackImpl;
77
}
78
packages/react/src/ReactOwnerStack.js
+9
-10
@@ -7,18 +7,17 @@
7
* @flow
8
*/
9
10
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
10
import ReactSharedInternals from 'shared/ReactSharedInternals';
11
12
export function captureOwnerStack(): null | string {
14
- if (!enableOwnerStacks || !__DEV__) {
15
- return null;
13
+ if (__DEV__) {
14
+ const getCurrentStack = ReactSharedInternals.getCurrentStack;
15
+ if (getCurrentStack === null) {
16
+ return null;
17
+ }
18
+ // The current stack will be the owner stack which it is always here.
19
+ return getCurrentStack();
20
}
17
- const getCurrentStack = ReactSharedInternals.getCurrentStack;
18
- if (getCurrentStack === null) {
19
- return null;
20
- }
21
- // The current stack will be the owner stack if enableOwnerStacks is true
22
- // which it is always here. Otherwise it's the parent stack.
23
- return getCurrentStack();
21
+
22
+ return null;
23
}
packages/react/src/ReactServer.fb.js
+1
-3
@@ -10,7 +10,6 @@
10
export {default as __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactSharedInternalsServer';
11
12
import {forEach, map, count, toArray, only} from './ReactChildren';
13
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
13
import {captureOwnerStack as captureOwnerStackImpl} from './ReactOwnerStack';
14
import {
15
REACT_FRAGMENT_TYPE,
@@ -39,9 +38,8 @@ const Children = {
38
only,
39
};
40
42
-// Only export captureOwnerStack if the flag is on, to support feature detection.
41
let captureOwnerStack: ?() => null | string;
44
-if (__DEV__ && enableOwnerStacks) {
42
+if (__DEV__) {
43
captureOwnerStack = captureOwnerStackImpl;
44
}
45
packages/react/src/__tests__/ReactChildren-test.js
+20
-58
@@ -333,16 +333,6 @@ describe('ReactChildren', () => {
333
}
334
335
const instance = <div>{threeDivIterable}</div>;
336
- assertConsoleErrorDev(
337
- // With the flag on this doesn't warn eagerly but only when rendered
338
- gate(flag => flag.enableOwnerStacks)
339
- ? []
340
- : [
341
- 'Each child in a list should have a unique "key" prop.\n\n' +
342
- 'Check the top-level render call using <div>. See https://react.dev/link/warning-keys for more information.\n' +
343
- ' in div (at **)',
344
- ],
345
- );
336
337
React.Children.forEach(instance.props.children, callback, context);
338
@@ -369,8 +359,7 @@ describe('ReactChildren', () => {
359
'Each child in a list should have a unique "key" prop.\n\n' +
360
'Check the top-level render call using <div>. It was passed a child from div.' +
361
' See https://react.dev/link/warning-keys for more information.\n' +
372
- ' in div (at **)' +
373
- (gate(flag => flag.enableOwnerStacks) ? '' : '\n in div (at **)'),
362
+ ' in div (at **)',
363
]);
364
});
365
@@ -894,22 +883,13 @@ describe('ReactChildren', () => {
883
</ComponentRenderingMappedChildren>,
884
);
885
});
897
- assertConsoleErrorDev(
898
- gate(flags => flags.enableOwnerStacks)
899
- ? [
900
- 'Each child in a list should have a unique "key" prop.\n\n' +
901
- 'Check the render method of `ComponentRenderingMappedChildren`.' +
902
- ' See https://react.dev/link/warning-keys for more information.\n' +
903
- ' in div (at **)\n' +
904
- ' in **/ReactChildren-test.js:**:** (at **)',
905
- ]
906
- : [
907
- 'Each child in a list should have a unique "key" prop.\n\n' +
908
- 'Check the top-level render call using <ComponentRenderingMappedChildren>.' +
909
- ' See https://react.dev/link/warning-keys for more information.\n' +
910
- ' in div (at **)',
911
- ],
912
- );
886
+ assertConsoleErrorDev([
887
+ 'Each child in a list should have a unique "key" prop.\n\n' +
888
+ 'Check the render method of `ComponentRenderingMappedChildren`.' +
889
+ ' See https://react.dev/link/warning-keys for more information.\n' +
890
+ ' in div (at **)\n' +
891
+ ' in **/ReactChildren-test.js:**:** (at **)',
892
+ ]);
893
});
894
895
it('does not warn for mapped static children without keys', async () => {
@@ -953,21 +933,12 @@ describe('ReactChildren', () => {
933
</ComponentRenderingClonedChildren>,
934
);
935
});
956
- assertConsoleErrorDev(
957
- gate(flags => flags.enableOwnerStacks)
958
- ? [
959
- 'Each child in a list should have a unique "key" prop.\n\n' +
960
- 'Check the render method of `ComponentRenderingClonedChildren`.' +
961
- ' See https://react.dev/link/warning-keys for more information.\n' +
962
- ' in div (at **)',
963
- ]
964
- : [
965
- 'Each child in a list should have a unique "key" prop.\n\n' +
966
- 'Check the top-level render call using <ComponentRenderingClonedChildren>.' +
967
- ' See https://react.dev/link/warning-keys for more information.\n' +
968
- ' in div (at **)',
969
- ],
970
- );
936
+ assertConsoleErrorDev([
937
+ 'Each child in a list should have a unique "key" prop.\n\n' +
938
+ 'Check the render method of `ComponentRenderingClonedChildren`.' +
939
+ ' See https://react.dev/link/warning-keys for more information.\n' +
940
+ ' in div (at **)',
941
+ ]);
942
});
943
944
it('does not warn for cloned static children without keys', async () => {
@@ -1005,21 +976,12 @@ describe('ReactChildren', () => {
976
</ComponentRenderingFlattenedChildren>,
977
);
978
});
1008
- assertConsoleErrorDev(
1009
- gate(flags => flags.enableOwnerStacks)
1010
- ? [
1011
- 'Each child in a list should have a unique "key" prop.\n\n' +
1012
- 'Check the render method of `ComponentRenderingFlattenedChildren`.' +
1013
- ' See https://react.dev/link/warning-keys for more information.\n' +
1014
- ' in div (at **)',
1015
- ]
1016
- : [
1017
- 'Each child in a list should have a unique "key" prop.\n\n' +
1018
- 'Check the top-level render call using <ComponentRenderingFlattenedChildren>.' +
1019
- ' See https://react.dev/link/warning-keys for more information.\n' +
1020
- ' in div (at **)',
1021
- ],
1022
- );
979
+ assertConsoleErrorDev([
980
+ 'Each child in a list should have a unique "key" prop.\n\n' +
981
+ 'Check the render method of `ComponentRenderingFlattenedChildren`.' +
982
+ ' See https://react.dev/link/warning-keys for more information.\n' +
983
+ ' in div (at **)',
984
+ ]);
985
});
986
987
it('does not warn for flattened static children without keys', async () => {
packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+16
-39
@@ -266,26 +266,14 @@ describe 'ReactCoffeeScriptClass', ->
266
267
test React.createElement(Outer), 'SPAN', 'foo'
268
269
- if featureFlags.enableOwnerStacks
270
- assertConsoleErrorDev([
271
- 'Outer uses the legacy childContextTypes API which will soon be removed.
272
- Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
273
- ' in Outer (at **)',
274
- 'Foo uses the legacy contextTypes API which will soon be removed.
275
- Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
276
- ' in Outer (at **)',
277
- ]);
278
- else
279
- assertConsoleErrorDev([
280
- 'Outer uses the legacy childContextTypes API which will soon be removed.
281
- Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
282
- ' in Outer (at **)',
283
- 'Foo uses the legacy contextTypes API which will soon be removed.
284
- Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
285
- ' in Foo (at **)\n' +
286
- ' in Outer (at **)',
287
- ]);
288
-
269
+ assertConsoleErrorDev([
270
+ 'Outer uses the legacy childContextTypes API which will soon be removed.
271
+ Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
272
+ ' in Outer (at **)',
273
+ 'Foo uses the legacy contextTypes API which will soon be removed.
274
+ Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
275
+ ' in Outer (at **)',
276
+ ]);
277
278
it 'renders only once when setting state in componentWillMount', ->
279
renderCount = 0
@@ -578,24 +566,13 @@ describe 'ReactCoffeeScriptClass', ->
566
React.createElement Bar
567
568
test React.createElement(Foo), 'DIV', 'bar-through-context'
581
- if featureFlags.enableOwnerStacks
582
- assertConsoleErrorDev [
583
- 'Foo uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.
584
- (https://react.dev/link/legacy-context)\n' +
585
- ' in Foo (at **)',
586
- 'Bar uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.
587
- (https://react.dev/link/legacy-context)\n' +
588
- ' in Foo (at **)'
589
- ]
590
- else
591
- assertConsoleErrorDev [
592
- 'Foo uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.
593
- (https://react.dev/link/legacy-context)\n' +
594
- ' in Foo (at **)',
595
- 'Bar uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.
596
- (https://react.dev/link/legacy-context)\n' +
597
- ' in Bar (at **)\n' +
598
- ' in Foo (at **)'
599
- ]
569
+ assertConsoleErrorDev [
570
+ 'Foo uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.
571
+ (https://react.dev/link/legacy-context)\n' +
572
+ ' in Foo (at **)',
573
+ 'Bar uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.
574
+ (https://react.dev/link/legacy-context)\n' +
575
+ ' in Foo (at **)'
576
+ ]
577
578
undefined
packages/react/src/__tests__/ReactContextValidator-test.js
+2
-15
@@ -78,9 +78,7 @@ describe('ReactContextValidator', () => {
78
' in ComponentInFooBarContext (at **)',
79
'Component uses the legacy contextTypes API which will soon be removed. ' +
80
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
81
- (gate(flags => flags.enableOwnerStacks)
82
- ? ' in ComponentInFooBarContext (at **)'
83
- : ' in Component (at **)'),
81
+ ' in ComponentInFooBarContext (at **)',
82
]);
83
expect(instance.childRef.current.context).toEqual({foo: 'abc'});
84
});
@@ -159,9 +157,7 @@ describe('ReactContextValidator', () => {
157
' in Parent (at **)',
158
'Component uses the legacy contextTypes API which will soon be removed. ' +
159
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
162
- (gate(flags => flags.enableOwnerStacks)
163
- ? ' in Parent (at **)'
164
- : ' in Component (at **)'),
160
+ ' in Parent (at **)',
161
]);
162
163
expect(constructorContext).toEqual({foo: 'abc'});
@@ -282,21 +278,12 @@ describe('ReactContextValidator', () => {
278
' in ParentContextProvider (at **)',
279
'MiddleMissingContext uses the legacy childContextTypes API which will soon be removed. ' +
280
'Use React.createContext() instead. (https://react.dev/link/legacy-context)\n' +
285
- (gate(flags => flags.enableOwnerStacks)
286
- ? ''
287
- : ' in MiddleMissingContext (at **)\n') +
281
' in ParentContextProvider (at **)',
282
'MiddleMissingContext.childContextTypes is specified but there is no getChildContext() method on the instance. ' +
283
'You can either define getChildContext() on MiddleMissingContext or remove childContextTypes from it.\n' +
291
- (gate(flags => flags.enableOwnerStacks)
292
- ? ''
293
- : ' in MiddleMissingContext (at **)\n') +
284
' in ParentContextProvider (at **)',
285
'ChildContextConsumer uses the legacy contextTypes API which will soon be removed. ' +
286
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
297
- (gate(flags => flags.enableOwnerStacks)
298
- ? ''
299
- : ' in ChildContextConsumer (at **)\n') +
287
' in MiddleMissingContext (at **)\n' +
288
' in ParentContextProvider (at **)',
289
]);
packages/react/src/__tests__/ReactCreateElement-test.js
+1
-7
@@ -77,13 +77,7 @@ describe('ReactCreateElement', () => {
77
'in `undefined` being returned. If you need to access the same ' +
78
'value within the child component, you should pass it as a different ' +
79
'prop. (https://react.dev/link/special-props)\n' +
80
- (gate(flags => flags.enableOwnerStacks)
81
- ? [' in Parent (at **)']
82
- : [
83
- ' in Child (at **)\n' +
84
- ' in div (at **)\n' +
85
- ' in Parent (at **)',
86
- ]),
80
+ ' in Parent (at **)',
81
]);
82
});
83
packages/react/src/__tests__/ReactCreateRef-test.js
+2
-8
@@ -46,10 +46,7 @@ describe('ReactCreateRef', () => {
46
assertConsoleErrorDev([
47
'Unexpected ref object provided for div. ' +
48
'Use either a ref-setter function or React.createRef().\n' +
49
- ' in div (at **)' +
50
- (gate(flags => flags.enableOwnerStacks)
51
- ? ''
52
- : '\n in Wrapper (at **)'),
49
+ ' in div (at **)',
50
]);
51
52
ReactDOM.flushSync(() => {
@@ -62,10 +59,7 @@ describe('ReactCreateRef', () => {
59
assertConsoleErrorDev([
60
'Unexpected ref object provided for ExampleComponent. ' +
61
'Use either a ref-setter function or React.createRef().\n' +
65
- ' in ExampleComponent (at **)' +
66
- (gate(flags => flags.enableOwnerStacks)
67
- ? ''
68
- : '\n in Wrapper (at **)'),
62
+ ' in ExampleComponent (at **)',
63
]);
64
});
65
});
packages/react/src/__tests__/ReactES6Class-test.js
-6
@@ -305,9 +305,6 @@ describe('ReactES6Class', () => {
305
' in Outer (at **)',
306
'Foo uses the legacy contextTypes API which will soon be removed. ' +
307
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
308
- (gate(flags => flags.enableOwnerStacks)
309
- ? ''
310
- : ' in Foo (at **)\n') +
308
' in Outer (at **)',
309
]);
310
});
@@ -638,9 +635,6 @@ describe('ReactES6Class', () => {
635
' in Foo (at **)',
636
'Bar uses the legacy contextTypes API which will soon be removed. ' +
637
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
641
- (gate(flags => flags.enableOwnerStacks)
642
- ? ''
643
- : ' in Bar (at **)\n') +
638
' in Foo (at **)',
639
]);
640
});
packages/react/src/__tests__/ReactElementValidator-test.internal.js
+19
-99
@@ -46,19 +46,11 @@ describe('ReactElementValidator', () => {
46
]),
47
),
48
);
49
- assertConsoleErrorDev(
50
- gate(flags => flags.enableOwnerStacks)
51
- ? [
52
- 'Each child in a list should have a unique "key" prop.\n\n' +
53
- 'Check the render method of `ComponentClass`. See https://react.dev/link/warning-keys for more information.\n' +
54
- ' in ComponentClass (at **)',
55
- ]
56
- : [
57
- 'Each child in a list should have a unique "key" prop.\n\n' +
58
- 'Check the top-level render call using <ComponentClass>. See https://react.dev/link/warning-keys for more information.\n' +
59
- ' in ComponentClass (at **)',
60
- ],
61
- );
49
+ assertConsoleErrorDev([
50
+ 'Each child in a list should have a unique "key" prop.\n\n' +
51
+ 'Check the render method of `ComponentClass`. See https://react.dev/link/warning-keys for more information.\n' +
52
+ ' in ComponentClass (at **)',
53
+ ]);
54
});
55
56
it('warns for keys for arrays of elements with owner info', async () => {
@@ -83,18 +75,10 @@ describe('ReactElementValidator', () => {
75
await act(() => root.render(React.createElement(ComponentWrapper)));
76
assertConsoleErrorDev([
77
'Each child in a list should have a unique "key" prop.' +
86
- '\n\nCheck the render method of `' +
87
- (gate(flags => flags.enableOwnerStacks)
88
- ? 'ComponentClass'
89
- : 'InnerClass') +
90
- '`. ' +
78
+ '\n\nCheck the render method of `ComponentClass`. ' +
79
'It was passed a child from ComponentWrapper. ' +
80
'See https://react.dev/link/warning-keys for more information.\n' +
93
- (gate(flags => flags.enableOwnerStacks)
94
- ? ' in ComponentWrapper (at **)'
95
- : ' in ComponentClass (at **)\n' +
96
- ' in InnerClass (at **)\n' +
97
- ' in ComponentWrapper (at **)'),
81
+ ' in ComponentWrapper (at **)',
82
]);
83
});
84
@@ -109,16 +93,12 @@ describe('ReactElementValidator', () => {
93
const root = ReactDOMClient.createRoot(document.createElement('div'));
94
await act(() => root.render(<Anonymous>{divs}</Anonymous>));
95
assertConsoleErrorDev([
112
- gate(flags => flags.enableOwnerStacks)
113
- ? // For owner stacks the parent being validated is the div.
114
- 'Each child in a list should have a unique ' +
115
- '"key" prop.' +
116
- '\n\nCheck the top-level render call using <div>. ' +
117
- 'See https://react.dev/link/warning-keys for more information.\n' +
118
- ' in div (at **)'
119
- : 'Each child in a list should have a unique ' +
120
- '"key" prop. See https://react.dev/link/warning-keys for more information.\n' +
121
- ' in div (at **)',
96
+ // For owner stacks the parent being validated is the div.
97
+ 'Each child in a list should have a unique ' +
98
+ '"key" prop.' +
99
+ '\n\nCheck the top-level render call using <div>. ' +
100
+ 'See https://react.dev/link/warning-keys for more information.\n' +
101
+ ' in div (at **)',
102
]);
103
});
104
@@ -158,9 +138,6 @@ describe('ReactElementValidator', () => {
138
'https://react.dev/link/warning-keys for more information.\n' +
139
' in div (at **)\n' +
140
' in Component (at **)\n' +
161
- (gate(flags => flags.enableOwnerStacks)
162
- ? ''
163
- : ' in Parent (at **)\n') +
141
' in GrandParent (at **)',
142
]);
143
});
@@ -206,35 +183,12 @@ describe('ReactElementValidator', () => {
183
await act(() =>
184
root.render(React.createElement(ComponentClass, null, iterable)),
185
);
209
- assertConsoleErrorDev(
210
- gate(flag => flag.enableOwnerStacks)
211
- ? [
212
- 'Each child in a list should have a unique "key" prop.\n\n' +
213
- 'Check the render method of `ComponentClass`. It was passed a child from div. ' +
214
- 'See https://react.dev/link/warning-keys for more information.\n' +
215
- ' in ComponentClass (at **)',
216
- ]
217
- : // Since each pass generates a new element, it doesn't get marked as
218
- // validated and it gets rechecked each time.
219
- [
220
- 'Each child in a list should have a unique "key" prop.\n\n' +
221
- 'Check the top-level render call using <ComponentClass>. ' +
222
- 'See https://react.dev/link/warning-keys for more information.\n' +
223
- ' in ComponentClass (at **)',
224
-
225
- 'Each child in a list should have a unique "key" prop.\n\n' +
226
- 'Check the render method of `ComponentClass`. ' +
227
- 'See https://react.dev/link/warning-keys for more information.\n' +
228
- ' in ComponentClass (at **)\n' +
229
- ' in ComponentClass (at **)',
230
- 'Each child in a list should have a unique "key" prop.\n\n' +
231
- 'Check the render method of `ComponentClass`. It was passed a child from div. ' +
232
- 'See https://react.dev/link/warning-keys for more information.\n' +
233
- ' in ComponentClass (at **)\n' +
234
- ' in div (at **)\n' +
235
- ' in ComponentClass (at **)',
236
- ],
237
- );
186
+ assertConsoleErrorDev([
187
+ 'Each child in a list should have a unique "key" prop.\n\n' +
188
+ 'Check the render method of `ComponentClass`. It was passed a child from div. ' +
189
+ 'See https://react.dev/link/warning-keys for more information.\n' +
190
+ ' in ComponentClass (at **)',
191
+ ]);
192
});
193
194
it('does not warns for arrays of elements with keys', () => {
@@ -373,13 +327,6 @@ describe('ReactElementValidator', () => {
327
];
328
for (let i = 0; i < cases.length; i++) {
329
await act(async () => root.render(cases[i][0]()));
376
- assertConsoleErrorDev(
377
- gate(flag => flag.enableOwnerStacks)
378
- ? // We don't need these extra warnings because we already have the errors.
379
- []
380
- : [cases[i][1]],
381
- {withoutStack: true},
382
- );
330
}
331
332
expect(errors).toEqual(
@@ -468,21 +415,6 @@ describe('ReactElementValidator', () => {
415
'or a class/function (for composite components) but got: null.' +
416
(__DEV__ ? '\n\nCheck the render method of `ParentComp`.' : ''),
417
);
471
- assertConsoleErrorDev(
472
- gate(flag => flag.enableOwnerStacks)
473
- ? // We don't need these extra warnings because we already have the errors.
474
- []
475
- : [
476
- 'React.createElement: type is invalid -- expected a string ' +
477
- '(for built-in components) or a class/function (for composite ' +
478
- 'components) but got: null.\n' +
479
- ' in ParentComp (at **)',
480
- 'React.createElement: type is invalid -- expected a string ' +
481
- '(for built-in components) or a class/function (for composite ' +
482
- 'components) but got: null.\n' +
483
- ' in ParentComp (at **)',
484
- ],
485
- );
418
});
419
420
it('warns for fragments with illegal attributes', async () => {
@@ -559,18 +491,6 @@ describe('ReactElementValidator', () => {
491
it('does not blow up on key warning with undefined type', () => {
492
const Foo = undefined;
493
void (<Foo>{[<div />]}</Foo>);
562
- assertConsoleErrorDev(
563
- gate(flags => flags.enableOwnerStacks)
564
- ? []
565
- : [
566
- 'React.jsx: type is invalid -- expected a string ' +
567
- '(for built-in components) or a class/function (for composite ' +
568
- 'components) but got: undefined. You likely forgot to export your ' +
569
- "component from the file it's defined in, or you might have mixed up " +
570
- 'default and named imports.',
571
- ],
572
- {withoutStack: true},
573
- );
494
});
495
496
it('does not call lazy initializers eagerly', () => {
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+11
-45
@@ -49,13 +49,9 @@ describe('ReactJSXElementValidator', () => {
49
root.render(<Component>{[<Component />, <Component />]}</Component>);
50
});
51
assertConsoleErrorDev([
52
- gate(flags => flags.enableOwnerStacks)
53
- ? 'Each child in a list should have a unique "key" prop.\n\n' +
54
- 'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
55
- ' in Component (at **)'
56
- : 'Each child in a list should have a unique "key" prop.\n\n' +
57
- 'Check the top-level render call using <Component>. See https://react.dev/link/warning-keys for more information.\n' +
58
- ' in Component (at **)',
52
+ 'Each child in a list should have a unique "key" prop.\n\n' +
53
+ 'Check the render method of `Component`. See https://react.dev/link/warning-keys for more information.\n' +
54
+ ' in Component (at **)',
55
]);
56
});
57
@@ -79,17 +75,9 @@ describe('ReactJSXElementValidator', () => {
75
});
76
assertConsoleErrorDev([
77
'Each child in a list should have a unique "key" prop.' +
82
- '\n\nCheck the render method of `' +
83
- (gate(flag => flag.enableOwnerStacks)
84
- ? 'Component'
85
- : 'InnerComponent') +
86
- '`. ' +
78
+ '\n\nCheck the render method of `Component`. ' +
79
'It was passed a child from ComponentWrapper. See https://react.dev/link/warning-keys for more information.\n' +
88
- (gate(flag => flag.enableOwnerStacks)
89
- ? ' in ComponentWrapper (at **)'
90
- : ' in Component (at **)\n' +
91
- ' in InnerComponent (at **)\n' +
92
- ' in ComponentWrapper (at **)'),
80
+ ' in ComponentWrapper (at **)',
81
]);
82
});
83
@@ -112,34 +100,12 @@ describe('ReactJSXElementValidator', () => {
100
await act(() => {
101
root.render(<Component>{iterable}</Component>);
102
});
115
- assertConsoleErrorDev(
116
- gate(flag => flag.enableOwnerStacks)
117
- ? [
118
- 'Each child in a list should have a unique "key" prop.\n\n' +
119
- 'Check the render method of `Component`. It was passed a child from div. ' +
120
- 'See https://react.dev/link/warning-keys for more information.\n' +
121
- ' in Component (at **)',
122
- ]
123
- : // Since each pass generates a new element, it doesn't get marked as
124
- // validated and it gets rechecked each time.
125
- [
126
- 'Each child in a list should have a unique "key" prop.\n\n' +
127
- 'Check the top-level render call using <Component>. ' +
128
- 'See https://react.dev/link/warning-keys for more information.\n' +
129
- ' in Component (at **)',
130
- 'Each child in a list should have a unique "key" prop.\n\n' +
131
- 'Check the render method of `Component`. ' +
132
- 'See https://react.dev/link/warning-keys for more information.\n' +
133
- ' in Component (at **)\n' +
134
- ' in Component (at **)',
135
- 'Each child in a list should have a unique "key" prop.\n\n' +
136
- 'Check the render method of `Component`. It was passed a child from div. ' +
137
- 'See https://react.dev/link/warning-keys for more information.\n' +
138
- ' in Component (at **)\n' +
139
- ' in div (at **)\n' +
140
- ' in Component (at **)',
141
- ],
142
- );
103
+ assertConsoleErrorDev([
104
+ 'Each child in a list should have a unique "key" prop.\n\n' +
105
+ 'Check the render method of `Component`. It was passed a child from div. ' +
106
+ 'See https://react.dev/link/warning-keys for more information.\n' +
107
+ ' in Component (at **)',
108
+ ]);
109
});
110
111
it('does not warn for arrays of elements with keys', async () => {
packages/react/src/__tests__/ReactJSXRuntime-test.js
+1
-8
@@ -215,11 +215,7 @@ describe('ReactJSXRuntime', () => {
215
'in `undefined` being returned. If you need to access the same ' +
216
'value within the child component, you should pass it as a different ' +
217
'prop. (https://react.dev/link/special-props)\n' +
218
- (gate(flags => flags.enableOwnerStacks)
219
- ? ' in Parent (at **)'
220
- : ' in Child (at **)\n' +
221
- ' in div (at **)\n' +
222
- ' in Parent (at **)'),
218
+ ' in Parent (at **)',
219
]);
220
});
221
@@ -279,9 +275,6 @@ describe('ReactJSXRuntime', () => {
275
assertConsoleErrorDev([
276
'Each child in a list should have a unique "key" prop.\n\n' +
277
'Check the render method of `Parent`. See https://react.dev/link/warning-keys for more information.\n' +
282
- (gate(flags => flags.enableOwnerStacks)
283
- ? ''
284
- : ' in Child (at **)\n') +
278
' in Parent (at **)',
279
]);
280
});
packages/react/src/__tests__/ReactStrictMode-test.js
+24
-61
@@ -1042,67 +1042,30 @@ describe('context legacy', () => {
1042
root.render(<Root />);
1043
});
1044
1045
- if (gate(flags => flags.enableOwnerStacks)) {
1046
- assertConsoleErrorDev([
1047
- 'LegacyContextProvider uses the legacy childContextTypes API ' +
1048
- 'which will soon be removed. Use React.createContext() instead. ' +
1049
- '(https://react.dev/link/legacy-context)' +
1050
- '\n in Root (at **)',
1051
- 'LegacyContextConsumer uses the legacy contextTypes API which ' +
1052
- 'will soon be removed. Use React.createContext() with static ' +
1053
- 'contextType instead. (https://react.dev/link/legacy-context)' +
1054
- '\n in LegacyContextProvider (at **)' +
1055
- '\n in Root (at **)',
1056
- 'FunctionalLegacyContextConsumer uses the legacy contextTypes ' +
1057
- 'API which will be removed soon. Use React.createContext() ' +
1058
- 'with React.useContext() instead. (https://react.dev/link/legacy-context)' +
1059
- '\n in LegacyContextProvider (at **)' +
1060
- '\n in Root (at **)',
1061
- 'Legacy context API has been detected within a strict-mode tree.' +
1062
- '\n\nThe old API will be supported in all 16.x releases, but applications ' +
1063
- 'using it should migrate to the new version.' +
1064
- '\n\nPlease update the following components: ' +
1065
- 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
1066
- '\n\nLearn more about this warning here: ' +
1067
- 'https://react.dev/link/legacy-context' +
1068
- '\n in Root (at **)',
1069
- ]);
1070
- } else {
1071
- assertConsoleErrorDev([
1072
- 'LegacyContextProvider uses the legacy childContextTypes API ' +
1073
- 'which will soon be removed. Use React.createContext() instead. ' +
1074
- '(https://react.dev/link/legacy-context)' +
1075
- '\n in LegacyContextProvider (at **)' +
1076
- '\n in div (at **)' +
1077
- '\n in Root (at **)',
1078
- 'LegacyContextConsumer uses the legacy contextTypes API which ' +
1079
- 'will soon be removed. Use React.createContext() with static ' +
1080
- 'contextType instead. (https://react.dev/link/legacy-context)' +
1081
- '\n in LegacyContextConsumer (at **)' +
1082
- '\n in div (at **)' +
1083
- '\n in LegacyContextProvider (at **)' +
1084
- '\n in div (at **)' +
1085
- '\n in Root (at **)',
1086
- 'FunctionalLegacyContextConsumer uses the legacy contextTypes ' +
1087
- 'API which will be removed soon. Use React.createContext() ' +
1088
- 'with React.useContext() instead. (https://react.dev/link/legacy-context)' +
1089
- '\n in FunctionalLegacyContextConsumer (at **)' +
1090
- '\n in div (at **)' +
1091
- '\n in LegacyContextProvider (at **)' +
1092
- '\n in div (at **)' +
1093
- '\n in Root (at **)',
1094
- 'Legacy context API has been detected within a strict-mode tree.' +
1095
- '\n\nThe old API will be supported in all 16.x releases, but applications ' +
1096
- 'using it should migrate to the new version.' +
1097
- '\n\nPlease update the following components: ' +
1098
- 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
1099
- '\n\nLearn more about this warning here: ' +
1100
- 'https://react.dev/link/legacy-context' +
1101
- '\n in LegacyContextProvider (at **)' +
1102
- '\n in div (at **)' +
1103
- '\n in Root (at **)',
1104
- ]);
1105
- }
1045
+ assertConsoleErrorDev([
1046
+ 'LegacyContextProvider uses the legacy childContextTypes API ' +
1047
+ 'which will soon be removed. Use React.createContext() instead. ' +
1048
+ '(https://react.dev/link/legacy-context)' +
1049
+ '\n in Root (at **)',
1050
+ 'LegacyContextConsumer uses the legacy contextTypes API which ' +
1051
+ 'will soon be removed. Use React.createContext() with static ' +
1052
+ 'contextType instead. (https://react.dev/link/legacy-context)' +
1053
+ '\n in LegacyContextProvider (at **)' +
1054
+ '\n in Root (at **)',
1055
+ 'FunctionalLegacyContextConsumer uses the legacy contextTypes ' +
1056
+ 'API which will be removed soon. Use React.createContext() ' +
1057
+ 'with React.useContext() instead. (https://react.dev/link/legacy-context)' +
1058
+ '\n in LegacyContextProvider (at **)' +
1059
+ '\n in Root (at **)',
1060
+ 'Legacy context API has been detected within a strict-mode tree.' +
1061
+ '\n\nThe old API will be supported in all 16.x releases, but applications ' +
1062
+ 'using it should migrate to the new version.' +
1063
+ '\n\nPlease update the following components: ' +
1064
+ 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +
1065
+ '\n\nLearn more about this warning here: ' +
1066
+ 'https://react.dev/link/legacy-context' +
1067
+ '\n in Root (at **)',
1068
+ ]);
1069
1070
// Dedupe
1071
await act(() => {
packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+2
-8
@@ -528,10 +528,7 @@ describe('ReactTypeScriptClass', function () {
528
' in ProvideChildContextTypes (at **)',
529
'StateBasedOnContext uses the legacy contextTypes API which will soon be removed. ' +
530
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
531
- (ReactFeatureFlags.enableOwnerStacks
532
- ? ' in ProvideChildContextTypes.createElement (at **)'
533
- : ' in StateBasedOnContext (at **)\n') +
534
- ' in ProvideChildContextTypes (at **)',
531
+ ' in ProvideChildContextTypes.createElement (at **)',
532
]);
533
});
534
}
@@ -724,10 +721,7 @@ describe('ReactTypeScriptClass', function () {
721
' in ProvideContext (at **)',
722
'ReadContext uses the legacy contextTypes API which will soon be removed. ' +
723
'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
727
- (ReactFeatureFlags.enableOwnerStacks
728
- ? ' in ProvideContext.createElement (at **)'
729
- : ' in ReadContext (at **)\n') +
730
- ' in ProvideContext (at **)',
724
+ ' in ProvideContext.createElement (at **)',
725
]);
726
});
727
}
packages/react/src/__tests__/createReactClassIntegration-test.js
+4
-8
@@ -348,14 +348,10 @@ describe('create-react-class-integration', () => {
348
root.render(<Outer />);
349
});
350
assertConsoleErrorDev([
351
- gate(flags =>
352
- flags.enableOwnerStacks
353
- ? [
354
- 'Component uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
355
- {withoutStack: true},
356
- ]
357
- : 'Component uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
358
- ),
351
+ [
352
+ 'Component uses the legacy childContextTypes API which will soon be removed. Use React.createContext() instead.',
353
+ {withoutStack: true},
354
+ ],
355
'Component uses the legacy contextTypes API which will soon be removed. Use React.createContext() with static contextType instead.',
356
]);
357
expect(container.firstChild.className).toBe('foo');
packages/react/src/__tests__/forwardRef-test.js
+5
-11
@@ -213,9 +213,7 @@ describe('forwardRef', () => {
213
'\n\nCheck the top-level render call using <ForwardRef>. It was passed a child from ForwardRef. ' +
214
'See https://react.dev/link/warning-keys for more information.\n' +
215
' in span (at **)\n' +
216
- (gate(flags => flags.enableOwnerStacks)
217
- ? ' in **/forwardRef-test.js:**:** (at **)'
218
- : ' in p (at **)'),
216
+ ' in **/forwardRef-test.js:**:** (at **)',
217
]);
218
});
219
@@ -235,8 +233,7 @@ describe('forwardRef', () => {
233
'\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
234
'See https://react.dev/link/warning-keys for more information.\n' +
235
' in span (at **)\n' +
238
- ' in Inner (at **)' +
239
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
236
+ ' in Inner (at **)',
237
]);
238
});
239
@@ -257,8 +254,7 @@ describe('forwardRef', () => {
254
'\n\nCheck the top-level render call using <ForwardRef(Inner)>. It was passed a child from ForwardRef(Inner). ' +
255
'See https://react.dev/link/warning-keys for more information.\n' +
256
' in span (at **)\n' +
260
- ' in Inner (at **)' +
261
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
257
+ ' in Inner (at **)',
258
]);
259
});
260
@@ -278,8 +274,7 @@ describe('forwardRef', () => {
274
'\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
275
'See https://react.dev/link/warning-keys for more information.\n' +
276
' in span (at **)\n' +
281
- ' in Outer (at **)' +
282
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
277
+ ' in Outer (at **)',
278
]);
279
});
280
@@ -301,8 +296,7 @@ describe('forwardRef', () => {
296
'\n\nCheck the top-level render call using <Outer>. It was passed a child from Outer. ' +
297
'See https://react.dev/link/warning-keys for more information.\n' +
298
' in span (at **)\n' +
304
- ' in Inner (at **)' +
305
- (gate(flags => flags.enableOwnerStacks) ? '' : '\n in p (at **)'),
299
+ ' in Inner (at **)',
300
]);
301
});
302
packages/react/src/jsx/ReactJSXElement.js
+67
-289
@@ -10,25 +10,17 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
10
import hasOwnProperty from 'shared/hasOwnProperty';
11
import assign from 'shared/assign';
12
import {
13
- getIteratorFn,
13
REACT_ELEMENT_TYPE,
14
REACT_FRAGMENT_TYPE,
15
REACT_LAZY_TYPE,
16
} from 'shared/ReactSymbols';
17
import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
19
-import isValidElementType from 'shared/isValidElementType';
18
import isArray from 'shared/isArray';
21
-import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
22
-import {
23
- disableDefaultPropsExceptForClasses,
24
- enableOwnerStacks,
25
-} from 'shared/ReactFeatureFlags';
26
-
27
-const REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference');
19
+import {disableDefaultPropsExceptForClasses} from 'shared/ReactFeatureFlags';
20
21
const createTask =
22
// eslint-disable-next-line react-internal/no-production-logging
31
- __DEV__ && enableOwnerStacks && console.createTask
23
+ __DEV__ && console.createTask
24
? // eslint-disable-next-line react-internal/no-production-logging
25
console.createTask
26
: () => null;
@@ -261,20 +253,18 @@ function ReactElement(
253
writable: true,
254
value: null,
255
});
264
- if (enableOwnerStacks) {
265
- Object.defineProperty(element, '_debugStack', {
266
- configurable: false,
267
- enumerable: false,
268
- writable: true,
269
- value: debugStack,
270
- });
271
- Object.defineProperty(element, '_debugTask', {
272
- configurable: false,
273
- enumerable: false,
274
- writable: true,
275
- value: debugTask,
276
- });
277
- }
256
+ Object.defineProperty(element, '_debugStack', {
257
+ configurable: false,
258
+ enumerable: false,
259
+ writable: true,
260
+ value: debugStack,
261
+ });
262
+ Object.defineProperty(element, '_debugTask', {
263
+ configurable: false,
264
+ enumerable: false,
265
+ writable: true,
266
+ value: debugTask,
267
+ });
268
if (Object.freeze) {
269
Object.freeze(element.props);
270
Object.freeze(element);
@@ -390,8 +380,8 @@ export function jsxProdSignatureRunningInDevWithDynamicChildren(
380
isStaticChildren,
381
source,
382
self,
393
- __DEV__ && enableOwnerStacks ? Error('react-stack-top-frame') : undefined,
394
- __DEV__ && enableOwnerStacks ? createTask(getTaskName(type)) : undefined,
383
+ __DEV__ && Error('react-stack-top-frame'),
384
+ __DEV__ && createTask(getTaskName(type)),
385
);
386
}
387
}
@@ -412,8 +402,8 @@ export function jsxProdSignatureRunningInDevWithStaticChildren(
402
isStaticChildren,
403
source,
404
self,
415
- __DEV__ && enableOwnerStacks ? Error('react-stack-top-frame') : undefined,
416
- __DEV__ && enableOwnerStacks ? createTask(getTaskName(type)) : undefined,
405
+ __DEV__ && Error('react-stack-top-frame'),
406
+ __DEV__ && createTask(getTaskName(type)),
407
);
408
}
409
}
@@ -434,8 +424,8 @@ export function jsxDEV(type, config, maybeKey, isStaticChildren, source, self) {
424
isStaticChildren,
425
source,
426
self,
437
- __DEV__ && enableOwnerStacks ? Error('react-stack-top-frame') : undefined,
438
- __DEV__ && enableOwnerStacks ? createTask(getTaskName(type)) : undefined,
427
+ __DEV__ && Error('react-stack-top-frame'),
428
+ __DEV__ && createTask(getTaskName(type)),
429
);
430
}
431
@@ -450,80 +440,37 @@ function jsxDEVImpl(
440
debugTask,
441
) {
442
if (__DEV__) {
453
- if (!enableOwnerStacks && !isValidElementType(type)) {
454
- // This is an invalid element type.
455
- //
456
- // We warn here so that we can get better stack traces but with enableOwnerStacks
457
- // enabled we don't need this because we get good stacks if we error in the
458
- // renderer anyway. The renderer is the only one that knows what types are valid
459
- // for this particular renderer so we let it error there instead.
460
- //
461
- // We warn in this case but don't throw. We expect the element creation to
462
- // succeed and there will likely be errors in render.
463
- let info = '';
464
- if (
465
- type === undefined ||
466
- (typeof type === 'object' &&
467
- type !== null &&
468
- Object.keys(type).length === 0)
469
- ) {
470
- info +=
471
- ' You likely forgot to export your component from the file ' +
472
- "it's defined in, or you might have mixed up default and named imports.";
473
- }
474
-
475
- let typeString;
476
- if (type === null) {
477
- typeString = 'null';
478
- } else if (isArray(type)) {
479
- typeString = 'array';
480
- } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
481
- typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
482
- info =
483
- ' Did you accidentally export a JSX literal instead of a component?';
484
- } else {
485
- typeString = typeof type;
486
- }
443
+ // We don't warn for invalid element type here because with owner stacks,
444
+ // we error in the renderer. The renderer is the only one that knows what
445
+ // types are valid for this particular renderer so we let it error there.
446
+
447
+ // Skip key warning if the type isn't valid since our key validation logic
448
+ // doesn't expect a non-string/function type and can throw confusing
449
+ // errors. We don't want exception behavior to differ between dev and
450
+ // prod. (Rendering will throw with a helpful message and as soon as the
451
+ // type is fixed, the key warnings will appear.)
452
+ // With owner stacks, we no longer need the type here so this comment is
453
+ // no longer true. Which is why we can run this even for invalid types.
454
+ const children = config.children;
455
+ if (children !== undefined) {
456
+ if (isStaticChildren) {
457
+ if (isArray(children)) {
458
+ for (let i = 0; i < children.length; i++) {
459
+ validateChildKeys(children[i], type);
460
+ }
461
488
- console.error(
489
- 'React.jsx: type is invalid -- expected a string (for ' +
490
- 'built-in components) or a class/function (for composite ' +
491
- 'components) but got: %s.%s',
492
- typeString,
493
- info,
494
- );
495
- } else {
496
- // This is a valid element type.
497
-
498
- // Skip key warning if the type isn't valid since our key validation logic
499
- // doesn't expect a non-string/function type and can throw confusing
500
- // errors. We don't want exception behavior to differ between dev and
501
- // prod. (Rendering will throw with a helpful message and as soon as the
502
- // type is fixed, the key warnings will appear.)
503
- // When enableOwnerStacks is on, we no longer need the type here so this
504
- // comment is no longer true. Which is why we can run this even for invalid
505
- // types.
506
- const children = config.children;
507
- if (children !== undefined) {
508
- if (isStaticChildren) {
509
- if (isArray(children)) {
510
- for (let i = 0; i < children.length; i++) {
511
- validateChildKeys(children[i], type);
512
- }
513
-
514
- if (Object.freeze) {
515
- Object.freeze(children);
516
- }
517
- } else {
518
- console.error(
519
- 'React.jsx: Static children should always be an array. ' +
520
- 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
521
- 'Use the Babel transform instead.',
522
- );
462
+ if (Object.freeze) {
463
+ Object.freeze(children);
464
}
465
} else {
525
- validateChildKeys(children, type);
466
+ console.error(
467
+ 'React.jsx: Static children should always be an array. ' +
468
+ 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
469
+ 'Use the Babel transform instead.',
470
+ );
471
}
472
+ } else {
473
+ validateChildKeys(children, type);
474
}
475
}
476
@@ -640,59 +587,17 @@ function jsxDEVImpl(
587
*/
588
export function createElement(type, config, children) {
589
if (__DEV__) {
643
- if (!enableOwnerStacks && !isValidElementType(type)) {
644
- // This is just an optimistic check that provides a better stack trace before
645
- // owner stacks. It's really up to the renderer if it's a valid element type.
646
- // When owner stacks are enabled, we instead warn in the renderer and it'll
647
- // have the stack trace of the JSX element anyway.
648
- //
649
- // This is an invalid element type.
650
- //
651
- // We warn in this case but don't throw. We expect the element creation to
652
- // succeed and there will likely be errors in render.
653
- let info = '';
654
- if (
655
- type === undefined ||
656
- (typeof type === 'object' &&
657
- type !== null &&
658
- Object.keys(type).length === 0)
659
- ) {
660
- info +=
661
- ' You likely forgot to export your component from the file ' +
662
- "it's defined in, or you might have mixed up default and named imports.";
663
- }
590
+ // We don't warn for invalid element type here because with owner stacks,
591
+ // we error in the renderer. The renderer is the only one that knows what
592
+ // types are valid for this particular renderer so we let it error there.
593
665
- let typeString;
666
- if (type === null) {
667
- typeString = 'null';
668
- } else if (isArray(type)) {
669
- typeString = 'array';
670
- } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
671
- typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
672
- info =
673
- ' Did you accidentally export a JSX literal instead of a component?';
674
- } else {
675
- typeString = typeof type;
676
- }
677
-
678
- console.error(
679
- 'React.createElement: type is invalid -- expected a string (for ' +
680
- 'built-in components) or a class/function (for composite ' +
681
- 'components) but got: %s.%s',
682
- typeString,
683
- info,
684
- );
685
- } else {
686
- // This is a valid element type.
687
-
688
- // Skip key warning if the type isn't valid since our key validation logic
689
- // doesn't expect a non-string/function type and can throw confusing
690
- // errors. We don't want exception behavior to differ between dev and
691
- // prod. (Rendering will throw with a helpful message and as soon as the
692
- // type is fixed, the key warnings will appear.)
693
- for (let i = 2; i < arguments.length; i++) {
694
- validateChildKeys(arguments[i], type);
695
- }
594
+ // Skip key warning if the type isn't valid since our key validation logic
595
+ // doesn't expect a non-string/function type and can throw confusing
596
+ // errors. We don't want exception behavior to differ between dev and
597
+ // prod. (Rendering will throw with a helpful message and as soon as the
598
+ // type is fixed, the key warnings will appear.)
599
+ for (let i = 2; i < arguments.length; i++) {
600
+ validateChildKeys(arguments[i], type);
601
}
602
603
// Unlike the jsx() runtime, createElement() doesn't warn about key spread.
@@ -795,8 +700,8 @@ export function createElement(type, config, children) {
700
undefined,
701
getOwner(),
702
props,
798
- __DEV__ && enableOwnerStacks ? Error('react-stack-top-frame') : undefined,
799
- __DEV__ && enableOwnerStacks ? createTask(getTaskName(type)) : undefined,
703
+ __DEV__ && Error('react-stack-top-frame'),
704
+ __DEV__ && createTask(getTaskName(type)),
705
);
706
}
707
@@ -808,8 +713,8 @@ export function cloneAndReplaceKey(oldElement, newKey) {
713
undefined,
714
!__DEV__ ? undefined : oldElement._owner,
715
oldElement.props,
811
- __DEV__ && enableOwnerStacks ? oldElement._debugStack : undefined,
812
- __DEV__ && enableOwnerStacks ? oldElement._debugTask : undefined,
716
+ __DEV__ && oldElement._debugStack,
717
+ __DEV__ && oldElement._debugTask,
718
);
719
if (__DEV__) {
720
// The cloned element should inherit the original element's key validation.
@@ -914,8 +819,8 @@ export function cloneElement(element, config, children) {
819
undefined,
820
owner,
821
props,
917
- __DEV__ && enableOwnerStacks ? element._debugStack : undefined,
918
- __DEV__ && enableOwnerStacks ? element._debugTask : undefined,
822
+ __DEV__ && element._debugStack,
823
+ __DEV__ && element._debugTask,
824
);
825
826
for (let i = 2; i < arguments.length; i++) {
@@ -936,51 +841,13 @@ export function cloneElement(element, config, children) {
841
*/
842
function validateChildKeys(node, parentType) {
843
if (__DEV__) {
939
- if (enableOwnerStacks) {
940
- // When owner stacks is enabled no warnings happens. All we do is
941
- // mark elements as being in a valid static child position so they
942
- // don't need keys.
943
- if (isValidElement(node)) {
944
- if (node._store) {
945
- node._store.validated = 1;
946
- }
947
- }
948
- return;
949
- }
950
- if (typeof node !== 'object' || !node) {
951
- return;
952
- }
953
- if (node.$$typeof === REACT_CLIENT_REFERENCE) {
954
- // This is a reference to a client component so it's unknown.
955
- } else if (isArray(node)) {
956
- for (let i = 0; i < node.length; i++) {
957
- const child = node[i];
958
- if (isValidElement(child)) {
959
- validateExplicitKey(child, parentType);
960
- }
961
- }
962
- } else if (isValidElement(node)) {
963
- // This element was passed in a valid location.
844
+ // With owner stacks is, no warnings happens. All we do is
845
+ // mark elements as being in a valid static child position so they
846
+ // don't need keys.
847
+ if (isValidElement(node)) {
848
if (node._store) {
849
node._store.validated = 1;
850
}
967
- } else {
968
- const iteratorFn = getIteratorFn(node);
969
- if (typeof iteratorFn === 'function') {
970
- // Entry iterators used to provide implicit keys,
971
- // but now we print a separate warning for them later.
972
- if (iteratorFn !== node.entries) {
973
- const iterator = iteratorFn.call(node);
974
- if (iterator !== node) {
975
- let step;
976
- while (!(step = iterator.next()).done) {
977
- if (isValidElement(step.value)) {
978
- validateExplicitKey(step.value, parentType);
979
- }
980
- }
981
- }
982
- }
983
- }
851
}
852
}
853
}
@@ -999,92 +866,3 @@ export function isValidElement(object) {
866
object.$$typeof === REACT_ELEMENT_TYPE
867
);
868
}
1002
-
1003
-const ownerHasKeyUseWarning = {};
1004
-
1005
-/**
1006
- * Warn if the element doesn't have an explicit key assigned to it.
1007
- * This element is in an array. The array could grow and shrink or be
1008
- * reordered. All children that haven't already been validated are required to
1009
- * have a "key" property assigned to it. Error statuses are cached so a warning
1010
- * will only be shown once.
1011
- *
1012
- * @internal
1013
- * @param {ReactElement} element Element that requires a key.
1014
- * @param {*} parentType element's parent's type.
1015
- */
1016
-function validateExplicitKey(element, parentType) {
1017
- if (enableOwnerStacks) {
1018
- // Skip. Will verify in renderer instead.
1019
- return;
1020
- }
1021
- if (__DEV__) {
1022
- if (!element._store || element._store.validated || element.key != null) {
1023
- return;
1024
- }
1025
- element._store.validated = 1;
1026
-
1027
- const currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
1028
- if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
1029
- return;
1030
- }
1031
- ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
1032
-
1033
- // Usually the current owner is the offender, but if it accepts children as a
1034
- // property, it may be the creator of the child that's responsible for
1035
- // assigning it a key.
1036
- let childOwner = '';
1037
- if (element && element._owner != null && element._owner !== getOwner()) {
1038
- let ownerName = null;
1039
- if (typeof element._owner.tag === 'number') {
1040
- ownerName = getComponentNameFromType(element._owner.type);
1041
- } else if (typeof element._owner.name === 'string') {
1042
- ownerName = element._owner.name;
1043
- }
1044
- // Give the component that originally created this child.
1045
- childOwner = ` It was passed a child from ${ownerName}.`;
1046
- }
1047
-
1048
- const prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
1049
- ReactSharedInternals.getCurrentStack = function () {
1050
- const owner = element._owner;
1051
- // Add an extra top frame while an element is being validated
1052
- let stack = describeUnknownElementTypeFrameInDEV(
1053
- element.type,
1054
- owner ? owner.type : null,
1055
- );
1056
- // Delegate to the injected renderer-specific implementation
1057
- if (prevGetCurrentStack) {
1058
- stack += prevGetCurrentStack() || '';
1059
- }
1060
- return stack;
1061
- };
1062
- console.error(
1063
- 'Each child in a list should have a unique "key" prop.' +
1064
- '%s%s See https://react.dev/link/warning-keys for more information.',
1065
- currentComponentErrorInfo,
1066
- childOwner,
1067
- );
1068
- ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
1069
- }
1070
-}
1071
-
1072
-function getCurrentComponentErrorInfo(parentType) {
1073
- if (__DEV__) {
1074
- let info = '';
1075
- const owner = getOwner();
1076
- if (owner) {
1077
- const name = getComponentNameFromType(owner.type);
1078
- if (name) {
1079
- info = '\n\nCheck the render method of `' + name + '`.';
1080
- }
1081
- }
1082
- if (!info) {
1083
- const parentName = getComponentNameFromType(parentType);
1084
- if (parentName) {
1085
- info = `\n\nCheck the top-level render call using <${parentName}>.`;
1086
- }
1087
- }
1088
- return info;
1089
- }
1090
-}
packages/shared/ReactComponentInfoStack.js
+1
-3
@@ -11,14 +11,12 @@ import type {ReactComponentInfo} from 'shared/ReactTypes';
11
12
import {describeBuiltInComponentFrame} from 'shared/ReactComponentStackFrame';
13
14
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
15
-
14
import {formatOwnerStack} from 'shared/ReactOwnerStackFrames';
15
16
export function getOwnerStackByComponentInfoInDev(
17
componentInfo: ReactComponentInfo,
18
): string {
21
- if (!enableOwnerStacks || !__DEV__) {
19
+ if (!__DEV__) {
20
return '';
21
}
22
try {
packages/shared/ReactComponentStackFrame.js
-63
@@ -7,25 +7,12 @@
7
* @flow
8
*/
9
10
-import type {LazyComponent} from 'react/src/ReactLazy';
11
-
12
-import {
13
- REACT_SUSPENSE_TYPE,
14
- REACT_SUSPENSE_LIST_TYPE,
15
- REACT_FORWARD_REF_TYPE,
16
- REACT_MEMO_TYPE,
17
- REACT_LAZY_TYPE,
18
- REACT_VIEW_TRANSITION_TYPE,
19
-} from 'shared/ReactSymbols';
20
-
10
import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
11
12
import ReactSharedInternals from 'shared/ReactSharedInternals';
13
14
import DefaultPrepareStackTrace from 'shared/DefaultPrepareStackTrace';
15
27
-import {enableViewTransition} from 'shared/ReactFeatureFlags';
28
-
16
let prefix;
17
let suffix;
18
export function describeBuiltInComponentFrame(name: string): string {
@@ -300,53 +287,3 @@ export function describeClassComponentFrame(ctor: Function): string {
287
export function describeFunctionComponentFrame(fn: Function): string {
288
return describeNativeComponentFrame(fn, false);
289
}
303
-
304
-function shouldConstruct(Component: Function) {
305
- const prototype = Component.prototype;
306
- return !!(prototype && prototype.isReactComponent);
307
-}
308
-
309
-// TODO: Delete this once the key warning no longer uses it. I.e. when enableOwnerStacks ship.
310
-export function describeUnknownElementTypeFrameInDEV(type: any): string {
311
- if (!__DEV__) {
312
- return '';
313
- }
314
- if (type == null) {
315
- return '';
316
- }
317
- if (typeof type === 'function') {
318
- return describeNativeComponentFrame(type, shouldConstruct(type));
319
- }
320
- if (typeof type === 'string') {
321
- return describeBuiltInComponentFrame(type);
322
- }
323
- switch (type) {
324
- case REACT_SUSPENSE_TYPE:
325
- return describeBuiltInComponentFrame('Suspense');
326
- case REACT_SUSPENSE_LIST_TYPE:
327
- return describeBuiltInComponentFrame('SuspenseList');
328
- case REACT_VIEW_TRANSITION_TYPE:
329
- if (enableViewTransition) {
330
- return describeBuiltInComponentFrame('ViewTransition');
331
- }
332
- }
333
- if (typeof type === 'object') {
334
- switch (type.$$typeof) {
335
- case REACT_FORWARD_REF_TYPE:
336
- return describeFunctionComponentFrame(type.render);
337
- case REACT_MEMO_TYPE:
338
- // Memo may contain any component type so we recursively resolve it.
339
- return describeUnknownElementTypeFrameInDEV(type.type);
340
- case REACT_LAZY_TYPE: {
341
- const lazyComponent: LazyComponent<any, any> = (type: any);
342
- const payload = lazyComponent._payload;
343
- const init = lazyComponent._init;
344
- try {
345
- // Lazy may contain any component type so we recursively resolve it.
346
- return describeUnknownElementTypeFrameInDEV(init(payload));
347
- } catch (x) {}
348
- }
349
- }
350
- }
351
- return '';
352
-}
packages/shared/ReactFeatureFlags.js
-2
@@ -136,8 +136,6 @@ export const passChildrenWhenCloningPersistedNodes = false;
136
*/
137
export const enablePersistedModeClonedFlag = false;
138
139
-export const enableOwnerStacks = true;
140
-
139
export const enableShallowPropDiffing = false;
140
141
export const enableSiblingPrerendering = true;
packages/shared/forks/ReactFeatureFlags.native-fb.js
-3
@@ -32,9 +32,6 @@ export const {
32
enableLazyPublicInstanceInFabric,
33
} = dynamicFlags;
34
35
-// These two can be removed
36
-export const enableOwnerStacks = true;
37
-
35
// The rest of the flags are static for better dead code elimination.
36
export const disableClientCache = true;
37
export const disableCommentsAsDOMContainers = true;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -41,7 +41,6 @@ export const enableLegacyFBSupport = false;
41
export const enableLegacyHidden = false;
42
export const enableNoCloningMemoCache = false;
43
export const enableObjectFiber = false;
44
-export const enableOwnerStacks = true;
44
export const enablePersistedModeClonedFlag = false;
45
export const enablePostpone = false;
46
export const enableReactTestRendererWarning = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -91,7 +91,6 @@ export const enableReactTestRendererWarning = true;
91
export const disableDefaultPropsExceptForClasses = true;
92
93
export const enableObjectFiber = false;
94
-export const enableOwnerStacks = true;
94
95
// Flow magic to verify the exports of this file match the original version.
96
((((null: any): ExportsType): FeatureFlagsType): ExportsType);
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
-1
@@ -35,7 +35,6 @@ export const enableLegacyFBSupport = false;
35
export const enableLegacyHidden = false;
36
export const enableNoCloningMemoCache = false;
37
export const enableObjectFiber = false;
38
-export const enableOwnerStacks = true;
38
export const enablePersistedModeClonedFlag = false;
39
export const enablePostpone = false;
40
export const enableProfilerCommitHooks = __PROFILE__;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -71,7 +71,6 @@ export const disableDefaultPropsExceptForClasses = true;
71
export const renameElementSymbol = false;
72
73
export const enableObjectFiber = false;
74
-export const enableOwnerStacks = true;
74
export const enableShallowPropDiffing = false;
75
export const enableSiblingPrerendering = true;
76
packages/shared/forks/ReactFeatureFlags.www.js
-3
@@ -43,9 +43,6 @@ export const {
43
// On WWW, __EXPERIMENTAL__ is used for a new modern build.
44
// It's not used anywhere in production yet.
45
46
-// Can remove these two
47
-export const enableOwnerStacks = true;
48
-
46
export const enableProfilerTimer = __PROFILE__;
47
export const enableProfilerCommitHooks = __PROFILE__;
48
export const enableProfilerNestedUpdatePhase = __PROFILE__;
packages/shared/isValidElementType.js
+1
-1
@@ -36,7 +36,7 @@ import {
36
const REACT_CLIENT_REFERENCE: symbol = Symbol.for('react.client.reference');
37
38
// This function is deprecated. Don't use. Only the renderer knows what a valid type is.
39
-// TODO: Delete this when enableOwnerStacks ships.
39
+// TODO: Delete this now that owner stacks shipped.
40
export default function isValidElementType(type: mixed): boolean {
41
if (typeof type === 'string' || typeof type === 'function') {
42
return true;
scripts/jest/setupTests.www.js
-1
@@ -11,7 +11,6 @@ jest.mock('shared/ReactFeatureFlags', () => {
11
// Flags that aren't currently used, but we still want to force variants to keep the
12
// code live.
13
actual.disableInputAttributeSyncing = __VARIANT__;
14
- actual.enableOwnerStacks = __VARIANT__;
14
15
// These are hardcoded to true for the next release,
16
// but still run the tests against both variants until
scripts/jest/setupTests.xplat.js
-2
@@ -11,8 +11,6 @@ jest.mock('shared/ReactFeatureFlags', () => {
11
'shared/forks/ReactFeatureFlags.native-fb.js'
12
);
13
14
- actual.enableOwnerStacks = __VARIANT__;
15
-
14
// Lots of tests use these, but we don't want to expose it to RN.
15
// Ideally, tests for xplat wouldn't use react-dom, but many of our tests do.
16
// Since the xplat tests run with the www entry points, some of these flags