Use console directly instead of warning() modules (#17599)
* Replace all warning/lowPriWarning with console calls * Replace console.warn/error with a custom wrapper at build time * Fail the build for console.error/warn() where we can't read the stack
Dan Abramov committed
Dec 14, 2019 at 18:09 UTC
0cf22a56a18790ef34c71bef14f64695c0498619
102 files changed
+753
-776
.eslintrc.js
+14
-1
@@ -33,7 +33,8 @@ module.exports = {
33
'comma-dangle': [ERROR, 'always-multiline'],
34
'consistent-return': OFF,
35
'dot-location': [ERROR, 'property'],
36
- 'dot-notation': ERROR,
36
+ // We use console['error']() as a signal to not transform it:
37
+ 'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}],
38
'eol-last': ERROR,
39
eqeqeq: [ERROR, 'allow-null'],
40
indent: OFF,
@@ -135,6 +136,18 @@ module.exports = {
136
'jest/valid-expect-in-promise': ERROR,
137
},
138
},
139
+ {
140
+ files: [
141
+ '**/__tests__/**/*.js',
142
+ 'scripts/**/*.js',
143
+ 'packages/*/npm/**/*.js',
144
+ 'packages/react-devtools*/**/*.js'
145
+ ],
146
+ rules: {
147
+ 'react-internal/no-production-logging': OFF,
148
+ 'react-internal/warning-args': OFF,
149
+ },
150
+ },
151
{
152
files: ['packages/react-native-renderer/**/*.js'],
153
globals: {
packages/create-subscription/src/createSubscription.js
+2
-3
@@ -9,7 +9,6 @@
9
10
import React from 'react';
11
import invariant from 'shared/invariant';
12
-import warning from 'shared/warning';
12
13
type Unsubscribe = () => void;
14
@@ -38,10 +37,10 @@ export function createSubscription<Property, Value>(
37
38
if (__DEV__) {
39
if (typeof getCurrentValue !== 'function') {
41
- warning('Subscription must specify a getCurrentValue function');
40
+ console.error('Subscription must specify a getCurrentValue function');
41
}
42
if (typeof subscribe !== 'function') {
44
- warning('Subscription must specify a subscribe function');
43
+ console.error('Subscription must specify a subscribe function');
44
}
45
}
46
packages/legacy-events/EventPluginUtils.js
+2
-3
@@ -7,7 +7,6 @@
7
8
import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
9
import invariant from 'shared/invariant';
10
-import warning from 'shared/warning';
10
11
export let getFiberCurrentPropsFromNode = null;
12
export let getInstanceFromNode = null;
@@ -23,7 +22,7 @@ export function setComponentTree(
22
getNodeFromInstance = getNodeFromInstanceImpl;
23
if (__DEV__) {
24
if (!getNodeFromInstance || !getInstanceFromNode) {
26
- warning(
25
+ console.error(
26
'EventPluginUtils.setComponentTree(...): Injected ' +
27
'module is missing getNodeFromInstance or getInstanceFromNode.',
28
);
@@ -52,7 +51,7 @@ if (__DEV__) {
51
: 0;
52
53
if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {
55
- warning('EventPluginUtils: Invalid `event`.');
54
+ console.error('EventPluginUtils: Invalid `event`.');
55
}
56
};
57
}
packages/legacy-events/EventPropagators.js
+1
-2
@@ -10,7 +10,6 @@ import {
10
traverseTwoPhase,
11
traverseEnterLeave,
12
} from 'shared/ReactTreeTraversal';
13
-import warning from 'shared/warning';
13
14
import {getListener} from './EventPluginHub';
15
import accumulateInto from './accumulateInto';
@@ -47,7 +46,7 @@ function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
46
function accumulateDirectionalDispatches(inst, phase, event) {
47
if (__DEV__) {
48
if (!inst) {
50
- warning('Dispatching inst must not be null');
49
+ console.error('Dispatching inst must not be null');
50
}
51
}
52
const listener = listenerAtPhase(inst, event, phase);
packages/legacy-events/ResponderEventPlugin.js
+5
-3
@@ -515,9 +515,11 @@ const ResponderEventPlugin = {
515
if (trackedTouchCount >= 0) {
516
trackedTouchCount -= 1;
517
} else {
518
- console.warn(
519
- 'Ended a touch event which was not counted in `trackedTouchCount`.',
520
- );
518
+ if (__DEV__) {
519
+ console.warn(
520
+ 'Ended a touch event which was not counted in `trackedTouchCount`.',
521
+ );
522
+ }
523
return null;
524
}
525
}
packages/legacy-events/ResponderTouchHistoryStore.js
+20
-15
@@ -8,7 +8,6 @@
8
*/
9
10
import invariant from 'shared/invariant';
11
-import warning from 'shared/warning';
11
12
import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
13
@@ -96,7 +95,7 @@ function getTouchIdentifier({identifier}: Touch): number {
95
invariant(identifier != null, 'Touch object is missing identifier.');
96
if (__DEV__) {
97
if (identifier > MAX_TOUCH_BANK) {
99
- warning(
98
+ console.error(
99
'Touch identifier %s is greater than maximum supported %s which causes ' +
100
'performance issues backfilling array locations for all of the indices.',
101
identifier,
@@ -130,12 +129,15 @@ function recordTouchMove(touch: Touch): void {
129
touchRecord.currentTimeStamp = timestampForTouch(touch);
130
touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
131
} else {
133
- console.warn(
134
- 'Cannot record touch move without a touch start.\n' + 'Touch Move: %s\n',
135
- 'Touch Bank: %s',
136
- printTouch(touch),
137
- printTouchBank(),
138
- );
132
+ if (__DEV__) {
133
+ console.warn(
134
+ 'Cannot record touch move without a touch start.\n' +
135
+ 'Touch Move: %s\n' +
136
+ 'Touch Bank: %s',
137
+ printTouch(touch),
138
+ printTouchBank(),
139
+ );
140
+ }
141
}
142
}
143
@@ -151,12 +153,15 @@ function recordTouchEnd(touch: Touch): void {
153
touchRecord.currentTimeStamp = timestampForTouch(touch);
154
touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
155
} else {
154
- console.warn(
155
- 'Cannot record touch end without a touch start.\n' + 'Touch End: %s\n',
156
- 'Touch Bank: %s',
157
- printTouch(touch),
158
- printTouchBank(),
159
- );
156
+ if (__DEV__) {
157
+ console.warn(
158
+ 'Cannot record touch end without a touch start.\n' +
159
+ 'Touch End: %s\n' +
160
+ 'Touch Bank: %s',
161
+ printTouch(touch),
162
+ printTouchBank(),
163
+ );
164
+ }
165
}
166
}
167
@@ -202,7 +207,7 @@ const ResponderTouchHistoryStore = {
207
if (__DEV__) {
208
const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
209
if (activeRecord == null || !activeRecord.touchActive) {
205
- warning('Cannot find single active touch.');
210
+ console.error('Cannot find single active touch.');
211
}
212
}
213
}
packages/legacy-events/SyntheticEvent.js
+1
-2
@@ -8,7 +8,6 @@
8
/* eslint valid-typeof: 0 */
9
10
import invariant from 'shared/invariant';
11
-import warning from 'shared/warning';
11
12
const EVENT_POOL_SIZE = 10;
13
@@ -284,7 +283,7 @@ function getPooledWarningPropertyDefinition(propName, getVal) {
283
284
function warn(action, result) {
285
if (__DEV__) {
287
- warning(
286
+ console.error(
287
"This synthetic event is reused for performance reasons. If you're seeing this, " +
288
"you're %s `%s` on a released/nullified synthetic event. %s. " +
289
'If you must keep the original synthetic event around, use event.persist(). ' +
packages/react-cache/src/ReactCache.js
+1
-2
@@ -8,7 +8,6 @@
8
*/
9
10
import React from 'react';
11
-import warning from 'shared/warning';
11
12
import {createLRU} from './LRU';
13
@@ -71,7 +70,7 @@ function identityHashFn(input) {
70
input !== undefined &&
71
input !== null
72
) {
74
- warning(
73
+ console.error(
74
'Invalid key type. Expected a string, number, symbol, or boolean, ' +
75
'but instead received: %s' +
76
'\n\nTo use non-primitive values as keys, you must pass a hash ' +
packages/react-dom/src/client/ReactDOM.js
+3
-4
@@ -53,8 +53,6 @@ import {
53
} from 'legacy-events/EventPropagators';
54
import ReactVersion from 'shared/ReactVersion';
55
import invariant from 'shared/invariant';
56
-import lowPriorityWarning from 'shared/lowPriorityWarning';
57
-import warning from 'shared/warning';
56
import {exposeConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
57
58
import {
@@ -92,7 +90,7 @@ if (__DEV__) {
90
typeof Set.prototype.clear !== 'function' ||
91
typeof Set.prototype.forEach !== 'function'
92
) {
95
- warning(
93
+ console.error(
94
'React depends on Map and Set built-in types. Make sure that you load a ' +
95
'polyfill in older browsers. https://fb.me/react-polyfills',
96
);
@@ -144,7 +142,7 @@ const ReactDOM: Object = {
142
if (__DEV__) {
143
if (!didWarnAboutUnstableCreatePortal) {
144
didWarnAboutUnstableCreatePortal = true;
147
- lowPriorityWarning(
145
+ console.warn(
146
'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
147
'and will be removed in React 17+. Update your code to use ' +
148
'ReactDOM.createPortal() instead. It has the exact same API, ' +
@@ -213,6 +211,7 @@ if (__DEV__) {
211
const protocol = window.location.protocol;
212
// Don't warn in exotic cases like chrome-extension://.
213
if (/^(https?|file):$/.test(protocol)) {
214
+ // eslint-disable-next-line react-internal/no-production-logging
215
console.info(
216
'%cDownload the React DevTools ' +
217
'for a better development experience: ' +
packages/react-dom/src/client/ReactDOMComponent.js
+14
-15
@@ -11,7 +11,6 @@
11
import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
12
import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
13
import {canUseDOM} from 'shared/ExecutionEnvironment';
14
-import warning from 'shared/warning';
14
import endsWith from 'shared/endsWith';
15
import {setListenToResponderEventTypes} from '../events/DOMEventResponderSystem';
16
@@ -183,7 +182,7 @@ if (__DEV__) {
182
return;
183
}
184
didWarnInvalidHydration = true;
186
- warning(
185
+ console.error(
186
'Text content did not match. Server: "%s" Client: "%s"',
187
normalizedServerText,
188
normalizedClientText,
@@ -208,7 +207,7 @@ if (__DEV__) {
207
return;
208
}
209
didWarnInvalidHydration = true;
211
- warning(
210
+ console.error(
211
'Prop `%s` did not match. Server: %s Client: %s',
212
propName,
213
JSON.stringify(normalizedServerValue),
@@ -225,12 +224,12 @@ if (__DEV__) {
224
attributeNames.forEach(function(name) {
225
names.push(name);
226
});
228
- warning('Extra attributes from the server: %s', names);
227
+ console.error('Extra attributes from the server: %s', names);
228
};
229
230
warnForInvalidEventListener = function(registrationName, listener) {
231
if (listener === false) {
233
- warning(
232
+ console.error(
233
'Expected `%s` listener to be a function, instead got `false`.\n\n' +
234
'If you used to conditionally omit it with %s={condition && value}, ' +
235
'pass %s={condition ? value : undefined} instead.',
@@ -239,7 +238,7 @@ if (__DEV__) {
238
registrationName,
239
);
240
} else {
242
- warning(
241
+ console.error(
242
'Expected `%s` listener to be a function, instead got a value of `%s` type.',
243
registrationName,
244
typeof listener,
@@ -412,7 +411,7 @@ export function createElement(
411
// Should this check be gated by parent namespace? Not sure we want to
412
// allow <SVG> or <mATH>.
413
if (!isCustomComponentTag && type !== type.toLowerCase()) {
415
- warning(
414
+ console.error(
415
'<%s /> is using incorrect casing. ' +
416
'Use PascalCase for React components, ' +
417
'or lowercase for HTML elements.',
@@ -427,7 +426,7 @@ export function createElement(
426
const div = ownerDocument.createElement('div');
427
if (__DEV__) {
428
if (enableTrustedTypesIntegration && !didWarnScriptTags) {
430
- warning(
429
+ console.error(
430
'Encountered a script tag while rendering React component. ' +
431
'Scripts inside React components are never executed when rendering ' +
432
'on the client. Consider using template tag instead ' +
@@ -482,7 +481,7 @@ export function createElement(
481
!Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)
482
) {
483
warnedUnknownTags[type] = true;
485
- warning(
484
+ console.error(
485
'The tag <%s> is unrecognized in this browser. ' +
486
'If you meant to render a React component, start its name with ' +
487
'an uppercase letter.',
@@ -518,7 +517,7 @@ export function setInitialProperties(
517
!didWarnShadyDOM &&
518
(domElement: any).shadyRoot
519
) {
521
- warning(
520
+ console.error(
521
'%s is using shady DOM. Using shady DOM with React can ' +
522
'cause things to break subtly.',
523
getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -918,7 +917,7 @@ export function diffHydratedProperties(
917
!didWarnShadyDOM &&
918
(domElement: any).shadyRoot
919
) {
921
- warning(
920
+ console.error(
921
'%s is using shady DOM. Using shady DOM with React can ' +
922
'cause things to break subtly.',
923
getCurrentFiberOwnerNameInDevOrNull() || 'A component',
@@ -1210,7 +1209,7 @@ export function warnForDeletedHydratableElement(
1209
return;
1210
}
1211
didWarnInvalidHydration = true;
1213
- warning(
1212
+ console.error(
1213
'Did not expect server HTML to contain a <%s> in <%s>.',
1214
child.nodeName.toLowerCase(),
1215
parentNode.nodeName.toLowerCase(),
@@ -1227,7 +1226,7 @@ export function warnForDeletedHydratableText(
1226
return;
1227
}
1228
didWarnInvalidHydration = true;
1230
- warning(
1229
+ console.error(
1230
'Did not expect server HTML to contain the text node "%s" in <%s>.',
1231
child.nodeValue,
1232
parentNode.nodeName.toLowerCase(),
@@ -1245,7 +1244,7 @@ export function warnForInsertedHydratedElement(
1244
return;
1245
}
1246
didWarnInvalidHydration = true;
1248
- warning(
1247
+ console.error(
1248
'Expected server HTML to contain a matching <%s> in <%s>.',
1249
tag,
1250
parentNode.nodeName.toLowerCase(),
@@ -1269,7 +1268,7 @@ export function warnForInsertedHydratedText(
1268
return;
1269
}
1270
didWarnInvalidHydration = true;
1272
- warning(
1271
+ console.error(
1272
'Expected server HTML to contain a matching text node for "%s" in <%s>.',
1273
text,
1274
parentNode.nodeName.toLowerCase(),
packages/react-dom/src/client/ReactDOMInput.js
+4
-5
@@ -10,7 +10,6 @@
10
// TODO: direct imports like some-package/src/* are bad. Fix me.
11
import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
12
import invariant from 'shared/invariant';
13
-import warning from 'shared/warning';
13
14
import {setValueForProperty} from './DOMPropertyOperations';
15
import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
@@ -79,7 +78,7 @@ export function initWrapperState(element: Element, props: Object) {
78
props.defaultChecked !== undefined &&
79
!didWarnCheckedDefaultChecked
80
) {
82
- warning(
81
+ console.error(
82
'%s contains an input of type %s with both checked and defaultChecked props. ' +
83
'Input elements must be either controlled or uncontrolled ' +
84
'(specify either the checked prop, or the defaultChecked prop, but not ' +
@@ -96,7 +95,7 @@ export function initWrapperState(element: Element, props: Object) {
95
props.defaultValue !== undefined &&
96
!didWarnValueDefaultValue
97
) {
99
- warning(
98
+ console.error(
99
'%s contains an input of type %s with both value and defaultValue props. ' +
100
'Input elements must be either controlled or uncontrolled ' +
101
'(specify either the value prop, or the defaultValue prop, but not ' +
@@ -141,7 +140,7 @@ export function updateWrapper(element: Element, props: Object) {
140
controlled &&
141
!didWarnUncontrolledToControlled
142
) {
144
- warning(
143
+ console.error(
144
'A component is changing an uncontrolled input of type %s to be controlled. ' +
145
'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
146
'Decide between using a controlled or uncontrolled input ' +
@@ -155,7 +154,7 @@ export function updateWrapper(element: Element, props: Object) {
154
!controlled &&
155
!didWarnControlledToUncontrolled
156
) {
158
- warning(
157
+ console.error(
158
'A component is changing a controlled input of type %s to be uncontrolled. ' +
159
'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
160
'Decide between using a controlled or uncontrolled input ' +
packages/react-dom/src/client/ReactDOMLegacy.js
+11
-13
@@ -38,8 +38,6 @@ import {
38
} from 'react-reconciler/inline.dom';
39
import getComponentName from 'shared/getComponentName';
40
import invariant from 'shared/invariant';
41
-import lowPriorityWarning from 'shared/lowPriorityWarning';
42
-import warning from 'shared/warning';
41
import ReactSharedInternals from 'shared/ReactSharedInternals';
42
import {has as hasInstance} from 'shared/ReactInstanceMap';
43
@@ -56,7 +54,7 @@ if (__DEV__) {
54
);
55
if (hostInstance) {
56
if (hostInstance.parentNode !== container) {
59
- warning(
57
+ console.error(
58
'render(...): It looks like the React-rendered content of this ' +
59
'container was removed without using React. This is not ' +
60
'supported and will cause errors. Instead, call ' +
@@ -71,7 +69,7 @@ if (__DEV__) {
69
const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
70
71
if (hasNonRootReactChild && !isRootRenderedBySomeReact) {
74
- warning(
72
+ console.error(
73
'render(...): Replacing React-rendered children with a new root ' +
74
'component. If you intended to update the children of this node, ' +
75
'you should instead have the existing children update their state ' +
@@ -84,7 +82,7 @@ if (__DEV__) {
82
((container: any): Element).tagName &&
83
((container: any): Element).tagName.toUpperCase() === 'BODY'
84
) {
87
- warning(
85
+ console.error(
86
'render(): Rendering components directly into document.body is ' +
87
'discouraged, since its children are often manipulated by third-party ' +
88
'scripts and browser extensions. This may lead to subtle ' +
@@ -134,7 +132,7 @@ function legacyCreateRootFromDOMContainer(
132
(rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
133
) {
134
warned = true;
137
- warning(
135
+ console.error(
136
'render(): Target node has markup rendered by React, but there ' +
137
'are unrelated nodes as well. This is most commonly caused by ' +
138
'white-space inserted around server-rendered markup.',
@@ -147,7 +145,7 @@ function legacyCreateRootFromDOMContainer(
145
if (__DEV__) {
146
if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
147
warnedAboutHydrateAPI = true;
150
- lowPriorityWarning(
148
+ console.warn(
149
'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
150
'will stop working in React v17. Replace the ReactDOM.render() call ' +
151
'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
@@ -222,7 +220,7 @@ export function findDOMNode(
220
if (owner !== null && owner.stateNode !== null) {
221
const warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender;
222
if (!warnedAboutRefsInRender) {
225
- warning(
223
+ console.error(
224
'%s is accessing findDOMNode inside its render(). ' +
225
'render() should be a pure function of props and state. It should ' +
226
'never access something that requires stale data from the previous ' +
@@ -260,7 +258,7 @@ export function hydrate(
258
isContainerMarkedAsRoot(container) &&
259
container._reactRootContainer === undefined;
260
if (isModernRoot) {
263
- warning(
261
+ console.error(
262
'You are calling ReactDOM.hydrate() on a container that was previously ' +
263
'passed to ReactDOM.createRoot(). This is not supported. ' +
264
'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
@@ -291,7 +289,7 @@ export function render(
289
isContainerMarkedAsRoot(container) &&
290
container._reactRootContainer === undefined;
291
if (isModernRoot) {
294
- warning(
292
+ console.error(
293
'You are calling ReactDOM.render() on a container that was previously ' +
294
'passed to ReactDOM.createRoot(). This is not supported. ' +
295
'Did you mean to call root.render(element)?',
@@ -341,7 +339,7 @@ export function unmountComponentAtNode(container: DOMContainer) {
339
isContainerMarkedAsRoot(container) &&
340
container._reactRootContainer === undefined;
341
if (isModernRoot) {
344
- warning(
342
+ console.error(
343
'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
344
'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
345
);
@@ -353,7 +351,7 @@ export function unmountComponentAtNode(container: DOMContainer) {
351
const rootEl = getReactRootElementInContainer(container);
352
const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
353
if (renderedByDifferentReact) {
356
- warning(
354
+ console.error(
355
"unmountComponentAtNode(): The node you're attempting to unmount " +
356
'was rendered by another copy of React.',
357
);
@@ -382,7 +380,7 @@ export function unmountComponentAtNode(container: DOMContainer) {
380
!!container.parentNode._reactRootContainer;
381
382
if (hasNonRootReactChild) {
385
- warning(
383
+ console.error(
384
"unmountComponentAtNode(): The node you're attempting to unmount " +
385
'was rendered by React and is not a top-level container. %s',
386
isContainerReactRoot
packages/react-dom/src/client/ReactDOMOption.js
+2
-3
@@ -8,7 +8,6 @@
8
*/
9
10
import React from 'react';
11
-import warning from 'shared/warning';
11
import {getToStringValue, toString} from './ToStringValue';
12
13
let didWarnSelectedSetOnOption = false;
@@ -58,7 +57,7 @@ export function validateProps(element: Element, props: Object) {
57
}
58
if (!didWarnInvalidChild) {
59
didWarnInvalidChild = true;
61
- warning(
60
+ console.error(
61
'Only strings and numbers are supported as <option> children.',
62
);
63
}
@@ -67,7 +66,7 @@ export function validateProps(element: Element, props: Object) {
66
67
// TODO: Remove support for `selected` in <option>.
68
if (props.selected != null && !didWarnSelectedSetOnOption) {
70
- warning(
69
+ console.error(
70
'Use the `defaultValue` or `value` props on <select> instead of ' +
71
'setting `selected` on <option>.',
72
);
packages/react-dom/src/client/ReactDOMRoot.js
+3
-4
@@ -44,7 +44,6 @@ import {
44
45
import {createContainer, updateContainer} from 'react-reconciler/inline.dom';
46
import invariant from 'shared/invariant';
47
-import warning from 'shared/warning';
47
import {BlockingRoot, ConcurrentRoot, LegacyRoot} from 'shared/ReactRootTags';
48
49
function ReactDOMRoot(container: DOMContainer, options: void | RootOptions) {
@@ -157,7 +156,7 @@ export function warnOnInvalidCallback(
156
): void {
157
if (__DEV__) {
158
if (callback !== null && typeof callback !== 'function') {
160
- warning(
159
+ console.error(
160
'%s(...): Expected the last optional `callback` argument to be a ' +
161
'function. Instead received: %s.',
162
callerName,
@@ -171,12 +170,12 @@ function warnIfReactDOMContainerInDEV(container) {
170
if (__DEV__) {
171
if (isContainerMarkedAsRoot(container)) {
172
if (container._reactRootContainer) {
174
- warning(
173
+ console.error(
174
'You are calling ReactDOM.createRoot() on a container that was previously ' +
175
'passed to ReactDOM.render(). This is not supported.',
176
);
177
} else {
179
- warning(
178
+ console.error(
179
'You are calling ReactDOM.createRoot() on a container that ' +
180
'has already been passed to createRoot() before. Instead, call ' +
181
'root.render() on the existing root instead if you want to update it.',
packages/react-dom/src/client/ReactDOMSelect.js
+3
-4
@@ -9,7 +9,6 @@
9
10
// TODO: direct imports like some-package/src/* are bad. Fix me.
11
import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
12
-import warning from 'shared/warning';
12
13
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
14
import {getToStringValue, toString} from './ToStringValue';
@@ -50,14 +49,14 @@ function checkSelectPropTypes(props) {
49
}
50
const isArray = Array.isArray(props[propName]);
51
if (props.multiple && !isArray) {
53
- warning(
52
+ console.error(
53
'The `%s` prop supplied to <select> must be an array if ' +
54
'`multiple` is true.%s',
55
propName,
56
getDeclarationErrorAddendum(),
57
);
58
} else if (!props.multiple && isArray) {
60
- warning(
59
+ console.error(
60
'The `%s` prop supplied to <select> must be a scalar ' +
61
'value if `multiple` is false.%s',
62
propName,
@@ -156,7 +155,7 @@ export function initWrapperState(element: Element, props: Object) {
155
props.defaultValue !== undefined &&
156
!didWarnValueDefaultValue
157
) {
159
- warning(
158
+ console.error(
159
'Select elements must be either controlled or uncontrolled ' +
160
'(specify either the value prop, or the defaultValue prop, but not ' +
161
'both). Decide between using a controlled or uncontrolled select ' +
packages/react-dom/src/client/ReactDOMTextarea.js
+2
-3
@@ -8,7 +8,6 @@
8
*/
9
10
import invariant from 'shared/invariant';
11
-import warning from 'shared/warning';
11
12
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
13
import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
@@ -71,7 +70,7 @@ export function initWrapperState(element: Element, props: Object) {
70
props.defaultValue !== undefined &&
71
!didWarnValDefaultVal
72
) {
74
- warning(
73
+ console.error(
74
'%s contains a textarea with both value and defaultValue props. ' +
75
'Textarea elements must be either controlled or uncontrolled ' +
76
'(specify either the value prop, or the defaultValue prop, but not ' +
@@ -93,7 +92,7 @@ export function initWrapperState(element: Element, props: Object) {
92
let children = props.children;
93
if (children != null) {
94
if (__DEV__) {
96
- warning(
95
+ console.error(
96
'Use the `defaultValue` or `value` props instead of setting ' +
97
'children on <textarea>.',
98
);
packages/react-dom/src/client/setInnerHTML.js
+1
-2
@@ -9,7 +9,6 @@
9
10
import {Namespaces} from '../shared/DOMNamespaces';
11
import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
12
-import warning from 'shared/warning';
12
import type {TrustedValue} from './ToStringValue';
13
import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
14
@@ -33,7 +32,7 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
32
// TODO: reconsider the text of this warning and when it should show
33
// before enabling the feature flag.
34
if (typeof trustedTypes !== 'undefined') {
36
- warning(
35
+ console.error(
36
"Using 'dangerouslySetInnerHTML' in an svg element with " +
37
'Trusted Types enabled in an Internet Explorer will cause ' +
38
'the trusted value to be converted to string. Assigning string ' +
packages/react-dom/src/client/validateDOMNesting.js
+3
-4
@@ -5,7 +5,6 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import warning from 'shared/warning';
8
// TODO: direct imports like some-package/src/* are bad. Fix me.
9
import {getCurrentFiberStackInDev} from 'react-reconciler/src/ReactCurrentFiber';
10
@@ -412,7 +411,7 @@ if (__DEV__) {
411
412
if (childText != null) {
413
if (childTag != null) {
415
- warning(
414
+ console.error(
415
'validateDOMNesting: when childText is passed, childTag should be null',
416
);
417
}
@@ -462,7 +461,7 @@ if (__DEV__) {
461
' Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by ' +
462
'the browser.';
463
}
465
- warning(
464
+ console.error(
465
'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s',
466
tagDisplayName,
467
ancestorTag,
@@ -470,7 +469,7 @@ if (__DEV__) {
469
info,
470
);
471
} else {
473
- warning(
472
+ console.error(
473
'validateDOMNesting(...): %s cannot appear as a descendant of ' +
474
'<%s>.',
475
tagDisplayName,
packages/react-dom/src/events/DOMEventResponderSystem.js
+1
-2
@@ -29,7 +29,6 @@ import {
29
} from 'legacy-events/ReactGenericBatching';
30
import {enqueueStateRestore} from 'legacy-events/ReactControlledComponent';
31
import type {Fiber} from 'react-reconciler/src/ReactFiber';
32
-import warning from 'shared/warning';
32
import {enableFlareAPI} from 'shared/ReactFeatureFlags';
33
import invariant from 'shared/invariant';
34
@@ -234,7 +233,7 @@ function validateEventValue(eventValue: any): void {
233
}
234
const showWarning = name => {
235
if (__DEV__) {
237
- warning(
236
+ console.error(
237
'%s is not available on event objects created from event responder modules (React Flare). ' +
238
'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.%s }`',
239
name,
packages/react-dom/src/events/SimpleEventPlugin.js
+1
-2
@@ -29,7 +29,6 @@ import {accumulateTwoPhaseDispatches} from 'legacy-events/EventPropagators';
29
import SyntheticEvent from 'legacy-events/SyntheticEvent';
30
31
import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
32
-import warning from 'shared/warning';
32
33
import SyntheticAnimationEvent from './SyntheticAnimationEvent';
34
import SyntheticClipboardEvent from './SyntheticClipboardEvent';
@@ -342,7 +341,7 @@ const SimpleEventPlugin: PluginModule<MouseEvent> & {
341
default:
342
if (__DEV__) {
343
if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
345
- warning(
344
+ console.error(
345
'SimpleEventPlugin: Unhandled event type, `%s`. This warning ' +
346
'is likely caused by a bug in React. Please file an issue.',
347
topLevelType,
packages/react-dom/src/server/ReactPartialRenderer.js
+21
-21
@@ -15,8 +15,6 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
15
import React from 'react';
16
import invariant from 'shared/invariant';
17
import getComponentName from 'shared/getComponentName';
18
-import lowPriorityWarning from 'shared/lowPriorityWarning';
19
-import warning from 'shared/warning';
18
import describeComponentFrame from 'shared/describeComponentFrame';
19
import ReactSharedInternals from 'shared/ReactSharedInternals';
20
import {
@@ -269,7 +267,7 @@ function warnNoop(
267
return;
268
}
269
272
- warning(
270
+ console.error(
271
'%s(...): Can only update a mounting component. ' +
272
'This usually means you called %s() outside componentWillMount() on the server. ' +
273
'This is a no-op.\n\nPlease check the code for the %s component.',
@@ -335,7 +333,9 @@ function flattenOptionChildren(children: mixed): ?string {
333
typeof child !== 'number'
334
) {
335
didWarnInvalidOptionChildren = true;
338
- warning('Only strings and numbers are supported as <option> children.');
336
+ console.error(
337
+ 'Only strings and numbers are supported as <option> children.',
338
+ );
339
}
340
}
341
});
@@ -472,7 +472,7 @@ function resolve(
472
if (inst.state === null || inst.state === undefined) {
473
const componentName = getComponentName(Component) || 'Unknown';
474
if (!didWarnAboutUninitializedState[componentName]) {
475
- warning(
475
+ console.error(
476
'`%s` uses `getDerivedStateFromProps` but its initial state is ' +
477
'%s. This is not recommended. Instead, define the initial state by ' +
478
'assigning an object to `this.state` in the constructor of `%s`. ' +
@@ -496,7 +496,7 @@ function resolve(
496
if (partialState === undefined) {
497
const componentName = getComponentName(Component) || 'Unknown';
498
if (!didWarnAboutUndefinedDerivedState[componentName]) {
499
- warning(
499
+ console.error(
500
'%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
501
'You have returned undefined.',
502
componentName,
@@ -519,7 +519,7 @@ function resolve(
519
const componentName = getComponentName(Component) || 'Unknown';
520
521
if (!didWarnAboutBadClass[componentName]) {
522
- warning(
522
+ console.error(
523
"The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
524
'This is likely to cause errors. Change %s to extend React.Component instead.',
525
componentName,
@@ -543,7 +543,7 @@ function resolve(
543
if (__DEV__) {
544
const componentName = getComponentName(Component) || 'Unknown';
545
if (!didWarnAboutModulePatternComponent[componentName]) {
546
- warning(
546
+ console.error(
547
'The <%s /> component appears to be a function component that returns a class instance. ' +
548
'Change %s to a class that extends React.Component instead. ' +
549
"If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -579,7 +579,7 @@ function resolve(
579
const componentName = getComponentName(Component) || 'Unknown';
580
581
if (!didWarnAboutDeprecatedWillMount[componentName]) {
582
- lowPriorityWarning(
582
+ console.warn(
583
// keep this warning in sync with ReactStrictModeWarning.js
584
'componentWillMount has been renamed, and is not recommended for use. ' +
585
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
@@ -655,7 +655,7 @@ function resolve(
655
if (__DEV__) {
656
let childContextTypes = Component.childContextTypes;
657
if (childContextTypes !== undefined) {
658
- warning(
658
+ console.error(
659
'%s uses the legacy childContextTypes API which is no longer supported. ' +
660
'Use React.createContext() instead.',
661
getComponentName(Component) || 'Unknown',
@@ -677,7 +677,7 @@ function resolve(
677
}
678
} else {
679
if (__DEV__) {
680
- warning(
680
+ console.error(
681
'%s.getChildContext(): childContextTypes must be defined in order to ' +
682
'use getChildContext().',
683
getComponentName(Component) || 'Unknown',
@@ -796,7 +796,7 @@ class ReactDOMServerRenderer {
796
const index = this.contextIndex;
797
if (__DEV__) {
798
if (index < 0 || provider !== (this.contextProviderStack: any)[index]) {
799
- warning('Unexpected pop.');
799
+ console.error('Unexpected pop.');
800
}
801
}
802
@@ -1168,7 +1168,7 @@ class ReactDOMServerRenderer {
1168
if (reactContext !== reactContext.Consumer) {
1169
if (!hasWarnedAboutUsingContextAsConsumer) {
1170
hasWarnedAboutUsingContextAsConsumer = true;
1171
- warning(
1171
+ console.error(
1172
'Rendering <Context> directly is not supported and will be removed in ' +
1173
'a future major release. Did you mean to render <Context.Consumer> instead?',
1174
);
@@ -1350,7 +1350,7 @@ class ReactDOMServerRenderer {
1350
// Should this check be gated by parent namespace? Not sure we want to
1351
// allow <SVG> or <mATH>.
1352
if (tag !== element.type) {
1353
- warning(
1353
+ console.error(
1354
'<%s /> is using incorrect casing. ' +
1355
'Use PascalCase for React components, ' +
1356
'or lowercase for HTML elements.',
@@ -1372,7 +1372,7 @@ class ReactDOMServerRenderer {
1372
props.defaultChecked !== undefined &&
1373
!didWarnDefaultChecked
1374
) {
1375
- warning(
1375
+ console.error(
1376
'%s contains an input of type %s with both checked and defaultChecked props. ' +
1377
'Input elements must be either controlled or uncontrolled ' +
1378
'(specify either the checked prop, or the defaultChecked prop, but not ' +
@@ -1389,7 +1389,7 @@ class ReactDOMServerRenderer {
1389
props.defaultValue !== undefined &&
1390
!didWarnDefaultInputValue
1391
) {
1392
- warning(
1392
+ console.error(
1393
'%s contains an input of type %s with both value and defaultValue props. ' +
1394
'Input elements must be either controlled or uncontrolled ' +
1395
'(specify either the value prop, or the defaultValue prop, but not ' +
@@ -1423,7 +1423,7 @@ class ReactDOMServerRenderer {
1423
props.defaultValue !== undefined &&
1424
!didWarnDefaultTextareaValue
1425
) {
1426
- warning(
1426
+ console.error(
1427
'Textarea elements must be either controlled or uncontrolled ' +
1428
'(specify either the value prop, or the defaultValue prop, but not ' +
1429
'both). Decide between using a controlled or uncontrolled textarea ' +
@@ -1441,7 +1441,7 @@ class ReactDOMServerRenderer {
1441
let textareaChildren = props.children;
1442
if (textareaChildren != null) {
1443
if (__DEV__) {
1444
- warning(
1444
+ console.error(
1445
'Use the `defaultValue` or `value` props instead of setting ' +
1446
'children on <textarea>.',
1447
);
@@ -1481,13 +1481,13 @@ class ReactDOMServerRenderer {
1481
}
1482
const isArray = Array.isArray(props[propName]);
1483
if (props.multiple && !isArray) {
1484
- warning(
1484
+ console.error(
1485
'The `%s` prop supplied to <select> must be an array if ' +
1486
'`multiple` is true.',
1487
propName,
1488
);
1489
} else if (!props.multiple && isArray) {
1490
- warning(
1490
+ console.error(
1491
'The `%s` prop supplied to <select> must be a scalar ' +
1492
'value if `multiple` is false.',
1493
propName,
@@ -1500,7 +1500,7 @@ class ReactDOMServerRenderer {
1500
props.defaultValue !== undefined &&
1501
!didWarnDefaultSelectValue
1502
) {
1503
- warning(
1503
+ console.error(
1504
'Select elements must be either controlled or uncontrolled ' +
1505
'(specify either the value prop, or the defaultValue prop, but not ' +
1506
'both). Decide between using a controlled or uncontrolled select ' +
packages/react-dom/src/server/ReactPartialRendererContext.js
+3
-4
@@ -14,7 +14,6 @@ import {disableLegacyContext} from 'shared/ReactFeatureFlags';
14
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
15
import ReactSharedInternals from 'shared/ReactSharedInternals';
16
import getComponentName from 'shared/getComponentName';
17
-import warning from 'shared/warning';
17
import checkPropTypes from 'prop-types/checkPropTypes';
18
19
let ReactDebugCurrentFrame;
@@ -112,7 +111,7 @@ export function processContext(
111
Object.keys(contextType).join(', ') +
112
'}.';
113
}
115
- warning(
114
+ console.error(
115
'%s defines an invalid contextType. ' +
116
'contextType should point to the Context object returned by React.createContext().%s',
117
getComponentName(type) || 'Component',
@@ -128,7 +127,7 @@ export function processContext(
127
if (disableLegacyContext) {
128
if (__DEV__) {
129
if (type.contextTypes) {
131
- warning(
130
+ console.error(
131
'%s uses the legacy contextTypes API which is no longer supported. ' +
132
'Use React.createContext() with static contextType instead.',
133
getComponentName(type) || 'Unknown',
@@ -149,7 +148,7 @@ export function processContext(
148
if (disableLegacyContext) {
149
if (__DEV__) {
150
if (type.contextTypes) {
152
- warning(
151
+ console.error(
152
'%s uses the legacy contextTypes API which is no longer supported. ' +
153
'Use React.createContext() with React.useContext() instead.',
154
getComponentName(type) || 'Unknown',
packages/react-dom/src/server/ReactPartialRendererHooks.js
+5
-6
@@ -20,7 +20,6 @@ import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig
20
import {validateContextBounds} from './ReactPartialRendererContext';
21
22
import invariant from 'shared/invariant';
23
-import warning from 'shared/warning';
23
import is from 'shared/objectIs';
24
25
type BasicStateAction<S> = (S => S) | S;
@@ -72,7 +71,7 @@ function resolveCurrentlyRenderingComponent(): Object {
71
);
72
if (__DEV__) {
73
if (isInHookUserCodeInDev) {
75
- warning(
74
+ console.error(
75
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
76
'You can only call Hooks at the top level of your React function. ' +
77
'For more information, see ' +
@@ -89,7 +88,7 @@ function areHookInputsEqual(
88
) {
89
if (prevDeps === null) {
90
if (__DEV__) {
92
- warning(
91
+ console.error(
92
'%s received a final argument during this render, but not during ' +
93
'the previous render. Even though the final argument is optional, ' +
94
'its type cannot change between renders.',
@@ -103,7 +102,7 @@ function areHookInputsEqual(
102
// Don't bother comparing lengths in prod because these arrays should be
103
// passed inline.
104
if (nextDeps.length !== prevDeps.length) {
106
- warning(
105
+ console.error(
106
'The final argument passed to %s changed size between renders. The ' +
107
'order and size of this array must remain constant.\n\n' +
108
'Previous: %s\n' +
@@ -223,7 +222,7 @@ function readContext<T>(
222
validateContextBounds(context, threadID);
223
if (__DEV__) {
224
if (isInHookUserCodeInDev) {
226
- warning(
225
+ console.error(
226
'Context can only be read while React is rendering. ' +
227
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
228
'In function components, you can read it directly in the function body, but not ' +
@@ -392,7 +391,7 @@ export function useLayoutEffect(
391
) {
392
if (__DEV__) {
393
currentHookNameInDev = 'useLayoutEffect';
395
- warning(
394
+ console.error(
395
'useLayoutEffect does nothing on the server, because its effect cannot ' +
396
"be encoded into the server renderer's output format. This will lead " +
397
'to a mismatch between the initial, non-hydrated UI and the intended ' +
packages/react-dom/src/shared/CSSPropertyOperations.js
+1
-2
@@ -10,7 +10,6 @@ import {shorthandToLonghand} from './CSSShorthandProperty';
10
import dangerousStyleValue from './dangerousStyleValue';
11
import hyphenateStyleName from './hyphenateStyleName';
12
import warnValidStyle from './warnValidStyle';
13
-import warning from 'shared/warning';
13
14
import {warnAboutShorthandPropertyCollision} from 'shared/ReactFeatureFlags';
15
@@ -149,7 +148,7 @@ export function validateShorthandPropertyCollisionInDev(
148
continue;
149
}
150
warnedAbout[warningKey] = true;
152
- warning(
151
+ console.error(
152
'%s a style property during rerender (%s) when a ' +
153
'conflicting property is set (%s) can lead to styling bugs. To ' +
154
"avoid this, don't mix shorthand and non-shorthand properties " +
packages/react-dom/src/shared/DOMProperty.js
+1
-2
@@ -7,7 +7,6 @@
7
* @flow
8
*/
9
10
-import warning from 'shared/warning';
10
import {enableFlareAPI} from 'shared/ReactFeatureFlags';
11
12
type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -85,7 +84,7 @@ export function isAttributeNameSafe(attributeName: string): boolean {
84
}
85
illegalAttributeNameCache[attributeName] = true;
86
if (__DEV__) {
88
- warning('Invalid attribute name: `%s`', attributeName);
87
+ console.error('Invalid attribute name: `%s`', attributeName);
88
}
89
return false;
90
}
packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
+5
-7
@@ -5,8 +5,6 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import warning from 'shared/warning';
9
-
8
import {ATTRIBUTE_NAME_CHAR} from './DOMProperty';
9
import isCustomComponent from './isCustomComponent';
10
import validAriaProperties from './validAriaProperties';
@@ -32,7 +30,7 @@ function validateProperty(tagName, name) {
30
// If this is an aria-* attribute, but is not listed in the known DOM
31
// DOM properties, then it is an invalid aria-* attribute.
32
if (correctName == null) {
35
- warning(
33
+ console.error(
34
'Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.',
35
name,
36
);
@@ -41,7 +39,7 @@ function validateProperty(tagName, name) {
39
}
40
// aria-* attributes should be lowercase; suggest the lowercase version.
41
if (name !== correctName) {
44
- warning(
42
+ console.error(
43
'Invalid ARIA attribute `%s`. Did you mean `%s`?',
44
name,
45
correctName,
@@ -65,7 +63,7 @@ function validateProperty(tagName, name) {
63
}
64
// aria-* attributes should be lowercase; suggest the lowercase version.
65
if (name !== standardName) {
68
- warning(
66
+ console.error(
67
'Unknown ARIA attribute `%s`. Did you mean `%s`?',
68
name,
69
standardName,
@@ -95,14 +93,14 @@ function warnInvalidARIAProps(type, props) {
93
.join(', ');
94
95
if (invalidProps.length === 1) {
98
- warning(
96
+ console.error(
97
'Invalid aria prop %s on <%s> tag. ' +
98
'For details, see https://fb.me/invalid-aria-prop',
99
unknownPropString,
100
type,
101
);
102
} else if (invalidProps.length > 1) {
105
- warning(
103
+ console.error(
104
'Invalid aria props %s on <%s> tag. ' +
105
'For details, see https://fb.me/invalid-aria-prop',
106
unknownPropString,
packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js
+2
-4
@@ -5,8 +5,6 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import warning from 'shared/warning';
9
-
8
let didWarnValueNull = false;
9
10
export function validateProperties(type, props) {
@@ -18,14 +16,14 @@ export function validateProperties(type, props) {
16
if (props != null && props.value === null && !didWarnValueNull) {
17
didWarnValueNull = true;
18
if (type === 'select' && props.multiple) {
21
- warning(
19
+ console.error(
20
'`value` prop on `%s` should not be null. ' +
21
'Consider using an empty array when `multiple` is set to `true` ' +
22
'to clear the component or `undefined` for uncontrolled components.',
23
type,
24
);
25
} else {
28
- warning(
26
+ console.error(
27
'`value` prop on `%s` should not be null. ' +
28
'Consider using an empty string to clear the component or `undefined` ' +
29
'for uncontrolled components.',
packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+15
-16
@@ -9,7 +9,6 @@ import {
9
registrationNameModules,
10
possibleRegistrationNames,
11
} from 'legacy-events/EventPluginRegistry';
12
-import warning from 'shared/warning';
12
13
import {
14
ATTRIBUTE_NAME_CHAR,
@@ -38,7 +37,7 @@ if (__DEV__) {
37
38
const lowerCasedName = name.toLowerCase();
39
if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
41
- warning(
40
+ console.error(
41
'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' +
42
'All React events are normalized to bubble, so onFocusIn and onFocusOut ' +
43
'are not needed/supported by React.',
@@ -58,7 +57,7 @@ if (__DEV__) {
57
? possibleRegistrationNames[lowerCasedName]
58
: null;
59
if (registrationName != null) {
61
- warning(
60
+ console.error(
61
'Invalid event handler property `%s`. Did you mean `%s`?',
62
name,
63
registrationName,
@@ -67,7 +66,7 @@ if (__DEV__) {
66
return true;
67
}
68
if (EVENT_NAME_REGEX.test(name)) {
70
- warning(
69
+ console.error(
70
'Unknown event handler property `%s`. It will be ignored.',
71
name,
72
);
@@ -79,7 +78,7 @@ if (__DEV__) {
78
// So we can't tell if the event name is correct for sure, but we can filter
79
// out known bad ones like `onclick`. We can't suggest a specific replacement though.
80
if (INVALID_EVENT_NAME_REGEX.test(name)) {
82
- warning(
81
+ console.error(
82
'Invalid event handler property `%s`. ' +
83
'React events use the camelCase naming convention, for example `onClick`.',
84
name,
@@ -95,7 +94,7 @@ if (__DEV__) {
94
}
95
96
if (lowerCasedName === 'innerhtml') {
98
- warning(
97
+ console.error(
98
'Directly setting property `innerHTML` is not permitted. ' +
99
'For more information, lookup documentation on `dangerouslySetInnerHTML`.',
100
);
@@ -104,7 +103,7 @@ if (__DEV__) {
103
}
104
105
if (lowerCasedName === 'aria') {
107
- warning(
106
+ console.error(
107
'The `aria` attribute is reserved for future use in React. ' +
108
'Pass individual `aria-` attributes instead.',
109
);
@@ -118,7 +117,7 @@ if (__DEV__) {
117
value !== undefined &&
118
typeof value !== 'string'
119
) {
121
- warning(
120
+ console.error(
121
'Received a `%s` for a string attribute `is`. If this is expected, cast ' +
122
'the value to a string.',
123
typeof value,
@@ -128,7 +127,7 @@ if (__DEV__) {
127
}
128
129
if (typeof value === 'number' && isNaN(value)) {
131
- warning(
130
+ console.error(
131
'Received NaN for the `%s` attribute. If this is expected, cast ' +
132
'the value to a string.',
133
name,
@@ -144,7 +143,7 @@ if (__DEV__) {
143
if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
144
const standardName = possibleStandardNames[lowerCasedName];
145
if (standardName !== name) {
147
- warning(
146
+ console.error(
147
'Invalid DOM property `%s`. Did you mean `%s`?',
148
name,
149
standardName,
@@ -155,7 +154,7 @@ if (__DEV__) {
154
} else if (!isReserved && name !== lowerCasedName) {
155
// Unknown attributes should have lowercase casing since that's how they
156
// will be cased anyway with server rendering.
158
- warning(
157
+ console.error(
158
'React does not recognize the `%s` prop on a DOM element. If you ' +
159
'intentionally want it to appear in the DOM as a custom ' +
160
'attribute, spell it as lowercase `%s` instead. ' +
@@ -173,7 +172,7 @@ if (__DEV__) {
172
shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)
173
) {
174
if (value) {
176
- warning(
175
+ console.error(
176
'Received `%s` for a non-boolean attribute `%s`.\n\n' +
177
'If you want to write it to the DOM, pass a string instead: ' +
178
'%s="%s" or %s={value.toString()}.',
@@ -184,7 +183,7 @@ if (__DEV__) {
183
name,
184
);
185
} else {
187
- warning(
186
+ console.error(
187
'Received `%s` for a non-boolean attribute `%s`.\n\n' +
188
'If you want to write it to the DOM, pass a string instead: ' +
189
'%s="%s" or %s={value.toString()}.\n\n' +
@@ -221,7 +220,7 @@ if (__DEV__) {
220
propertyInfo !== null &&
221
propertyInfo.type === BOOLEAN
222
) {
224
- warning(
223
+ console.error(
224
'Received the string `%s` for the boolean attribute `%s`. ' +
225
'%s ' +
226
'Did you mean %s={%s}?',
@@ -260,7 +259,7 @@ const warnUnknownProperties = function(type, props, canUseEventSystem) {
259
.map(prop => '`' + prop + '`')
260
.join(', ');
261
if (unknownProps.length === 1) {
263
- warning(
262
+ console.error(
263
'Invalid value for prop %s on <%s> tag. Either remove it from the element, ' +
264
'or pass a string or number value to keep it in the DOM. ' +
265
'For details, see https://fb.me/react-attribute-behavior',
@@ -268,7 +267,7 @@ const warnUnknownProperties = function(type, props, canUseEventSystem) {
267
type,
268
);
269
} else if (unknownProps.length > 1) {
271
- warning(
270
+ console.error(
271
'Invalid values for props %s on <%s> tag. Either remove them from the element, ' +
272
'or pass a string or number value to keep them in the DOM. ' +
273
'For details, see https://fb.me/react-attribute-behavior',
packages/react-dom/src/shared/assertValidProps.js
+1
-2
@@ -6,7 +6,6 @@
6
*/
7
8
import invariant from 'shared/invariant';
9
-import warning from 'shared/warning';
9
// TODO: We can remove this if we add invariantWithStack()
10
// or add stack by default to invariants where possible.
11
import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -53,7 +52,7 @@ function assertValidProps(tag: string, props: ?Object) {
52
props.contentEditable &&
53
props.children != null
54
) {
56
- warning(
55
+ console.error(
56
'A component is `contentEditable` and contains `children` managed by ' +
57
'React. It is now your responsibility to guarantee that none of ' +
58
'those nodes are unexpectedly modified or duplicated. This is ' +
packages/react-dom/src/shared/sanitizeURL.js
+1
-2
@@ -8,7 +8,6 @@
8
*/
9
10
import invariant from 'shared/invariant';
11
-import warning from 'shared/warning';
11
import ReactSharedInternals from 'shared/ReactSharedInternals';
12
import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
13
@@ -41,7 +40,7 @@ function sanitizeURL(url: string) {
40
} else if (__DEV__) {
41
if (!didWarn && isJavaScriptProtocol.test(url)) {
42
didWarn = true;
44
- warning(
43
+ console.error(
44
'A future version of React will block javascript: URLs as a security precaution. ' +
45
'Use event handlers instead if you can. If you need to generate unsafe HTML try ' +
46
'using dangerouslySetInnerHTML instead. React was passed %s.',
packages/react-dom/src/shared/warnValidStyle.js
+8
-7
@@ -5,8 +5,6 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import warning from 'shared/warning';
9
-
8
let warnValidStyle = () => {};
9
10
if (__DEV__) {
@@ -35,7 +33,7 @@ if (__DEV__) {
33
}
34
35
warnedStyleNames[name] = true;
38
- warning(
36
+ console.error(
37
'Unsupported style property %s. Did you mean %s?',
38
name,
39
// As Andi Smith suggests
@@ -51,7 +49,7 @@ if (__DEV__) {
49
}
50
51
warnedStyleNames[name] = true;
54
- warning(
52
+ console.error(
53
'Unsupported vendor-prefixed style property %s. Did you mean %s?',
54
name,
55
name.charAt(0).toUpperCase() + name.slice(1),
@@ -64,7 +62,7 @@ if (__DEV__) {
62
}
63
64
warnedStyleValues[value] = true;
67
- warning(
65
+ console.error(
66
"Style property values shouldn't contain a semicolon. " +
67
'Try "%s: %s" instead.',
68
name,
@@ -78,7 +76,10 @@ if (__DEV__) {
76
}
77
78
warnedForNaNValue = true;
81
- warning('`NaN` is an invalid value for the `%s` css style property.', name);
79
+ console.error(
80
+ '`NaN` is an invalid value for the `%s` css style property.',
81
+ name,
82
+ );
83
};
84
85
const warnStyleValueIsInfinity = function(name, value) {
@@ -87,7 +88,7 @@ if (__DEV__) {
88
}
89
90
warnedForInfinityValue = true;
90
- warning(
91
+ console.error(
92
'`Infinity` is an invalid value for the `%s` css style property.',
93
name,
94
);
packages/react-dom/src/test-utils/ReactTestUtils.js
+1
-2
@@ -17,7 +17,6 @@ import {
17
} from 'shared/ReactWorkTags';
18
import SyntheticEvent from 'legacy-events/SyntheticEvent';
19
import invariant from 'shared/invariant';
20
-import lowPriorityWarning from 'shared/lowPriorityWarning';
20
import {ELEMENT_NODE} from '../shared/HTMLNodeType';
21
import * as DOMTopLevelEventTypes from '../events/DOMTopLevelEventTypes';
22
import {PLUGIN_EVENT_SYSTEM} from 'legacy-events/EventSystemFlags';
@@ -362,7 +361,7 @@ const ReactTestUtils = {
361
if (__DEV__) {
362
if (!hasWarnedAboutDeprecatedMockComponent) {
363
hasWarnedAboutDeprecatedMockComponent = true;
365
- lowPriorityWarning(
364
+ console.warn(
365
'ReactTestUtils.mockComponent() is deprecated. ' +
366
'Use shallow rendering or jest.mock() instead.\n\n' +
367
'See https://fb.me/test-utils-mock-component for more information.',
packages/react-dom/src/test-utils/ReactTestUtilsAct.js
+5
-5
@@ -9,7 +9,6 @@
9
10
import type {Thenable} from 'react-reconciler/src/ReactFiberWorkLoop';
11
12
-import warning from 'shared/warning';
12
import ReactDOM from 'react-dom';
13
import ReactSharedInternals from 'shared/ReactSharedInternals';
14
import enqueueTask from 'shared/enqueueTask';
@@ -80,6 +79,7 @@ function act(callback: () => Thenable) {
79
if (!__DEV__) {
80
if (didWarnAboutUsingActInProd === false) {
81
didWarnAboutUsingActInProd = true;
82
+ // eslint-disable-next-line react-internal/no-production-logging
83
console.error(
84
'act(...) is not supported in production builds of React, and might not behave as expected.',
85
);
@@ -102,7 +102,7 @@ function act(callback: () => Thenable) {
102
if (__DEV__) {
103
if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
104
// if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
105
- warning(
105
+ console.error(
106
'You seem to have overlapping act() calls, this is not supported. ' +
107
'Be sure to await previous act() calls before making a new one. ',
108
);
@@ -134,7 +134,7 @@ function act(callback: () => Thenable) {
134
.then(() => {})
135
.then(() => {
136
if (called === false) {
137
- warning(
137
+ console.error(
138
'You called act(async () => ...) without await. ' +
139
'This could lead to unexpected testing behaviour, interleaving multiple act ' +
140
'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -182,7 +182,7 @@ function act(callback: () => Thenable) {
182
} else {
183
if (__DEV__) {
184
if (result !== undefined) {
185
- warning(
185
+ console.error(
186
'The callback passed to act(...) function ' +
187
'must return undefined, or a Promise. You returned %s',
188
result,
@@ -210,7 +210,7 @@ function act(callback: () => Thenable) {
210
return {
211
then(resolve: () => void) {
212
if (__DEV__) {
213
- warning(
213
+ console.error(
214
'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
215
);
216
}
packages/react-interactions/events/src/dom/Press.js
+2
-3
@@ -12,7 +12,6 @@ import type {PointerType} from 'shared/ReactDOMTypes';
12
import React from 'react';
13
import {useTap} from 'react-interactions/events/tap';
14
import {useKeyboard} from 'react-interactions/events/keyboard';
15
-import warning from 'shared/warning';
15
16
const emptyObject = {};
17
@@ -73,7 +72,7 @@ function createGestureState(e: any, type: PressEventType): PressEvent {
72
preventDefault() {
73
// NO-OP, we should remove this in the future
74
if (__DEV__) {
76
- warning(
75
+ console.error(
76
'preventDefault is not available on event objects created from event responder modules (React Flare). ' +
77
'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.preventDefault() }`',
78
);
@@ -82,7 +81,7 @@ function createGestureState(e: any, type: PressEventType): PressEvent {
81
stopPropagation() {
82
// NO-OP, we should remove this in the future
83
if (__DEV__) {
85
- warning(
84
+ console.error(
85
'stopPropagation is not available on event objects created from event responder modules (React Flare). ' +
86
'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
87
);
packages/react-interactions/events/src/dom/PressLegacy.js
+1
-2
@@ -19,7 +19,6 @@ import type {
19
20
import React from 'react';
21
import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
22
-import warning from 'shared/warning';
22
23
type PressProps = {|
24
disabled: boolean,
@@ -206,7 +205,7 @@ function createPressEvent(
205
stopPropagation() {
206
// NO-OP, we should remove this in the future
207
if (__DEV__) {
209
- warning(
208
+ console.error(
209
'stopPropagation is not available on event objects created from event responder modules (React Flare). ' +
210
'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.stopPropagation() }`',
211
);
packages/react-interactions/events/src/dom/testing-library/domEnvironment.js
+3
-1
@@ -22,7 +22,9 @@ export function hasPointerEvent() {
22
export function setPointerEvent(bool) {
23
const pointerCaptureFn = name => id => {
24
if (typeof id !== 'number') {
25
- console.error(`A pointerId must be passed to "${name}"`);
25
+ if (__DEV__) {
26
+ console.error('A pointerId must be passed to "%s"', name);
27
+ }
28
}
29
};
30
global.PointerEvent = bool ? emptyFunction : undefined;
packages/react-is/src/ReactIs.js
+2
-2
@@ -25,7 +25,6 @@ import {
25
REACT_SUSPENSE_TYPE,
26
} from 'shared/ReactSymbols';
27
import isValidElementType from 'shared/isValidElementType';
28
-import lowPriorityWarningWithoutStack from 'shared/lowPriorityWarningWithoutStack';
28
29
export function typeOf(object: any) {
30
if (typeof object === 'object' && object !== null) {
@@ -88,7 +87,8 @@ export function isAsyncMode(object: any) {
87
if (__DEV__) {
88
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
89
hasWarnedAboutDeprecatedIsAsyncMode = true;
91
- lowPriorityWarningWithoutStack(
90
+ // Using console['warn'] to evade Babel and ESLint
91
+ console['warn'](
92
'The ReactIs.isAsyncMode() alias has been deprecated, ' +
93
'and will be removed in React 17+. Update your code to use ' +
94
'ReactIs.isConcurrentMode() instead. It has the exact same API.',
packages/react-native-renderer/src/NativeMethodsMixin.js
+3
-5
@@ -29,8 +29,6 @@ import {
29
warnForStyleProps,
30
} from './NativeMethodsMixinUtils';
31
32
-import warning from 'shared/warning';
33
-
32
export default function(
33
findNodeHandle: any => ?number,
34
findHostInstance: any => any,
@@ -180,7 +178,7 @@ export default function(
178
179
if (maybeInstance.canonical) {
180
if (__DEV__) {
183
- warning(
181
+ console.error(
182
'Warning: measureLayout on components using NativeMethodsMixin ' +
183
'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
184
'measureLayout must be called on a native ref. Consider using forwardRef.',
@@ -199,7 +197,7 @@ export default function(
197
198
if (relativeNode == null) {
199
if (__DEV__) {
202
- warning(
200
+ console.error(
201
'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
202
);
203
}
@@ -246,7 +244,7 @@ export default function(
244
245
if (maybeInstance.canonical) {
246
if (__DEV__) {
249
- warning(
247
+ console.error(
248
'Warning: setNativeProps is not currently supported in Fabric',
249
);
250
}
packages/react-native-renderer/src/NativeMethodsMixinUtils.js
+13
-11
@@ -66,17 +66,19 @@ export function throwOnStylesProp(component: any, props: any) {
66
}
67
68
export function warnForStyleProps(props: any, validAttributes: any) {
69
- for (const key in validAttributes.style) {
70
- if (!(validAttributes[key] || props[key] === undefined)) {
71
- console.error(
72
- 'You are setting the style `{ ' +
73
- key +
74
- ': ... }` as a prop. You ' +
75
- 'should nest it in a style object. ' +
76
- 'E.g. `{ style: { ' +
77
- key +
78
- ': ... } }`',
79
- );
69
+ if (__DEV__) {
70
+ for (const key in validAttributes.style) {
71
+ if (!(validAttributes[key] || props[key] === undefined)) {
72
+ console.error(
73
+ 'You are setting the style `{ %s' +
74
+ ': ... }` as a prop. You ' +
75
+ 'should nest it in a style object. ' +
76
+ 'E.g. `{ style: { %s' +
77
+ ': ... } }`',
78
+ key,
79
+ key,
80
+ );
81
+ }
82
}
83
}
84
}
packages/react-native-renderer/src/ReactFabric.js
+3
-4
@@ -37,7 +37,6 @@ import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
37
import {LegacyRoot} from 'shared/ReactRootTags';
38
import ReactSharedInternals from 'shared/ReactSharedInternals';
39
import getComponentName from 'shared/getComponentName';
40
-import warning from 'shared/warning';
40
41
const {dispatchCommand: fabricDispatchCommand} = nativeFabricUIManager;
42
@@ -50,7 +49,7 @@ function findHostInstance_DEPRECATED(
49
const owner = ReactCurrentOwner.current;
50
if (owner !== null && owner.stateNode !== null) {
51
if (!owner.stateNode._warnedAboutRefsInRender) {
53
- warning(
52
+ console.error(
53
'%s is accessing findNodeHandle inside its render(). ' +
54
'render() should be a pure function of props and state. It should ' +
55
'never access something that requires stale data from the previous ' +
@@ -97,7 +96,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
96
const owner = ReactCurrentOwner.current;
97
if (owner !== null && owner.stateNode !== null) {
98
if (!owner.stateNode._warnedAboutRefsInRender) {
100
- warning(
99
+ console.error(
100
'%s is accessing findNodeHandle inside its render(). ' +
101
'render() should be a pure function of props and state. It should ' +
102
'never access something that requires stale data from the previous ' +
@@ -169,7 +168,7 @@ const ReactFabric: ReactFabricType = {
168
if (invalid) {
169
if (__DEV__) {
170
if (invalid) {
172
- warning(
171
+ console.error(
172
"dispatchCommand was called with a ref that isn't a " +
173
'native component. Use React.forwardRef to get access to the underlying native component',
174
);
packages/react-native-renderer/src/ReactFabricEventResponderSystem.js
+1
-2
@@ -31,7 +31,6 @@ import {
31
UserBlockingEvent,
32
DiscreteEvent,
33
} from './ReactNativeTypes';
34
-import warning from 'shared/warning';
34
import invariant from 'shared/invariant';
35
36
// Intentionally not named imports because Rollup would use dynamic dispatch for
@@ -179,7 +178,7 @@ function validateEventValue(eventValue: any): void {
178
}
179
const showWarning = name => {
180
if (__DEV__) {
182
- warning(
181
+ console.error(
182
'%s is not available on event objects created from event responder modules (React Flare). ' +
183
'Try wrapping in a conditional, i.e. `if (event.type !== "press") { event.%s }`',
184
name,
packages/react-native-renderer/src/ReactFabricHostConfig.js
+4
-3
@@ -25,7 +25,6 @@ import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
25
import {create, diff} from './ReactNativeAttributePayload';
26
27
import invariant from 'shared/invariant';
28
-import warning from 'shared/warning';
28
29
import {dispatchEvent} from './ReactFabricEventEmitter';
30
import {
@@ -159,7 +158,7 @@ class ReactFabricHostComponent {
158
!(relativeToNativeNode instanceof ReactFabricHostComponent)
159
) {
160
if (__DEV__) {
162
- warning(
161
+ console.error(
162
'Warning: ref.measureLayout must be called with a ref to a native component.',
163
);
164
}
@@ -177,7 +176,9 @@ class ReactFabricHostComponent {
176
177
setNativeProps(nativeProps: Object) {
178
if (__DEV__) {
180
- warning('Warning: setNativeProps is not currently supported in Fabric');
179
+ console.error(
180
+ 'Warning: setNativeProps is not currently supported in Fabric',
181
+ );
182
}
183
184
return;
packages/react-native-renderer/src/ReactNativeComponent.js
+3
-5
@@ -26,8 +26,6 @@ import {
26
import {create} from './ReactNativeAttributePayload';
27
import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
28
29
-import warning from 'shared/warning';
30
-
29
export default function(
30
findNodeHandle: any => ?number,
31
findHostInstance: any => any,
@@ -191,7 +189,7 @@ export default function(
189
190
if (maybeInstance.canonical) {
191
if (__DEV__) {
194
- warning(
192
+ console.error(
193
'Warning: measureLayout on components using NativeMethodsMixin ' +
194
'or ReactNative.NativeComponent is not currently supported in Fabric. ' +
195
'measureLayout must be called on a native ref. Consider using forwardRef.',
@@ -210,7 +208,7 @@ export default function(
208
209
if (relativeNode == null) {
210
if (__DEV__) {
213
- warning(
211
+ console.error(
212
'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
213
);
214
}
@@ -257,7 +255,7 @@ export default function(
255
256
if (maybeInstance.canonical) {
257
if (__DEV__) {
260
- warning(
258
+ console.error(
259
'Warning: setNativeProps is not currently supported in Fabric',
260
);
261
}
packages/react-native-renderer/src/ReactNativeEventEmitter.js
+3
-2
@@ -14,7 +14,6 @@ import {
14
} from 'legacy-events/EventPluginHub';
15
import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
16
import {batchedUpdates} from 'legacy-events/ReactGenericBatching';
17
-import warning from 'shared/warning';
17
import {enableNativeTargetAsInstance} from 'shared/ReactFeatureFlags';
18
19
import {getInstanceFromNode} from './ReactNativeComponentTree';
@@ -184,7 +183,9 @@ export function receiveTouches(
183
if (target !== null && target !== undefined) {
184
if (target < 1) {
185
if (__DEV__) {
187
- warning('A view is reporting that a touch occurred on tag zero.');
186
+ console.error(
187
+ 'A view is reporting that a touch occurred on tag zero.',
188
+ );
189
}
190
} else {
191
rootNodeID = target;
packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+1
-3
@@ -28,8 +28,6 @@ import {
28
warnForStyleProps,
29
} from './NativeMethodsMixinUtils';
30
31
-import warning from 'shared/warning';
32
-
31
/**
32
* This component defines the same methods as NativeMethodsMixin but without the
33
* findNodeHandle wrapper. This wrapper is unnecessary for HostComponent views
@@ -86,7 +84,7 @@ class ReactNativeFiberHostComponent {
84
85
if (relativeNode == null) {
86
if (__DEV__) {
89
- warning(
87
+ console.error(
88
'Warning: ref.measureLayout must be called with a node handle or a ref to a native component.',
89
);
90
}
packages/react-native-renderer/src/ReactNativeRenderer.js
+3
-4
@@ -43,7 +43,6 @@ import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
43
import {LegacyRoot} from 'shared/ReactRootTags';
44
import ReactSharedInternals from 'shared/ReactSharedInternals';
45
import getComponentName from 'shared/getComponentName';
46
-import warning from 'shared/warning';
46
47
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
48
@@ -54,7 +53,7 @@ function findHostInstance_DEPRECATED(
53
const owner = ReactCurrentOwner.current;
54
if (owner !== null && owner.stateNode !== null) {
55
if (!owner.stateNode._warnedAboutRefsInRender) {
57
- warning(
56
+ console.error(
57
'%s is accessing findNodeHandle inside its render(). ' +
58
'render() should be a pure function of props and state. It should ' +
59
'never access something that requires stale data from the previous ' +
@@ -101,7 +100,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
100
const owner = ReactCurrentOwner.current;
101
if (owner !== null && owner.stateNode !== null) {
102
if (!owner.stateNode._warnedAboutRefsInRender) {
104
- warning(
103
+ console.error(
104
'%s is accessing findNodeHandle inside its render(). ' +
105
'render() should be a pure function of props and state. It should ' +
106
'never access something that requires stale data from the previous ' +
@@ -176,7 +175,7 @@ const ReactNativeRenderer: ReactNativeType = {
175
if (handle._nativeTag == null) {
176
if (__DEV__) {
177
if (handle._nativeTag == null) {
179
- warning(
178
+ console.error(
179
"dispatchCommand was called with a ref that isn't a " +
180
'native component. Use React.forwardRef to get access to the underlying native component',
181
);
packages/react-noop-renderer/src/createReactNoop.js
+7
-5
@@ -25,7 +25,6 @@ import {createPortal} from 'shared/ReactPortal';
25
import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
26
import enqueueTask from 'shared/enqueueTask';
27
import ReactSharedInternals from 'shared/ReactSharedInternals';
28
-import warning from 'shared/warning';
28
import {ConcurrentRoot, BlockingRoot, LegacyRoot} from 'shared/ReactRootTags';
29
30
type Container = {
@@ -639,6 +638,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
638
if (!__DEV__) {
639
if (didWarnAboutUsingActInProd === false) {
640
didWarnAboutUsingActInProd = true;
641
+ // eslint-disable-next-line react-internal/no-production-logging
642
console.error(
643
'act(...) is not supported in production builds of React, and might not behave as expected.',
644
);
@@ -661,7 +661,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
661
if (__DEV__) {
662
if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
663
// if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
664
- warning(
664
+ console.error(
665
'You seem to have overlapping act() calls, this is not supported. ' +
666
'Be sure to await previous act() calls before making a new one. ',
667
);
@@ -693,7 +693,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
693
.then(() => {})
694
.then(() => {
695
if (called === false) {
696
- warning(
696
+ console.error(
697
'You called act(async () => ...) without await. ' +
698
'This could lead to unexpected testing behaviour, interleaving multiple act ' +
699
'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -741,7 +741,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
741
} else {
742
if (__DEV__) {
743
if (result !== undefined) {
744
- warning(
744
+ console.error(
745
'The callback passed to act(...) function ' +
746
'must return undefined, or a Promise. You returned %s',
747
result,
@@ -770,7 +770,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
770
return {
771
then(resolve: () => void) {
772
if (__DEV__) {
773
- warning(
773
+ console.error(
774
'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
775
);
776
}
@@ -1107,6 +1107,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
1107
const root = roots.get(rootID);
1108
const rootContainer = rootContainers.get(rootID);
1109
if (!root || !rootContainer) {
1110
+ // eslint-disable-next-line react-internal/no-production-logging
1111
console.log('Nothing rendered yet.');
1112
return;
1113
}
@@ -1209,6 +1210,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
1210
log('FIBERS:');
1211
logFiber(root.current, 0);
1212
1213
+ // eslint-disable-next-line react-internal/no-production-logging
1214
console.log(...bufferedLog);
1215
},
1216
packages/react-reconciler/src/ReactChildFiber.js
+7
-8
@@ -28,7 +28,6 @@ import {
28
Fragment,
29
} from 'shared/ReactWorkTags';
30
import invariant from 'shared/invariant';
31
-import warning from 'shared/warning';
31
import {warnAboutStringRefs} from 'shared/ReactFeatureFlags';
32
33
import {
@@ -91,7 +90,7 @@ if (__DEV__) {
90
}
91
ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
92
94
- warning(
93
+ console.error(
94
'Each child in a list should have a unique ' +
95
'"key" prop. See https://fb.me/react-warning-keys for ' +
96
'more information.',
@@ -119,7 +118,7 @@ function coerceRef(
118
const componentName = getComponentName(returnFiber.type) || 'Component';
119
if (!didWarnAboutStringRefs[componentName]) {
120
if (warnAboutStringRefs) {
122
- warning(
121
+ console.error(
122
'Component "%s" contains the string ref "%s". Support for string refs ' +
123
'will be removed in a future major release. We recommend using ' +
124
'useRef() or createRef() instead. ' +
@@ -130,7 +129,7 @@ function coerceRef(
129
getStackByFiberInDevAndProd(returnFiber),
130
);
131
} else {
133
- warning(
132
+ console.error(
133
'A string ref, "%s", has been found within a strict mode tree. ' +
134
'String refs are a source of potential bugs and should be avoided. ' +
135
'We recommend using useRef() or createRef() instead. ' +
@@ -240,7 +239,7 @@ function warnOnFunctionType() {
239
}
240
ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
241
243
- warning(
242
+ console.error(
243
'Functions are not valid as a React child. This may happen if ' +
244
'you return a Component instead of <Component /> from render. ' +
245
'Or maybe you meant to call this function rather than return it.',
@@ -733,7 +732,7 @@ function ChildReconciler(shouldTrackSideEffects) {
732
knownKeys.add(key);
733
break;
734
}
736
- warning(
735
+ console.error(
736
'Encountered two children with the same key, `%s`. ' +
737
'Keys should be unique so that components maintain their identity ' +
738
'across updates. Non-unique keys may cause children to be ' +
@@ -933,7 +932,7 @@ function ChildReconciler(shouldTrackSideEffects) {
932
newChildrenIterable[Symbol.toStringTag] === 'Generator'
933
) {
934
if (!didWarnAboutGenerators) {
936
- warning(
935
+ console.error(
936
'Using Generators as children is unsupported and will likely yield ' +
937
'unexpected results because enumerating a generator mutates it. ' +
938
'You may convert it to an array with `Array.from()` or the ' +
@@ -947,7 +946,7 @@ function ChildReconciler(shouldTrackSideEffects) {
946
// Warn about using Maps as children
947
if ((newChildrenIterable: any).entries === iteratorFn) {
948
if (!didWarnAboutMaps) {
950
- warning(
949
+ console.error(
950
'Using Maps as children is unsupported and will likely yield ' +
951
'unexpected results. Convert it to a sequence/iterable of keyed ' +
952
'ReactElements instead.',
packages/react-reconciler/src/ReactFiber.js
+1
-2
@@ -28,7 +28,6 @@ import type {HookType} from './ReactFiberHooks';
28
import type {SuspenseInstance} from './ReactFiberHostConfig';
29
30
import invariant from 'shared/invariant';
31
-import warning from 'shared/warning';
31
import {
32
enableProfilerTimer,
33
enableFundamentalAPI,
@@ -805,7 +804,7 @@ function createFiberFromProfiler(
804
typeof pendingProps.id !== 'string' ||
805
typeof pendingProps.onRender !== 'function'
806
) {
808
- warning(
807
+ console.error(
808
'Profiler must specify an "id" string and "onRender" function as props',
809
);
810
}
packages/react-reconciler/src/ReactFiberBeginWork.js
+21
-22
@@ -71,7 +71,6 @@ import getComponentName from 'shared/getComponentName';
71
import ReactStrictModeWarnings from './ReactStrictModeWarnings';
72
import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
73
import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
74
-import warning from 'shared/warning';
74
import {
75
setCurrentPhase,
76
getCurrentFiberOwnerNameInDevOrNull,
@@ -782,7 +781,7 @@ function updateClassComponent(
781
let inst = workInProgress.stateNode;
782
if (inst.props !== nextProps) {
783
if (!didWarnAboutReassigningProps) {
785
- warning(
784
+ console.error(
785
'It looks like %s is reassigning its own `this.props` while rendering. ' +
786
'This is not supported and can lead to confusing bugs.',
787
getComponentName(workInProgress.type) || 'a component',
@@ -1256,7 +1255,7 @@ function mountIndeterminateComponent(
1255
const componentName = getComponentName(Component) || 'Unknown';
1256
1257
if (!didWarnAboutBadClass[componentName]) {
1259
- warning(
1258
+ console.error(
1259
"The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
1260
'This is likely to cause errors. Change %s to extend React.Component instead.',
1261
componentName,
@@ -1301,7 +1300,7 @@ function mountIndeterminateComponent(
1300
if (__DEV__) {
1301
const componentName = getComponentName(Component) || 'Unknown';
1302
if (!didWarnAboutModulePatternComponent[componentName]) {
1304
- warning(
1303
+ console.error(
1304
'The <%s /> component appears to be a function component that returns a class instance. ' +
1305
'Change %s to a class that extends React.Component instead. ' +
1306
"If you can't use a class try assigning the prototype on the function as a workaround. " +
@@ -1363,7 +1362,7 @@ function mountIndeterminateComponent(
1362
workInProgress.tag = FunctionComponent;
1363
if (__DEV__) {
1364
if (disableLegacyContext && Component.contextTypes) {
1366
- warning(
1365
+ console.error(
1366
'%s uses the legacy contextTypes API which is no longer supported. ' +
1367
'Use React.createContext() with React.useContext() instead.',
1368
getComponentName(Component) || 'Unknown',
@@ -1399,7 +1398,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1398
if (__DEV__) {
1399
if (Component) {
1400
if (Component.childContextTypes) {
1402
- warning(
1401
+ console.error(
1402
'%s(...): childContextTypes cannot be defined on a function component.',
1403
Component.displayName || Component.name || 'Component',
1404
);
@@ -1419,7 +1418,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1418
}
1419
if (!didWarnAboutFunctionRefs[warningKey]) {
1420
didWarnAboutFunctionRefs[warningKey] = true;
1422
- warning(
1421
+ console.error(
1422
'Function components cannot be given refs. ' +
1423
'Attempts to access this ref will fail. ' +
1424
'Did you mean to use React.forwardRef()?%s',
@@ -1435,7 +1434,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1434
const componentName = getComponentName(Component) || 'Unknown';
1435
1436
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
1438
- warning(
1437
+ console.error(
1438
'%s: Support for defaultProps will be removed from function components ' +
1439
'in a future major release. Use JavaScript default parameters instead.',
1440
componentName,
@@ -1448,7 +1447,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1447
const componentName = getComponentName(Component) || 'Unknown';
1448
1449
if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
1451
- warning(
1450
+ console.error(
1451
'%s: Function components do not support getDerivedStateFromProps.',
1452
componentName,
1453
);
@@ -1463,7 +1462,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1462
const componentName = getComponentName(Component) || 'Unknown';
1463
1464
if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
1466
- warning(
1465
+ console.error(
1466
'%s: Function components do not support contextType.',
1467
componentName,
1468
);
@@ -1553,7 +1552,7 @@ function updateSuspenseComponent(
1552
if ('maxDuration' in nextProps) {
1553
if (!didWarnAboutMaxDuration) {
1554
didWarnAboutMaxDuration = true;
1556
- warning(
1555
+ console.error(
1556
'maxDuration has been removed from React. ' +
1557
'Remove the maxDuration prop.',
1558
);
@@ -1960,7 +1959,7 @@ function mountDehydratedSuspenseComponent(
1959
// Instead, we'll leave the content in place and try to hydrate it later.
1960
if ((workInProgress.mode & BlockingMode) === NoMode) {
1961
if (__DEV__) {
1963
- warning(
1962
+ console.error(
1963
'Cannot hydrate Suspense in legacy mode. Switch from ' +
1964
'ReactDOM.hydrate(element, container) to ' +
1965
'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
@@ -2205,7 +2204,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
2204
case 'together':
2205
case 'forwards':
2206
case 'backwards': {
2208
- warning(
2207
+ console.error(
2208
'"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
2209
'Use lowercase "%s" instead.',
2210
revealOrder,
@@ -2215,7 +2214,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
2214
}
2215
case 'forward':
2216
case 'backward': {
2218
- warning(
2217
+ console.error(
2218
'"%s" is not a valid value for revealOrder on <SuspenseList />. ' +
2219
'React uses the -s suffix in the spelling. Use "%ss" instead.',
2220
revealOrder,
@@ -2224,7 +2223,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
2223
break;
2224
}
2225
default:
2227
- warning(
2226
+ console.error(
2227
'"%s" is not a supported revealOrder on <SuspenseList />. ' +
2228
'Did you mean "together", "forwards" or "backwards"?',
2229
revealOrder,
@@ -2232,7 +2231,7 @@ function validateRevealOrder(revealOrder: SuspenseListRevealOrder) {
2231
break;
2232
}
2233
} else {
2235
- warning(
2234
+ console.error(
2235
'%s is not a supported value for revealOrder on <SuspenseList />. ' +
2236
'Did you mean "together", "forwards" or "backwards"?',
2237
revealOrder,
@@ -2250,14 +2249,14 @@ function validateTailOptions(
2249
if (tailMode !== undefined && !didWarnAboutTailOptions[tailMode]) {
2250
if (tailMode !== 'collapsed' && tailMode !== 'hidden') {
2251
didWarnAboutTailOptions[tailMode] = true;
2253
- warning(
2252
+ console.error(
2253
'"%s" is not a supported value for tail on <SuspenseList />. ' +
2254
'Did you mean "collapsed" or "hidden"?',
2255
tailMode,
2256
);
2257
} else if (revealOrder !== 'forwards' && revealOrder !== 'backwards') {
2258
didWarnAboutTailOptions[tailMode] = true;
2260
- warning(
2259
+ console.error(
2260
'<SuspenseList tail="%s" /> is only valid if revealOrder is ' +
2261
'"forwards" or "backwards". ' +
2262
'Did you mean to specify revealOrder="forwards"?',
@@ -2274,7 +2273,7 @@ function validateSuspenseListNestedChild(childSlot: mixed, index: number) {
2273
let isIterable = !isArray && typeof getIteratorFn(childSlot) === 'function';
2274
if (isArray || isIterable) {
2275
let type = isArray ? 'array' : 'iterable';
2277
- warning(
2276
+ console.error(
2277
'A nested %s was passed to row #%s in <SuspenseList />. Wrap it in ' +
2278
'an additional SuspenseList to configure its revealOrder: ' +
2279
'<SuspenseList revealOrder=...> ... ' +
@@ -2320,7 +2319,7 @@ function validateSuspenseListChildren(
2319
}
2320
}
2321
} else {
2323
- warning(
2322
+ console.error(
2323
'A single row was passed to a <SuspenseList revealOrder="%s" />. ' +
2324
'This is not useful since it needs multiple rows. ' +
2325
'Did you mean to pass multiple children or an array?',
@@ -2615,7 +2614,7 @@ function updateContextConsumer(
2614
if (context !== context.Consumer) {
2615
if (!hasWarnedAboutUsingContextAsConsumer) {
2616
hasWarnedAboutUsingContextAsConsumer = true;
2618
- warning(
2617
+ console.error(
2618
'Rendering <Context> directly is not supported and will be removed in ' +
2619
'a future major release. Did you mean to render <Context.Consumer> instead?',
2620
);
@@ -2630,7 +2629,7 @@ function updateContextConsumer(
2629
2630
if (__DEV__) {
2631
if (typeof render !== 'function') {
2633
- warning(
2632
+ console.error(
2633
'A context consumer was rendered with multiple children, or a child ' +
2634
"that isn't a function. A context consumer expects a single child " +
2635
'that is a function. If you did pass a function, make sure there ' +
packages/react-reconciler/src/ReactFiberClassComponent.js
+33
-34
@@ -24,7 +24,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
24
import shallowEqual from 'shared/shallowEqual';
25
import getComponentName from 'shared/getComponentName';
26
import invariant from 'shared/invariant';
27
-import warning from 'shared/warning';
27
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
28
29
import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
@@ -95,7 +94,7 @@ if (__DEV__) {
94
const key = `${callerName}_${(callback: any)}`;
95
if (!didWarnOnInvalidCallback.has(key)) {
96
didWarnOnInvalidCallback.add(key);
98
- warning(
97
+ console.error(
98
'%s(...): Expected the last optional `callback` argument to be a ' +
99
'function. Instead received: %s.',
100
callerName,
@@ -109,7 +108,7 @@ if (__DEV__) {
108
const componentName = getComponentName(type) || 'Component';
109
if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
110
didWarnAboutUndefinedDerivedState.add(componentName);
112
- warning(
111
+ console.error(
112
'%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
113
'You have returned undefined.',
114
componentName,
@@ -273,7 +272,7 @@ function checkShouldComponentUpdate(
272
273
if (__DEV__) {
274
if (shouldUpdate === undefined) {
276
- warning(
275
+ console.error(
276
'%s.shouldComponentUpdate(): Returned undefined instead of a ' +
277
'boolean value. Make sure to return true or false.',
278
getComponentName(ctor) || 'Component',
@@ -301,13 +300,13 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
300
301
if (!renderPresent) {
302
if (ctor.prototype && typeof ctor.prototype.render === 'function') {
304
- warning(
303
+ console.error(
304
'%s(...): No `render` method found on the returned component ' +
305
'instance: did you accidentally return an object from the constructor?',
306
name,
307
);
308
} else {
310
- warning(
309
+ console.error(
310
'%s(...): No `render` method found on the returned component ' +
311
'instance: you may have forgotten to define `render`.',
312
name,
@@ -320,7 +319,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
319
!instance.getInitialState.isReactClassApproved &&
320
!instance.state
321
) {
323
- warning(
322
+ console.error(
323
'getInitialState was defined on %s, a plain JavaScript class. ' +
324
'This is only supported for classes created using React.createClass. ' +
325
'Did you mean to define a state property instead?',
@@ -331,7 +330,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
330
instance.getDefaultProps &&
331
!instance.getDefaultProps.isReactClassApproved
332
) {
334
- warning(
333
+ console.error(
334
'getDefaultProps was defined on %s, a plain JavaScript class. ' +
335
'This is only supported for classes created using React.createClass. ' +
336
'Use a static property to define defaultProps instead.',
@@ -339,14 +338,14 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
338
);
339
}
340
if (instance.propTypes) {
342
- warning(
341
+ console.error(
342
'propTypes was defined as an instance property on %s. Use a static ' +
343
'property to define propTypes instead.',
344
name,
345
);
346
}
347
if (instance.contextType) {
349
- warning(
348
+ console.error(
349
'contextType was defined as an instance property on %s. Use a static ' +
350
'property to define contextType instead.',
351
name,
@@ -355,14 +354,14 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
354
355
if (disableLegacyContext) {
356
if (ctor.childContextTypes) {
358
- warning(
357
+ console.error(
358
'%s uses the legacy childContextTypes API which is no longer supported. ' +
359
'Use React.createContext() instead.',
360
name,
361
);
362
}
363
if (ctor.contextTypes) {
365
- warning(
364
+ console.error(
365
'%s uses the legacy contextTypes API which is no longer supported. ' +
366
'Use React.createContext() with static contextType instead.',
367
name,
@@ -370,7 +369,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
369
}
370
} else {
371
if (instance.contextTypes) {
373
- warning(
372
+ console.error(
373
'contextTypes was defined as an instance property on %s. Use a static ' +
374
'property to define contextTypes instead.',
375
name,
@@ -383,7 +382,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
382
!didWarnAboutContextTypeAndContextTypes.has(ctor)
383
) {
384
didWarnAboutContextTypeAndContextTypes.add(ctor);
386
- warning(
385
+ console.error(
386
'%s declares both contextTypes and contextType static properties. ' +
387
'The legacy contextTypes property will be ignored.',
388
name,
@@ -392,7 +391,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
391
}
392
393
if (typeof instance.componentShouldUpdate === 'function') {
395
- warning(
394
+ console.error(
395
'%s has a method called ' +
396
'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
397
'The name is phrased as a question because the function is ' +
@@ -405,7 +404,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
404
ctor.prototype.isPureReactComponent &&
405
typeof instance.shouldComponentUpdate !== 'undefined'
406
) {
408
- warning(
407
+ console.error(
408
'%s has a method called shouldComponentUpdate(). ' +
409
'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
410
'Please extend React.Component if shouldComponentUpdate is used.',
@@ -413,7 +412,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
412
);
413
}
414
if (typeof instance.componentDidUnmount === 'function') {
416
- warning(
415
+ console.error(
416
'%s has a method called ' +
417
'componentDidUnmount(). But there is no such lifecycle method. ' +
418
'Did you mean componentWillUnmount()?',
@@ -421,7 +420,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
420
);
421
}
422
if (typeof instance.componentDidReceiveProps === 'function') {
424
- warning(
423
+ console.error(
424
'%s has a method called ' +
425
'componentDidReceiveProps(). But there is no such lifecycle method. ' +
426
'If you meant to update the state in response to changing props, ' +
@@ -431,14 +430,14 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
430
);
431
}
432
if (typeof instance.componentWillRecieveProps === 'function') {
434
- warning(
433
+ console.error(
434
'%s has a method called ' +
435
'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
436
name,
437
);
438
}
439
if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
441
- warning(
440
+ console.error(
441
'%s has a method called ' +
442
'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?',
443
name,
@@ -446,7 +445,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
445
}
446
const hasMutatedProps = instance.props !== newProps;
447
if (instance.props !== undefined && hasMutatedProps) {
449
- warning(
448
+ console.error(
449
'%s(...): When calling super() in `%s`, make sure to pass ' +
450
"up the same props that your component's constructor was passed.",
451
name,
@@ -454,7 +453,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
453
);
454
}
455
if (instance.defaultProps) {
457
- warning(
456
+ console.error(
457
'Setting defaultProps as an instance property on %s is not supported and will be ignored.' +
458
' Instead, define defaultProps as a static property on %s.',
459
name,
@@ -468,7 +467,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
467
!didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)
468
) {
469
didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
471
- warning(
470
+ console.error(
471
'%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
472
'This component defines getSnapshotBeforeUpdate() only.',
473
getComponentName(ctor),
@@ -476,21 +475,21 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
475
}
476
477
if (typeof instance.getDerivedStateFromProps === 'function') {
479
- warning(
478
+ console.error(
479
'%s: getDerivedStateFromProps() is defined as an instance method ' +
480
'and will be ignored. Instead, declare it as a static method.',
481
name,
482
);
483
}
484
if (typeof instance.getDerivedStateFromError === 'function') {
486
- warning(
485
+ console.error(
486
'%s: getDerivedStateFromError() is defined as an instance method ' +
487
'and will be ignored. Instead, declare it as a static method.',
488
name,
489
);
490
}
491
if (typeof ctor.getSnapshotBeforeUpdate === 'function') {
493
- warning(
492
+ console.error(
493
'%s: getSnapshotBeforeUpdate() is defined as a static method ' +
494
'and will be ignored. Instead, declare it as an instance method.',
495
name,
@@ -498,13 +497,13 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
497
}
498
const state = instance.state;
499
if (state && (typeof state !== 'object' || isArray(state))) {
501
- warning('%s.state: must be set to an object or null', name);
500
+ console.error('%s.state: must be set to an object or null', name);
501
}
502
if (
503
typeof instance.getChildContext === 'function' &&
504
typeof ctor.childContextTypes !== 'object'
505
) {
507
- warning(
506
+ console.error(
507
'%s.getChildContext(): childContextTypes must be defined in order to ' +
508
'use getChildContext().',
509
name,
@@ -566,7 +565,7 @@ function constructClassInstance(
565
Object.keys(contextType).join(', ') +
566
'}.';
567
}
569
- warning(
568
+ console.error(
569
'%s defines an invalid contextType. ' +
570
'contextType should point to the Context object returned by React.createContext().%s',
571
getComponentName(ctor) || 'Component',
@@ -610,7 +609,7 @@ function constructClassInstance(
609
const componentName = getComponentName(ctor) || 'Component';
610
if (!didWarnAboutUninitializedState.has(componentName)) {
611
didWarnAboutUninitializedState.add(componentName);
613
- warning(
612
+ console.error(
613
'`%s` uses `getDerivedStateFromProps` but its initial state is ' +
614
'%s. This is not recommended. Instead, define the initial state by ' +
615
'assigning an object to `this.state` in the constructor of `%s`. ' +
@@ -670,7 +669,7 @@ function constructClassInstance(
669
: 'getSnapshotBeforeUpdate()';
670
if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(componentName)) {
671
didWarnAboutLegacyLifecyclesAndDerivedState.add(componentName);
673
- warning(
672
+ console.error(
673
'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
674
'%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' +
675
'The above lifecycles should be removed. Learn more about this warning here:\n' +
@@ -712,7 +711,7 @@ function callComponentWillMount(workInProgress, instance) {
711
712
if (oldState !== instance.state) {
713
if (__DEV__) {
715
- warning(
714
+ console.error(
715
'%s.componentWillMount(): Assigning directly to this.state is ' +
716
"deprecated (except inside a component's " +
717
'constructor). Use setState instead.',
@@ -745,7 +744,7 @@ function callComponentWillReceiveProps(
744
getComponentName(workInProgress.type) || 'Component';
745
if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
746
didWarnAboutStateAssignmentForComponent.add(componentName);
748
- warning(
747
+ console.error(
748
'%s.componentWillReceiveProps(): Assigning directly to ' +
749
"this.state is deprecated (except inside a component's " +
750
'constructor). Use setState instead.',
@@ -790,7 +789,7 @@ function mountClassInstance(
789
const componentName = getComponentName(ctor) || 'Component';
790
if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
791
didWarnAboutDirectlyAssigningPropsToState.add(componentName);
793
- warning(
792
+ console.error(
793
'%s: It is not recommended to assign props directly to state ' +
794
"because updates to props won't be reflected in state. " +
795
'In most cases, it is better to use props directly.',
packages/react-reconciler/src/ReactFiberCommitWork.js
+12
-13
@@ -67,7 +67,6 @@ import {
67
} from 'shared/ReactSideEffectTags';
68
import getComponentName from 'shared/getComponentName';
69
import invariant from 'shared/invariant';
70
-import warning from 'shared/warning';
70
71
import {onCommitUnmount} from './ReactFiberDevToolsHook';
72
import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
@@ -268,7 +267,7 @@ function commitBeforeMutationLifeCycles(
267
!didWarnAboutReassigningProps
268
) {
269
if (instance.props !== finishedWork.memoizedProps) {
271
- warning(
270
+ console.error(
271
'Expected %s props to match memoized props before ' +
272
'getSnapshotBeforeUpdate. ' +
273
'This might either be because of a bug in React, or because ' +
@@ -278,7 +277,7 @@ function commitBeforeMutationLifeCycles(
277
);
278
}
279
if (instance.state !== finishedWork.memoizedState) {
281
- warning(
280
+ console.error(
281
'Expected %s state to match memoized state before ' +
282
'getSnapshotBeforeUpdate. ' +
283
'This might either be because of a bug in React, or because ' +
@@ -301,7 +300,7 @@ function commitBeforeMutationLifeCycles(
300
>);
301
if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
302
didWarnSet.add(finishedWork.type);
304
- warning(
303
+ console.error(
304
'%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
305
'must be returned. You have returned undefined.',
306
getComponentName(finishedWork.type),
@@ -380,7 +379,7 @@ function commitHookEffectList(
379
} else {
380
addendum = ' You returned: ' + destroy;
381
}
383
- warning(
382
+ console.error(
383
'An effect function must not return anything besides a function, ' +
384
'which is used for clean-up.%s%s',
385
addendum,
@@ -437,7 +436,7 @@ function commitLifeCycles(
436
!didWarnAboutReassigningProps
437
) {
438
if (instance.props !== finishedWork.memoizedProps) {
440
- warning(
439
+ console.error(
440
'Expected %s props to match memoized props before ' +
441
'componentDidMount. ' +
442
'This might either be because of a bug in React, or because ' +
@@ -447,7 +446,7 @@ function commitLifeCycles(
446
);
447
}
448
if (instance.state !== finishedWork.memoizedState) {
450
- warning(
449
+ console.error(
450
'Expected %s state to match memoized state before ' +
451
'componentDidMount. ' +
452
'This might either be because of a bug in React, or because ' +
@@ -476,7 +475,7 @@ function commitLifeCycles(
475
!didWarnAboutReassigningProps
476
) {
477
if (instance.props !== finishedWork.memoizedProps) {
479
- warning(
478
+ console.error(
479
'Expected %s props to match memoized props before ' +
480
'componentDidUpdate. ' +
481
'This might either be because of a bug in React, or because ' +
@@ -486,7 +485,7 @@ function commitLifeCycles(
485
);
486
}
487
if (instance.state !== finishedWork.memoizedState) {
489
- warning(
488
+ console.error(
489
'Expected %s state to match memoized state before ' +
490
'componentDidUpdate. ' +
491
'This might either be because of a bug in React, or because ' +
@@ -513,7 +512,7 @@ function commitLifeCycles(
512
!didWarnAboutReassigningProps
513
) {
514
if (instance.props !== finishedWork.memoizedProps) {
516
- warning(
515
+ console.error(
516
'Expected %s props to match memoized props before ' +
517
'processing the update queue. ' +
518
'This might either be because of a bug in React, or because ' +
@@ -523,7 +522,7 @@ function commitLifeCycles(
522
);
523
}
524
if (instance.state !== finishedWork.memoizedState) {
526
- warning(
525
+ console.error(
526
'Expected %s state to match memoized state before ' +
527
'processing the update queue. ' +
528
'This might either be because of a bug in React, or because ' +
@@ -712,7 +711,7 @@ function commitAttachRef(finishedWork: Fiber) {
711
} else {
712
if (__DEV__) {
713
if (!ref.hasOwnProperty('current')) {
715
- warning(
714
+ console.error(
715
'Unexpected ref object provided for %s. ' +
716
'Use either a ref-setter function or React.createRef().%s',
717
getComponentName(finishedWork.type),
@@ -1464,7 +1463,7 @@ function commitSuspenseComponent(finishedWork: Fiber) {
1463
}
1464
} else if (__DEV__) {
1465
if (suspenseCallback !== undefined) {
1467
- warning('Unexpected type for suspenseCallback.');
1466
+ console.error('Unexpected type for suspenseCallback.');
1467
}
1468
}
1469
}
packages/react-reconciler/src/ReactFiberContext.js
+1
-2
@@ -15,7 +15,6 @@ import {disableLegacyContext} from 'shared/ReactFeatureFlags';
15
import {ClassComponent, HostRoot} from 'shared/ReactWorkTags';
16
import getComponentName from 'shared/getComponentName';
17
import invariant from 'shared/invariant';
18
-import warning from 'shared/warning';
18
import checkPropTypes from 'prop-types/checkPropTypes';
19
20
import {setCurrentPhase, getCurrentFiberStackInDev} from './ReactCurrentFiber';
@@ -198,7 +197,7 @@ function processChildContext(
197
198
if (!warnedAboutMissingGetChildContext[componentName]) {
199
warnedAboutMissingGetChildContext[componentName] = true;
201
- warning(
200
+ console.error(
201
'%s.childContextTypes is specified but there is no getChildContext() method ' +
202
'on the instance. You can either define getChildContext() on %s or remove ' +
203
'childContextTypes from it.',
packages/react-reconciler/src/ReactFiberDevToolsHook.js
+14
-6
@@ -17,7 +17,6 @@ import type {ExpirationTime} from './ReactFiberExpirationTime';
17
import type {ReactNodeList} from 'shared/ReactTypes';
18
19
import {DidCapture} from 'shared/ReactSideEffectTags';
20
-import warning from 'shared/warning';
20
21
declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
22
@@ -43,7 +42,7 @@ export function injectInternals(internals: Object): boolean {
42
}
43
if (!hook.supportsFiber) {
44
if (__DEV__) {
46
- warning(
45
+ console.error(
46
'The installed version of React DevTools is too old and will not work ' +
47
'with the current version of React. Please update React DevTools. ' +
48
'https://fb.me/react-devtools',
@@ -64,7 +63,10 @@ export function injectInternals(internals: Object): boolean {
63
} catch (err) {
64
if (__DEV__ && !hasLoggedError) {
65
hasLoggedError = true;
67
- warning('React instrumentation encountered an error: %s', err);
66
+ console.error(
67
+ 'React instrumentation encountered an error: %s',
68
+ err,
69
+ );
70
}
71
}
72
};
@@ -87,7 +89,10 @@ export function injectInternals(internals: Object): boolean {
89
if (__DEV__) {
90
if (!hasLoggedError) {
91
hasLoggedError = true;
90
- warning('React instrumentation encountered an error: %s', err);
92
+ console.error(
93
+ 'React instrumentation encountered an error: %s',
94
+ err,
95
+ );
96
}
97
}
98
}
@@ -99,7 +104,10 @@ export function injectInternals(internals: Object): boolean {
104
if (__DEV__) {
105
if (!hasLoggedError) {
106
hasLoggedError = true;
102
- warning('React instrumentation encountered an error: %s', err);
107
+ console.error(
108
+ 'React instrumentation encountered an error: %s',
109
+ err,
110
+ );
111
}
112
}
113
}
@@ -107,7 +115,7 @@ export function injectInternals(internals: Object): boolean {
115
} catch (err) {
116
// Catch all errors because it is unsafe to throw during initialization.
117
if (__DEV__) {
110
- warning('React instrumentation encountered an error: %s.', err);
118
+ console.error('React instrumentation encountered an error: %s.', err);
119
}
120
}
121
// DevTools exists
packages/react-reconciler/src/ReactFiberErrorLogger.js
+3
-3
@@ -44,7 +44,7 @@ export function logCapturedError(capturedError: CapturedError): void {
44
// been accidental, we'll surface it anyway.
45
// However, the browser would have silenced the original error
46
// so we'll print it first, and then print the stack addendum.
47
- console.error(error);
47
+ console['error'](error); // Don't transform to our wrapper
48
// For a more detailed description of this block, see:
49
// https://github.com/facebook/react/pull/13384
50
}
@@ -78,11 +78,11 @@ export function logCapturedError(capturedError: CapturedError): void {
78
// We don't include the original error message and JS stack because the browser
79
// has already printed it. Even if the application swallows the error, it is still
80
// displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
81
- console.error(combinedMessage);
81
+ console['error'](combinedMessage); // Don't transform to our wrapper
82
} else {
83
// In production, we print the error directly.
84
// This will include the message, the JS stack, and anything the browser wants to show.
85
// We pass the error object instead of custom message so that the browser displays the error natively.
86
- console.error(error);
86
+ console['error'](error); // Don't transform to our wrapper
87
}
88
}
packages/react-reconciler/src/ReactFiberEvents.js
+1
-2
@@ -21,7 +21,6 @@ import {
21
} from './ReactFiberHostConfig';
22
import {NoWork} from './ReactFiberExpirationTime';
23
24
-import warning from 'shared/warning';
24
import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
25
26
import invariant from 'shared/invariant';
@@ -118,7 +117,7 @@ function updateEventListener(
117
if (visistedResponders.has(responder)) {
118
// show warning
119
if (__DEV__) {
121
- warning(
120
+ console.error(
121
'Duplicate event responder "%s" found in event listeners. ' +
122
'Event listeners passed to elements cannot use the same event responder more than once.',
123
responder.displayName,
packages/react-reconciler/src/ReactFiberHooks.js
+10
-11
@@ -46,7 +46,6 @@ import {
46
} from './ReactFiberWorkLoop';
47
48
import invariant from 'shared/invariant';
49
-import warning from 'shared/warning';
49
import getComponentName from 'shared/getComponentName';
50
import is from 'shared/objectIs';
51
import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork';
@@ -240,7 +239,7 @@ function checkDepsAreArrayDev(deps: mixed) {
239
if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
240
// Verify deps, but only on mount to avoid extra checks.
241
// It's unlikely their type would change as usually you define them inline.
243
- warning(
242
+ console.error(
243
'%s received a final argument that is not an array (instead, received `%s`). When ' +
244
'specified, the final argument must be an array.',
245
currentHookNameInDev,
@@ -281,7 +280,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
280
table += row;
281
}
282
284
- warning(
283
+ console.error(
284
'React has detected a change in the order of Hooks called by %s. ' +
285
'This will lead to bugs and errors if not fixed. ' +
286
'For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
@@ -322,7 +321,7 @@ function areHookInputsEqual(
321
322
if (prevDeps === null) {
323
if (__DEV__) {
325
- warning(
324
+ console.error(
325
'%s received a final argument during this render, but not during ' +
326
'the previous render. Even though the final argument is optional, ' +
327
'its type cannot change between renders.',
@@ -336,7 +335,7 @@ function areHookInputsEqual(
335
// Don't bother comparing lengths in prod because these arrays should be
336
// passed inline.
337
if (nextDeps.length !== prevDeps.length) {
339
- warning(
338
+ console.error(
339
'The final argument passed to %s changed size between renders. The ' +
340
'order and size of this array must remain constant.\n\n' +
341
'Previous: %s\n' +
@@ -1033,7 +1032,7 @@ function imperativeHandleEffect<T>(
1032
const refObject = ref;
1033
if (__DEV__) {
1034
if (!refObject.hasOwnProperty('current')) {
1036
- warning(
1035
+ console.error(
1036
'Expected useImperativeHandle() first argument to either be a ' +
1037
'ref callback or React.createRef() object. Instead received: %s.',
1038
'an object with keys {' + Object.keys(refObject).join(', ') + '}',
@@ -1055,7 +1054,7 @@ function mountImperativeHandle<T>(
1054
): void {
1055
if (__DEV__) {
1056
if (typeof create !== 'function') {
1058
- warning(
1057
+ console.error(
1058
'Expected useImperativeHandle() second argument to be a function ' +
1059
'that creates a handle. Instead received: %s.',
1060
create !== null ? typeof create : 'null',
@@ -1082,7 +1081,7 @@ function updateImperativeHandle<T>(
1081
): void {
1082
if (__DEV__) {
1083
if (typeof create !== 'function') {
1085
- warning(
1084
+ console.error(
1085
'Expected useImperativeHandle() second argument to be a function ' +
1086
'that creates a handle. Instead received: %s.',
1087
create !== null ? typeof create : 'null',
@@ -1257,7 +1256,7 @@ function dispatchAction<S, A>(
1256
) {
1257
if (__DEV__) {
1258
if (typeof arguments[3] === 'function') {
1260
- warning(
1259
+ console.error(
1260
"State updates from the useState() and useReducer() Hooks don't support the " +
1261
'second callback argument. To execute a side effect after ' +
1262
'rendering, declare it in the component body with useEffect().',
@@ -1440,7 +1439,7 @@ let InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher | null = null;
1439
1440
if (__DEV__) {
1441
const warnInvalidContextAccess = () => {
1443
- warning(
1442
+ console.error(
1443
'Context can only be read while React is rendering. ' +
1444
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
1445
'In function components, you can read it directly in the function body, but not ' +
@@ -1449,7 +1448,7 @@ if (__DEV__) {
1448
};
1449
1450
const warnInvalidHookAccess = () => {
1452
- warning(
1451
+ console.error(
1452
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1453
'You can only call Hooks at the top level of your React function. ' +
1454
'For more information, see ' +
packages/react-reconciler/src/ReactFiberHydrationContext.js
+1
-2
@@ -55,7 +55,6 @@ import {
55
didNotFindHydratableSuspenseInstance,
56
} from './ReactFiberHostConfig';
57
import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
58
-import warning from 'shared/warning';
58
import {Never} from './ReactFiberExpirationTime';
59
60
// The deepest Fiber on the stack involved in a hydration context.
@@ -67,7 +66,7 @@ let isHydrating: boolean = false;
66
function warnIfHydrating() {
67
if (__DEV__) {
68
if (isHydrating) {
70
- warning(
69
+ console.error(
70
'We should not be hydrating here. This is a bug in React. Please file a bug.',
71
);
72
}
packages/react-reconciler/src/ReactFiberNewContext.js
+4
-5
@@ -28,7 +28,6 @@ import {
28
} from 'shared/ReactWorkTags';
29
30
import invariant from 'shared/invariant';
31
-import warning from 'shared/warning';
31
import is from 'shared/objectIs';
32
import {
33
createUpdate,
@@ -89,7 +88,7 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
88
context._currentRenderer !== null &&
89
context._currentRenderer !== rendererSigil
90
) {
92
- warning(
91
+ console.error(
92
'Detected multiple renderers concurrently rendering the ' +
93
'same context provider. This is currently unsupported.',
94
);
@@ -106,7 +105,7 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
105
context._currentRenderer2 !== null &&
106
context._currentRenderer2 !== rendererSigil
107
) {
109
- warning(
108
+ console.error(
109
'Detected multiple renderers concurrently rendering the ' +
110
'same context provider. This is currently unsupported.',
111
);
@@ -145,7 +144,7 @@ export function calculateChangedBits<T>(
144
145
if (__DEV__) {
146
if ((changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits) {
148
- warning(
147
+ console.error(
148
'calculateChangedBits: Expected the return value to be a ' +
149
'31-bit integer. Instead received: %s',
150
changedBits,
@@ -343,7 +342,7 @@ export function readContext<T>(
342
// This warning would fire if you read context inside a Hook like useMemo.
343
// Unlike the class check below, it's not enforced in production for perf.
344
if (isDisallowedContextReadInDEV) {
346
- warning(
345
+ console.error(
346
'Context can only be read while React is rendering. ' +
347
'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
348
'In function components, you can read it directly in the function body, but not ' +
packages/react-reconciler/src/ReactFiberReconciler.js
+4
-5
@@ -37,7 +37,6 @@ import {
37
} from 'shared/ReactWorkTags';
38
import getComponentName from 'shared/getComponentName';
39
import invariant from 'shared/invariant';
40
-import warning from 'shared/warning';
40
import ReactSharedInternals from 'shared/ReactSharedInternals';
41
42
import {getPublicInstance} from './ReactFiberHostConfig';
@@ -181,7 +180,7 @@ function findHostInstanceWithWarning(
180
if (!didWarnAboutFindNodeInStrictMode[componentName]) {
181
didWarnAboutFindNodeInStrictMode[componentName] = true;
182
if (fiber.mode & StrictMode) {
184
- warning(
183
+ console.error(
184
'%s is deprecated in StrictMode. ' +
185
'%s was passed an instance of %s which is inside StrictMode. ' +
186
'Instead, add a ref directly to the element you want to reference. ' +
@@ -193,7 +192,7 @@ function findHostInstanceWithWarning(
192
getStackByFiberInDevAndProd(hostFiber),
193
);
194
} else {
196
- warning(
195
+ console.error(
196
'%s is deprecated in StrictMode. ' +
197
'%s was passed an instance of %s which renders StrictMode children. ' +
198
'Instead, add a ref directly to the element you want to reference. ' +
@@ -260,7 +259,7 @@ export function updateContainer(
259
!didWarnAboutNestedUpdates
260
) {
261
didWarnAboutNestedUpdates = true;
263
- warning(
262
+ console.error(
263
'Render methods should be a pure function of props and state; ' +
264
'triggering nested component updates from render is not allowed. ' +
265
'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
@@ -279,7 +278,7 @@ export function updateContainer(
278
if (callback !== null) {
279
if (__DEV__) {
280
if (typeof callback !== 'function') {
282
- warning(
281
+ console.error(
282
'render(...): Expected the last optional `callback` argument to be a ' +
283
'function. Instead received: %s.',
284
callback,
packages/react-reconciler/src/ReactFiberStack.js
+5
-5
@@ -9,8 +9,6 @@
9
10
import type {Fiber} from './ReactFiber';
11
12
-import warning from 'shared/warning';
13
-
12
export type StackCursor<T> = {
13
current: T,
14
};
@@ -38,14 +36,14 @@ function isEmpty(): boolean {
36
function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
37
if (index < 0) {
38
if (__DEV__) {
41
- warning('Unexpected pop.');
39
+ console.error('Unexpected pop.');
40
}
41
return;
42
}
43
44
if (__DEV__) {
45
if (fiber !== fiberStack[index]) {
48
- warning('Unexpected Fiber popped.');
46
+ console.error('Unexpected Fiber popped.');
47
}
48
}
49
@@ -75,7 +73,9 @@ function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
73
function checkThatStackIsEmpty() {
74
if (__DEV__) {
75
if (index !== -1) {
78
- warning('Expected an empty stack. Something was not reset properly.');
76
+ console.error(
77
+ 'Expected an empty stack. Something was not reset properly.',
78
+ );
79
}
80
}
81
}
packages/react-reconciler/src/ReactFiberThrow.js
+1
-2
@@ -16,7 +16,6 @@ import type {Thenable} from './ReactFiberWorkLoop';
16
import type {SuspenseContext} from './ReactFiberSuspenseContext';
17
18
import getComponentName from 'shared/getComponentName';
19
-import warning from 'shared/warning';
19
import {
20
ClassComponent,
21
HostRoot,
@@ -125,7 +124,7 @@ function createClassErrorUpdate(
124
// then it needs to call setState to recover from errors.
125
// If no state update is scheduled then the boundary will swallow the error.
126
if (fiber.expirationTime !== Sync) {
128
- warning(
127
+ console.error(
128
'%s: Error boundaries should implement getDerivedStateFromError(). ' +
129
'In that method, return a state update to display an error message or fallback UI.',
130
getComponentName(fiber.type) || 'Unknown',
packages/react-reconciler/src/ReactFiberTreeReflection.js
+1
-2
@@ -12,7 +12,6 @@ import type {Container, SuspenseInstance} from './ReactFiberHostConfig';
12
import type {SuspenseState} from './ReactFiberSuspenseComponent';
13
14
import invariant from 'shared/invariant';
15
-import warning from 'shared/warning';
15
16
import {get as getInstance} from 'shared/ReactInstanceMap';
17
import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -98,7 +97,7 @@ export function isMounted(component: React$Component<any, any>): boolean {
97
const ownerFiber: Fiber = owner;
98
const instance = ownerFiber.stateNode;
99
if (!instance._warnedAboutRefsInRender) {
101
- warning(
100
+ console.error(
101
'%s is accessing isMounted inside its render() function. ' +
102
'render() should be a pure function of props and state. It should ' +
103
'never access something that requires stale data from the previous ' +
packages/react-reconciler/src/ReactFiberWorkLoop.js
+11
-12
@@ -150,7 +150,6 @@ import {
150
} from './ReactProfilerTimer';
151
152
// DEV stuff
153
-import warning from 'shared/warning';
153
import getComponentName from 'shared/getComponentName';
154
import ReactStrictModeWarnings from './ReactStrictModeWarnings';
155
import {
@@ -1091,7 +1090,7 @@ export function flushDiscreteUpdates() {
1090
) {
1091
if (__DEV__) {
1092
if ((executionContext & RenderContext) !== NoContext) {
1094
- warning(
1093
+ console.error(
1094
'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
1095
'already rendering.',
1096
);
@@ -2522,7 +2521,7 @@ function checkForNestedUpdates() {
2521
if (__DEV__) {
2522
if (nestedPassiveUpdateCount > NESTED_PASSIVE_UPDATE_LIMIT) {
2523
nestedPassiveUpdateCount = 0;
2525
- warning(
2524
+ console.error(
2525
'Maximum update depth exceeded. This can happen when a component ' +
2526
"calls setState inside useEffect, but useEffect either doesn't " +
2527
'have a dependency array, or one of the dependencies changes on ' +
@@ -2594,7 +2593,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
2593
} else {
2594
didWarnStateUpdateForUnmountedComponent = new Set([componentName]);
2595
}
2597
- warning(
2596
+ console.error(
2597
"Can't perform a React state update on an unmounted component. This " +
2598
'is a no-op, but it indicates a memory leak in your application. To ' +
2599
'fix, cancel all subscriptions and asynchronous tasks in %s.%s',
@@ -2685,7 +2684,7 @@ function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
2684
if (didWarnAboutUpdateInGetChildContext) {
2685
return;
2686
}
2688
- warning(
2687
+ console.error(
2688
'setState(...): Cannot call setState() inside getChildContext()',
2689
);
2690
didWarnAboutUpdateInGetChildContext = true;
@@ -2694,7 +2693,7 @@ function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
2693
if (didWarnAboutUpdateInRender) {
2694
return;
2695
}
2697
- warning(
2696
+ console.error(
2697
'Cannot update during an existing state transition (such as ' +
2698
'within `render`). Render methods should be a pure function of ' +
2699
'props and state.',
@@ -2716,7 +2715,7 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
2715
IsSomeRendererActing.current === true &&
2716
IsThisRendererActing.current !== true
2717
) {
2719
- warning(
2718
+ console.error(
2719
"It looks like you're using the wrong act() around your test interactions.\n" +
2720
'Be sure to use the matching version of act() corresponding to your renderer:\n\n' +
2721
'// for react-dom:\n' +
@@ -2743,7 +2742,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
2742
IsSomeRendererActing.current === false &&
2743
IsThisRendererActing.current === false
2744
) {
2746
- warning(
2745
+ console.error(
2746
'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
2747
'When testing, code that causes React state updates should be ' +
2748
'wrapped into act(...):\n\n' +
@@ -2770,7 +2769,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
2769
IsSomeRendererActing.current === false &&
2770
IsThisRendererActing.current === false
2771
) {
2773
- warning(
2772
+ console.error(
2773
'An update to %s inside a test was not wrapped in act(...).\n\n' +
2774
'When testing, code that causes React state updates should be ' +
2775
'wrapped into act(...):\n\n' +
@@ -2806,7 +2805,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
2805
) {
2806
if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
2807
didWarnAboutUnmockedScheduler = true;
2809
- warning(
2808
+ console.error(
2809
'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
2810
'to guarantee consistent behaviour across tests and browsers. ' +
2811
'For example, with jest: \n' +
@@ -2815,7 +2814,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
2814
);
2815
} else if (warnAboutUnmockedScheduler === true) {
2816
didWarnAboutUnmockedScheduler = true;
2818
- warning(
2817
+ console.error(
2818
'Starting from React v17, the "scheduler" module will need to be mocked ' +
2819
'to guarantee consistent behaviour across tests and browsers. ' +
2820
'For example, with jest: \n' +
@@ -2925,7 +2924,7 @@ function flushSuspensePriorityWarningInDEV() {
2924
componentsThatTriggeredHighPriSuspend = null;
2925
2926
if (componentNames.length > 0) {
2928
- warning(
2927
+ console.error(
2928
'%s triggered a user-blocking update that suspended.' +
2929
'\n\n' +
2930
'The fix is to split the update into multiple parts: a user-blocking ' +
packages/react-reconciler/src/ReactStrictModeWarnings.js
+8
-10
@@ -13,8 +13,6 @@ import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
13
14
import getComponentName from 'shared/getComponentName';
15
import {StrictMode} from './ReactTypeOfMode';
16
-import lowPriorityWarning from 'shared/lowPriorityWarning';
17
-import warning from 'shared/warning';
16
17
type FiberArray = Array<Fiber>;
18
type FiberToFiberComponentsMap = Map<Fiber, FiberArray>;
@@ -191,7 +189,7 @@ if (__DEV__) {
189
const sortedNames = setToSortedString(
190
UNSAFE_componentWillMountUniqueNames,
191
);
194
- warning(
192
+ console.error(
193
'Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. ' +
194
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
195
'* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
@@ -204,7 +202,7 @@ if (__DEV__) {
202
const sortedNames = setToSortedString(
203
UNSAFE_componentWillReceivePropsUniqueNames,
204
);
207
- warning(
205
+ console.error(
206
'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ' +
207
'and may indicate bugs in your code. ' +
208
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
@@ -221,7 +219,7 @@ if (__DEV__) {
219
const sortedNames = setToSortedString(
220
UNSAFE_componentWillUpdateUniqueNames,
221
);
224
- warning(
222
+ console.error(
223
'Using UNSAFE_componentWillUpdate in strict mode is not recommended ' +
224
'and may indicate bugs in your code. ' +
225
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
@@ -234,7 +232,7 @@ if (__DEV__) {
232
if (componentWillMountUniqueNames.size > 0) {
233
const sortedNames = setToSortedString(componentWillMountUniqueNames);
234
237
- lowPriorityWarning(
235
+ console.warn(
236
'componentWillMount has been renamed, and is not recommended for use. ' +
237
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
238
'* Move code with side effects to componentDidMount, and set initial state in the constructor.\n' +
@@ -252,7 +250,7 @@ if (__DEV__) {
250
componentWillReceivePropsUniqueNames,
251
);
252
255
- lowPriorityWarning(
253
+ console.warn(
254
'componentWillReceiveProps has been renamed, and is not recommended for use. ' +
255
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
256
'* Move data fetching code or side effects to componentDidUpdate.\n' +
@@ -271,7 +269,7 @@ if (__DEV__) {
269
if (componentWillUpdateUniqueNames.size > 0) {
270
const sortedNames = setToSortedString(componentWillUpdateUniqueNames);
271
274
- lowPriorityWarning(
272
+ console.warn(
273
'componentWillUpdate has been renamed, and is not recommended for use. ' +
274
'See https://fb.me/react-unsafe-component-lifecycles for details.\n\n' +
275
'* Move data fetching code or side effects to componentDidUpdate.\n' +
@@ -296,7 +294,7 @@ if (__DEV__) {
294
) => {
295
const strictRoot = findStrictRoot(fiber);
296
if (strictRoot === null) {
299
- warning(
297
+ console.error(
298
'Expected to find a StrictMode component in a strict mode tree. ' +
299
'This error is likely caused by a bug in React. Please file an issue.',
300
);
@@ -337,7 +335,7 @@ if (__DEV__) {
335
strictRoot,
336
);
337
340
- warning(
338
+ console.error(
339
'Legacy context API has been detected within a strict-mode tree.' +
340
'\n\nThe old API will be supported in all 16.x releases, but applications ' +
341
'using it should migrate to the new version.' +
packages/react-reconciler/src/ReactUpdateQueue.js
+1
-2
@@ -105,7 +105,6 @@ import {
105
} from './ReactFiberWorkLoop';
106
107
import invariant from 'shared/invariant';
108
-import warning from 'shared/warning';
108
import {getCurrentPriorityLevel} from './SchedulerWithReactIntegration';
109
110
export type Update<State> = {
@@ -228,7 +227,7 @@ export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
227
currentlyProcessingQueue === sharedQueue &&
228
!didWarnUpdateInsideUpdate
229
) {
231
- warning(
230
+ console.error(
231
'An update (setState, replaceState, or forceUpdate) was scheduled ' +
232
'from inside an update function. Update functions should be pure, ' +
233
'with zero side-effects. Consider using componentDidUpdate or a ' +
packages/react-test-renderer/src/ReactShallowRenderer.js
+2
-3
@@ -15,7 +15,6 @@ import shallowEqual from 'shared/shallowEqual';
15
import invariant from 'shared/invariant';
16
import checkPropTypes from 'prop-types/checkPropTypes';
17
import ReactSharedInternals from 'shared/ReactSharedInternals';
18
-import warning from 'shared/warning';
18
import is from 'shared/objectIs';
19
20
import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
@@ -62,7 +61,7 @@ function areHookInputsEqual(
61
) {
62
if (prevDeps === null) {
63
if (__DEV__) {
65
- warning(
64
+ console.error(
65
'%s received a final argument during this render, but not during ' +
66
'the previous render. Even though the final argument is optional, ' +
67
'its type cannot change between renders.',
@@ -76,7 +75,7 @@ function areHookInputsEqual(
75
// Don't bother comparing lengths in prod because these arrays should be
76
// passed inline.
77
if (nextDeps.length !== prevDeps.length) {
79
- warning(
78
+ console.error(
79
'The final argument passed to %s changed size between renders. The ' +
80
'order and size of this array must remain constant.\n\n' +
81
'Previous: %s\n' +
packages/react-test-renderer/src/ReactTestHostConfig.js
+2
-4
@@ -7,8 +7,6 @@
7
* @flow
8
*/
9
10
-import warning from 'shared/warning';
11
-
10
import type {
11
ReactEventResponder,
12
ReactEventResponderInstance,
@@ -83,7 +81,7 @@ export function appendChild(
81
): void {
82
if (__DEV__) {
83
if (!Array.isArray(parentInstance.children)) {
86
- warning(
84
+ console.error(
85
'An invalid container has been provided. ' +
86
'This may indicate that another renderer is being used in addition to the test renderer. ' +
87
'(For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) ' +
@@ -218,7 +216,7 @@ export function createTextInstance(
216
if (__DEV__) {
217
if (enableFlareAPI) {
218
if (hostContext === EVENT_COMPONENT_CONTEXT) {
221
- warning(
219
+ console.error(
220
'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
221
'Wrap the child text "%s" in an element.',
222
text,
packages/react-test-renderer/src/ReactTestRendererAct.js
+5
-5
@@ -14,7 +14,6 @@ import {
14
IsThisRendererActing,
15
} from 'react-reconciler/inline.test';
16
import ReactSharedInternals from 'shared/ReactSharedInternals';
17
-import warning from 'shared/warning';
17
import enqueueTask from 'shared/enqueueTask';
18
import * as Scheduler from 'scheduler';
19
@@ -61,6 +60,7 @@ function act(callback: () => Thenable) {
60
if (!__DEV__) {
61
if (didWarnAboutUsingActInProd === false) {
62
didWarnAboutUsingActInProd = true;
63
+ // eslint-disable-next-line react-internal/no-production-logging
64
console.error(
65
'act(...) is not supported in production builds of React, and might not behave as expected.',
66
);
@@ -83,7 +83,7 @@ function act(callback: () => Thenable) {
83
if (__DEV__) {
84
if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
85
// if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
86
- warning(
86
+ console.error(
87
'You seem to have overlapping act() calls, this is not supported. ' +
88
'Be sure to await previous act() calls before making a new one. ',
89
);
@@ -115,7 +115,7 @@ function act(callback: () => Thenable) {
115
.then(() => {})
116
.then(() => {
117
if (called === false) {
118
- warning(
118
+ console.error(
119
'You called act(async () => ...) without await. ' +
120
'This could lead to unexpected testing behaviour, interleaving multiple act ' +
121
'calls and mixing their scopes. You should - await act(async () => ...);',
@@ -163,7 +163,7 @@ function act(callback: () => Thenable) {
163
} else {
164
if (__DEV__) {
165
if (result !== undefined) {
166
- warning(
166
+ console.error(
167
'The callback passed to act(...) function ' +
168
'must return undefined, or a Promise. You returned %s',
169
result,
@@ -191,7 +191,7 @@ function act(callback: () => Thenable) {
191
return {
192
then(resolve: () => void) {
193
if (__DEV__) {
194
- warning(
194
+ console.error(
195
'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
196
);
197
}
packages/react/src/ReactBaseClasses.js
+1
-2
@@ -6,7 +6,6 @@
6
*/
7
8
import invariant from 'shared/invariant';
9
-import lowPriorityWarning from 'shared/lowPriorityWarning';
9
10
import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
11
@@ -105,7 +104,7 @@ if (__DEV__) {
104
const defineDeprecationWarning = function(methodName, info) {
105
Object.defineProperty(Component.prototype, methodName, {
106
get: function() {
108
- lowPriorityWarning(
107
+ console.warn(
108
'%s(...) is deprecated in plain JavaScript React classes. %s',
109
info[0],
110
info[1],
packages/react/src/ReactChildren.js
+1
-2
@@ -6,7 +6,6 @@
6
*/
7
8
import invariant from 'shared/invariant';
9
-import warning from 'shared/warning';
9
import {
10
getIteratorFn,
11
REACT_ELEMENT_TYPE,
@@ -163,7 +162,7 @@ function traverseAllChildrenImpl(
162
// Warn about using Maps as children
163
if (iteratorFn === children.entries) {
164
if (!didWarnAboutMaps) {
166
- warning(
165
+ console.error(
166
'Using Maps as children is unsupported and will likely yield ' +
167
'unexpected results. Convert it to a sequence/iterable of keyed ' +
168
'ReactElements instead.',
packages/react/src/ReactContext.js
+3
-5
@@ -11,8 +11,6 @@ import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
11
12
import type {ReactContext} from 'shared/ReactTypes';
13
14
-import warning from 'shared/warning';
15
-
14
export function createContext<T>(
15
defaultValue: T,
16
calculateChangedBits: ?(a: T, b: T) => number,
@@ -25,7 +23,7 @@ export function createContext<T>(
23
calculateChangedBits !== null &&
24
typeof calculateChangedBits !== 'function'
25
) {
28
- warning(
26
+ console.error(
27
'createContext: Expected the optional second argument to be a ' +
28
'function. Instead received: %s',
29
calculateChangedBits,
@@ -75,7 +73,7 @@ export function createContext<T>(
73
get() {
74
if (!hasWarnedAboutUsingConsumerProvider) {
75
hasWarnedAboutUsingConsumerProvider = true;
78
- warning(
76
+ console.error(
77
'Rendering <Context.Consumer.Provider> is not supported and will be removed in ' +
78
'a future major release. Did you mean to render <Context.Provider> instead?',
79
);
@@ -114,7 +112,7 @@ export function createContext<T>(
112
get() {
113
if (!hasWarnedAboutUsingNestedContextConsumers) {
114
hasWarnedAboutUsingNestedContextConsumers = true;
117
- warning(
115
+ console.error(
116
'Rendering <Context.Consumer.Consumer> is not supported and will be removed in ' +
117
'a future major release. Did you mean to render <Context.Consumer> instead?',
118
);
packages/react/src/ReactElement.js
+2
-3
@@ -6,7 +6,6 @@
6
*/
7
8
import invariant from 'shared/invariant';
9
-import warning from 'shared/warning';
9
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
10
11
import ReactCurrentOwner from './ReactCurrentOwner';
@@ -51,7 +50,7 @@ function defineKeyPropWarningGetter(props, displayName) {
50
if (__DEV__) {
51
if (!specialPropKeyWarningShown) {
52
specialPropKeyWarningShown = true;
54
- warning(
53
+ console.error(
54
'%s: `key` is not a prop. Trying to access it will result ' +
55
'in `undefined` being returned. If you need to access the same ' +
56
'value within the child component, you should pass it as a different ' +
@@ -73,7 +72,7 @@ function defineRefPropWarningGetter(props, displayName) {
72
if (__DEV__) {
73
if (!specialPropRefWarningShown) {
74
specialPropRefWarningShown = true;
76
- warning(
75
+ console.error(
76
'%s: `ref` is not a prop. Trying to access it will result ' +
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 ' +
packages/react/src/ReactElementValidator.js
+10
-12
@@ -12,7 +12,6 @@
12
* that support it.
13
*/
14
15
-import lowPriorityWarning from 'shared/lowPriorityWarning';
15
import isValidElementType from 'shared/isValidElementType';
16
import getComponentName from 'shared/getComponentName';
17
import {
@@ -23,7 +22,6 @@ import {
22
REACT_ELEMENT_TYPE,
23
} from 'shared/ReactSymbols';
24
import checkPropTypes from 'prop-types/checkPropTypes';
26
-import warning from 'shared/warning';
25
26
import ReactCurrentOwner from './ReactCurrentOwner';
27
import {
@@ -132,7 +130,7 @@ function validateExplicitKey(element, parentType) {
130
131
setCurrentlyValidatingElement(element);
132
if (__DEV__) {
135
- warning(
133
+ console.error(
134
'Each child in a list should have a unique "key" prop.' +
135
'%s%s See https://fb.me/react-warning-keys for more information.',
136
currentComponentErrorInfo,
@@ -224,7 +222,7 @@ function validatePropTypes(element) {
222
setCurrentlyValidatingElement(null);
223
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
224
propTypesMisspellWarningShown = true;
227
- warning(
225
+ console.error(
226
'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
227
name || 'Unknown',
228
);
@@ -233,7 +231,7 @@ function validatePropTypes(element) {
231
typeof type.getDefaultProps === 'function' &&
232
!type.getDefaultProps.isReactClassApproved
233
) {
236
- warning(
234
+ console.error(
235
'getDefaultProps is only used on classic React.createClass ' +
236
'definitions. Use a static property named `defaultProps` instead.',
237
);
@@ -253,7 +251,7 @@ function validateFragmentProps(fragment) {
251
for (let i = 0; i < keys.length; i++) {
252
const key = keys[i];
253
if (key !== 'children' && key !== 'key') {
256
- warning(
254
+ console.error(
255
'Invalid prop `%s` supplied to `React.Fragment`. ' +
256
'React.Fragment can only have `key` and `children` props.',
257
key,
@@ -263,7 +261,7 @@ function validateFragmentProps(fragment) {
261
}
262
263
if (fragment.ref !== null) {
266
- warning('Invalid attribute `ref` supplied to `React.Fragment`.');
264
+ console.error('Invalid attribute `ref` supplied to `React.Fragment`.');
265
}
266
267
setCurrentlyValidatingElement(null);
@@ -316,7 +314,7 @@ export function jsxWithValidation(
314
}
315
316
if (__DEV__) {
319
- warning(
317
+ console.error(
318
'React.jsx: type is invalid -- expected a string (for ' +
319
'built-in components) or a class/function (for composite ' +
320
'components) but got: %s.%s',
@@ -354,7 +352,7 @@ export function jsxWithValidation(
352
}
353
} else {
354
if (__DEV__) {
357
- warning(
355
+ console.error(
356
'React.jsx: Static children should always be an array. ' +
357
'You are likely explicitly calling React.jsxs or React.jsxDEV. ' +
358
'Use the Babel transform instead.',
@@ -369,7 +367,7 @@ export function jsxWithValidation(
367
368
if (hasOwnProperty.call(props, 'key')) {
369
if (__DEV__) {
372
- warning(
370
+ console.error(
371
'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
372
'Explicitly pass a key after spreading props in your JSX call. ' +
373
'E.g. <ComponentName {...props} key={key} />',
@@ -437,7 +435,7 @@ export function createElementWithValidation(type, props, children) {
435
}
436
437
if (__DEV__) {
440
- warning(
438
+ console.error(
439
'React.createElement: type is invalid -- expected a string (for ' +
440
'built-in components) or a class/function (for composite ' +
441
'components) but got: %s.%s',
@@ -483,7 +481,7 @@ export function createFactoryWithValidation(type) {
481
Object.defineProperty(validatedFactory, 'type', {
482
enumerable: false,
483
get: function() {
486
- lowPriorityWarning(
484
+ console.warn(
485
'Factory.type is deprecated. Access the class directly ' +
486
'before passing it to createFactory.',
487
);
packages/react/src/ReactHooks.js
+4
-5
@@ -13,7 +13,6 @@ import type {
13
ReactEventResponderListener,
14
} from 'shared/ReactTypes';
15
import invariant from 'shared/invariant';
16
-import warning from 'shared/warning';
16
import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
17
18
import ReactCurrentDispatcher from './ReactCurrentDispatcher';
@@ -39,7 +38,7 @@ export function useContext<T>(
38
const dispatcher = resolveDispatcher();
39
if (__DEV__) {
40
if (unstable_observedBits !== undefined) {
42
- warning(
41
+ console.error(
42
'useContext() second argument is reserved for future ' +
43
'use in React. Passing it is not supported. ' +
44
'You passed: %s.%s',
@@ -58,12 +57,12 @@ export function useContext<T>(
57
// Don't deduplicate because this legitimately causes bugs
58
// and nobody should be using this in existing code.
59
if (realContext.Consumer === Context) {
61
- warning(
60
+ console.error(
61
'Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +
62
'removed in a future major release. Did you mean to call useContext(Context) instead?',
63
);
64
} else if (realContext.Provider === Context) {
66
- warning(
65
+ console.error(
66
'Calling useContext(Context.Provider) is not supported. ' +
67
'Did you mean to call useContext(Context) instead?',
68
);
@@ -149,7 +148,7 @@ export function useResponder(
148
const dispatcher = resolveDispatcher();
149
if (__DEV__) {
150
if (responder == null || responder.$$typeof !== REACT_RESPONDER_TYPE) {
152
- warning(
151
+ console.error(
152
'useResponder: invalid first argument. Expected an event responder, but instead got %s',
153
responder,
154
);
packages/react/src/ReactLazy.js
+2
-3
@@ -8,7 +8,6 @@
8
import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';
9
10
import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
11
-import warning from 'shared/warning';
11
12
export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
13
let lazyType = {
@@ -30,7 +29,7 @@ export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
29
return defaultProps;
30
},
31
set(newDefaultProps) {
33
- warning(
32
+ console.error(
33
'React.lazy(...): It is not supported to assign `defaultProps` to ' +
34
'a lazy component import. Either specify them where the component ' +
35
'is defined, or create a wrapping component around it.',
@@ -48,7 +47,7 @@ export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
47
return propTypes;
48
},
49
set(newPropTypes) {
51
- warning(
50
+ console.error(
51
'React.lazy(...): It is not supported to assign `propTypes` to ' +
52
'a lazy component import. Either specify them where the component ' +
53
'is defined, or create a wrapping component around it.',
packages/react/src/ReactNoopUpdateQueue.js
+1
-3
@@ -5,8 +5,6 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import warning from 'shared/warning';
9
-
8
const didWarnStateUpdateForUnmountedComponent = {};
9
10
function warnNoop(publicInstance, callerName) {
@@ -19,7 +17,7 @@ function warnNoop(publicInstance, callerName) {
17
if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
18
return;
19
}
22
- warning(
20
+ console.error(
21
"Can't call %s on a component that is not yet mounted. " +
22
'This is a no-op, but it might indicate a bug in your application. ' +
23
'Instead, assign to `this.state` directly or define a `state = {};` ' +
packages/react/src/forwardRef.js
+4
-6
@@ -7,26 +7,24 @@
7
8
import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
9
10
-import warning from 'shared/warning';
11
-
10
export default function forwardRef<Props, ElementType: React$ElementType>(
11
render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
12
) {
13
if (__DEV__) {
14
if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
17
- warning(
15
+ console.error(
16
'forwardRef requires a render function but received a `memo` ' +
17
'component. Instead of forwardRef(memo(...)), use ' +
18
'memo(forwardRef(...)).',
19
);
20
} else if (typeof render !== 'function') {
23
- warning(
21
+ console.error(
22
'forwardRef requires a render function but was given %s.',
23
render === null ? 'null' : typeof render,
24
);
25
} else {
26
if (render.length !== 0 && render.length !== 2) {
29
- warning(
27
+ console.error(
28
'forwardRef render functions accept exactly two parameters: props and ref. %s',
29
render.length === 1
30
? 'Did you forget to use the ref parameter?'
@@ -37,7 +35,7 @@ export default function forwardRef<Props, ElementType: React$ElementType>(
35
36
if (render != null) {
37
if (render.defaultProps != null || render.propTypes != null) {
40
- warning(
38
+ console.error(
39
'forwardRef render functions do not support propTypes or defaultProps. ' +
40
'Did you accidentally pass a React component?',
41
);
packages/react/src/memo.js
+1
-2
@@ -8,7 +8,6 @@
8
import {REACT_MEMO_TYPE} from 'shared/ReactSymbols';
9
10
import isValidElementType from 'shared/isValidElementType';
11
-import warning from 'shared/warning';
11
12
export default function memo<Props>(
13
type: React$ElementType,
@@ -16,7 +15,7 @@ export default function memo<Props>(
15
) {
16
if (__DEV__) {
17
if (!isValidElementType(type)) {
19
- warning(
18
+ console.error(
19
'memo: The first argument must be a component. Instead ' +
20
'received: %s',
21
type === null ? 'null' : typeof type,
packages/scheduler/src/SchedulerProfiling.js
+2
-1
@@ -69,7 +69,8 @@ function logEvent(entries) {
69
if (eventLogIndex + 1 > eventLogSize) {
70
eventLogSize *= 2;
71
if (eventLogSize > MAX_EVENT_LOG_SIZE) {
72
- console.error(
72
+ // Using console['error'] to evade Babel and ESLint
73
+ console['error'](
74
"Scheduler Profiling: Event log exceeded maximum size. Don't " +
75
'forget to call `stopLoggingProfilingEvents()`.',
76
);
packages/scheduler/src/forks/SchedulerHostConfig.default.js
+6
-3
@@ -81,14 +81,16 @@ if (
81
const cancelAnimationFrame = window.cancelAnimationFrame;
82
// TODO: Remove fb.me link
83
if (typeof requestAnimationFrame !== 'function') {
84
- console.error(
84
+ // Using console['error'] to evade Babel and ESLint
85
+ console['error'](
86
"This browser doesn't support requestAnimationFrame. " +
87
'Make sure that you load a ' +
88
'polyfill in older browsers. https://fb.me/react-polyfills',
89
);
90
}
91
if (typeof cancelAnimationFrame !== 'function') {
91
- console.error(
92
+ // Using console['error'] to evade Babel and ESLint
93
+ console['error'](
94
"This browser doesn't support cancelAnimationFrame. " +
95
'Make sure that you load a ' +
96
'polyfill in older browsers. https://fb.me/react-polyfills',
@@ -169,7 +171,8 @@ if (
171
172
forceFrameRate = function(fps) {
173
if (fps < 0 || fps > 125) {
172
- console.error(
174
+ // Using console['error'] to evade Babel and ESLint
175
+ console['error'](
176
'forceFrameRate takes a positive int between 0 and 125, ' +
177
'forcing framerates higher than 125 fps is not unsupported',
178
);
packages/shared/ReactLazyComponent.js
+1
-3
@@ -7,8 +7,6 @@
7
* @flow
8
*/
9
10
-import warning from 'shared/warning';
11
-
10
export type Thenable<T, R> = {
11
then(resolve: (T) => mixed, reject: (mixed) => mixed): R,
12
};
@@ -52,7 +50,7 @@ export function initializeLazyComponentType(
50
const defaultExport = moduleObject.default;
51
if (__DEV__) {
52
if (defaultExport === undefined) {
55
- warning(
53
+ console.error(
54
'lazy: Expected the result of a dynamic import() call. ' +
55
'Instead received: %s\n\nYour code should look like: \n ' +
56
"const MyComponent = lazy(() => import('./MyComponent'))",
packages/shared/consoleWithStackDev.js
new
+63
@@ -0,0 +1,63 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+import ReactSharedInternals from 'shared/ReactSharedInternals';
9
+
10
+// In DEV, calls to console.warn and console.error get replaced
11
+// by calls to these methods by a Babel plugin.
12
+//
13
+// In PROD (or in packages without access to React internals),
14
+// they are left as they are instead.
15
+
16
+export function warn(format, ...args) {
17
+ if (__DEV__) {
18
+ printWarning('warn', format, args);
19
+ }
20
+}
21
+
22
+export function error(format, ...args) {
23
+ if (__DEV__) {
24
+ printWarning('error', format, args);
25
+ }
26
+}
27
+
28
+function printWarning(level, format, args) {
29
+ if (__DEV__) {
30
+ const hasExistingStack =
31
+ args.length > 0 &&
32
+ typeof args[args.length - 1] === 'string' &&
33
+ args[args.length - 1].indexOf('\n in') === 0;
34
+
35
+ if (!hasExistingStack) {
36
+ const ReactDebugCurrentFrame =
37
+ ReactSharedInternals.ReactDebugCurrentFrame;
38
+ const stack = ReactDebugCurrentFrame.getStackAddendum();
39
+ if (stack !== '') {
40
+ format += '%s';
41
+ args = args.concat([stack]);
42
+ }
43
+ }
44
+
45
+ const argsWithFormat = args.map(item => '' + item);
46
+ // Careful: RN currently depends on this prefix
47
+ argsWithFormat.unshift('Warning: ' + format);
48
+ // We intentionally don't use spread (or .apply) directly because it
49
+ // breaks IE9: https://github.com/facebook/react/issues/13610
50
+ // eslint-disable-next-line react-internal/no-production-logging
51
+ Function.prototype.apply.call(console[level], console, argsWithFormat);
52
+
53
+ try {
54
+ // --- Welcome to debugging React ---
55
+ // This error was thrown as a convenience so that you can use this stack
56
+ // to find the callsite that caused this warning to fire.
57
+ let argIndex = 0;
58
+ const message =
59
+ 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
60
+ throw new Error(message);
61
+ } catch (x) {}
62
+ }
63
+}
packages/shared/enqueueTask.js
+1
-3
@@ -7,8 +7,6 @@
7
* @flow
8
*/
9
10
-import warningWithoutStack from 'shared/warningWithoutStack';
11
-
10
let didWarnAboutMessageChannel = false;
11
let enqueueTask;
12
try {
@@ -28,7 +26,7 @@ try {
26
if (didWarnAboutMessageChannel === false) {
27
didWarnAboutMessageChannel = true;
28
if (typeof MessageChannel === 'undefined') {
31
- warningWithoutStack(
29
+ console.error(
30
'This browser does not have a MessageChannel implementation, ' +
31
'so enqueuing tasks via await act(async () => ...) will fail. ' +
32
'Please file an issue at https://github.com/facebook/react/issues ' +
packages/shared/forks/consoleWithStackDev.www.js
new
+22
@@ -0,0 +1,22 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+// This refers to a WWW module.
9
+const warningWWW = require('warning');
10
+
11
+export function warn() {
12
+ // TODO: use different level for "warn".
13
+ const args = Array.prototype.slice.call(arguments);
14
+ args.unshift(false);
15
+ warningWWW.apply(null, args);
16
+}
17
+
18
+export function error() {
19
+ const args = Array.prototype.slice.call(arguments);
20
+ args.unshift(false);
21
+ warningWWW.apply(null, args);
22
+}
packages/shared/forks/lowPriorityWarningWithoutStack.www.js
deleted
-13
@@ -1,13 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-// This refers to a WWW module.
9
-const lowPriorityWarningWWW = require('lowPriorityWarning');
10
-
11
-export default function lowPriorityWarningWithoutStack(format, ...args) {
12
- return lowPriorityWarningWWW(false, format, ...args);
13
-}
packages/shared/forks/warningWithoutStack.www.js
deleted
-13
@@ -1,13 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-// This refers to a WWW module.
9
-const warningWWW = require('warning');
10
-
11
-export default function warningWithoutStack(format, ...args) {
12
- return warningWWW(false, format, ...args);
13
-}
packages/shared/getComponentName.js
+1
-2
@@ -9,7 +9,6 @@
9
10
import type {LazyComponent} from 'shared/ReactLazyComponent';
11
12
-import warning from 'shared/warning';
12
import {
13
REACT_CONTEXT_TYPE,
14
REACT_FORWARD_REF_TYPE,
@@ -44,7 +43,7 @@ function getComponentName(type: mixed): string | null {
43
}
44
if (__DEV__) {
45
if (typeof (type: any).tag === 'number') {
47
- warning(
46
+ console.error(
47
'Received an unexpected object in getComponentName(). ' +
48
'This is likely a bug in React. Please file an issue.',
49
);
packages/shared/lowPriorityWarning.js
deleted
-43
@@ -1,43 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-import lowPriorityWarningWithoutStack from 'shared/lowPriorityWarningWithoutStack';
9
-import ReactSharedInternals from 'shared/ReactSharedInternals';
10
-
11
-/**
12
- * Similar to invariant but only logs a warning if the condition is not met.
13
- * This can be used to log issues in development environments in critical
14
- * paths. Removing the logging code for production environments will keep the
15
- * same logic and follow the same code paths.
16
- */
17
-
18
-let lowPriorityWarning = lowPriorityWarningWithoutStack;
19
-
20
-if (__DEV__) {
21
- lowPriorityWarning = function(format, ...args) {
22
- let finalFormat = format;
23
- let finalArgs = args;
24
-
25
- const hasExistingStack =
26
- args.length > 0 &&
27
- typeof args[args.length - 1] === 'string' &&
28
- args[args.length - 1].indexOf('\n in') === 0;
29
-
30
- if (!hasExistingStack) {
31
- const ReactDebugCurrentFrame =
32
- ReactSharedInternals.ReactDebugCurrentFrame;
33
- const stack = ReactDebugCurrentFrame.getStackAddendum();
34
- finalFormat += '%s';
35
- finalArgs.push(stack);
36
- }
37
-
38
- // eslint-disable-next-line react-internal/warning-args
39
- lowPriorityWarningWithoutStack(finalFormat, ...finalArgs);
40
- };
41
-}
42
-
43
-export default lowPriorityWarning;
packages/shared/lowPriorityWarningWithoutStack.js
deleted
-51
@@ -1,51 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-/**
9
- * Forked from fbjs/warning:
10
- * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
11
- *
12
- * Only change is we use console.warn instead of console.error,
13
- * and do nothing when 'console' is not supported.
14
- * This really simplifies the code.
15
- * ---
16
- * Similar to invariant but only logs a warning if the condition is not met.
17
- * This can be used to log issues in development environments in critical
18
- * paths. Removing the logging code for production environments will keep the
19
- * same logic and follow the same code paths.
20
- */
21
-
22
-let lowPriorityWarningWithoutStack = function() {};
23
-
24
-if (__DEV__) {
25
- const printWarning = function(format, ...args) {
26
- let argIndex = 0;
27
- const message = 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
28
- if (typeof console !== 'undefined') {
29
- console.warn(message);
30
- }
31
- try {
32
- // --- Welcome to debugging React ---
33
- // This error was thrown as a convenience so that you can use this stack
34
- // to find the callsite that caused this warning to fire.
35
- throw new Error(message);
36
- } catch (x) {}
37
- };
38
-
39
- lowPriorityWarningWithoutStack = function(format, ...args) {
40
- if (format === undefined) {
41
- throw new Error(
42
- '`lowPriorityWarningWithoutStack(condition, format, ...args)` requires a warning ' +
43
- 'message argument',
44
- );
45
- }
46
-
47
- printWarning(format, ...args);
48
- };
49
-}
50
-
51
-export default lowPriorityWarningWithoutStack;
packages/shared/warning.js
deleted
-43
@@ -1,43 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-import warningWithoutStack from 'shared/warningWithoutStack';
9
-import ReactSharedInternals from 'shared/ReactSharedInternals';
10
-
11
-/**
12
- * Similar to invariant but only logs a warning if the condition is not met.
13
- * This can be used to log issues in development environments in critical
14
- * paths. Removing the logging code for production environments will keep the
15
- * same logic and follow the same code paths.
16
- */
17
-
18
-let warning = warningWithoutStack;
19
-
20
-if (__DEV__) {
21
- warning = function(format, ...args) {
22
- let finalFormat = format;
23
- let finalArgs = args;
24
-
25
- const hasExistingStack =
26
- args.length > 0 &&
27
- typeof args[args.length - 1] === 'string' &&
28
- args[args.length - 1].indexOf('\n in') === 0;
29
-
30
- if (!hasExistingStack) {
31
- const ReactDebugCurrentFrame =
32
- ReactSharedInternals.ReactDebugCurrentFrame;
33
- const stack = ReactDebugCurrentFrame.getStackAddendum();
34
- finalFormat += '%s';
35
- finalArgs.push(stack);
36
- }
37
-
38
- // eslint-disable-next-line react-internal/warning-args
39
- warningWithoutStack(finalFormat, ...finalArgs);
40
- };
41
-}
42
-
43
-export default warning;
packages/shared/warningWithoutStack.js
deleted
-50
@@ -1,50 +0,0 @@
1
-/**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
-/**
9
- * This can be used to log issues in development environments in critical
10
- * paths. Removing the logging code for production environments will keep the
11
- * same logic and follow the same code paths.
12
- */
13
-
14
-let warningWithoutStack = () => {};
15
-
16
-if (__DEV__) {
17
- warningWithoutStack = function(format, ...args) {
18
- if (format === undefined) {
19
- throw new Error(
20
- '`warningWithoutStack(condition, format, ...args)` requires a warning ' +
21
- 'message argument',
22
- );
23
- }
24
- if (args.length > 8) {
25
- // Check before the condition to catch violations early.
26
- throw new Error(
27
- 'warningWithoutStack() currently supports at most 8 arguments.',
28
- );
29
- }
30
- if (typeof console !== 'undefined') {
31
- const argsWithFormat = args.map(item => '' + item);
32
- argsWithFormat.unshift('Warning: ' + format);
33
-
34
- // We intentionally don't use spread (or .apply) directly because it
35
- // breaks IE9: https://github.com/facebook/react/issues/13610
36
- Function.prototype.apply.call(console.error, console, argsWithFormat);
37
- }
38
- try {
39
- // --- Welcome to debugging React ---
40
- // This error was thrown as a convenience so that you can use this stack
41
- // to find the callsite that caused this warning to fire.
42
- let argIndex = 0;
43
- const message =
44
- 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
45
- throw new Error(message);
46
- } catch (x) {}
47
- };
48
-}
49
-
50
-export default warningWithoutStack;
scripts/babel/transform-replace-console-calls.js
new
+82
@@ -0,0 +1,82 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+'use strict';
8
+
9
+const helperModuleImports = require('@babel/helper-module-imports');
10
+
11
+module.exports = function replaceConsoleCalls(babel) {
12
+ let consoleErrors = new WeakMap();
13
+ function getConsoleError(path, file) {
14
+ if (!consoleErrors.has(file)) {
15
+ consoleErrors.set(
16
+ file,
17
+ helperModuleImports.addNamed(
18
+ path,
19
+ 'error',
20
+ 'shared/consoleWithStackDev',
21
+ {nameHint: 'consoleError'}
22
+ )
23
+ );
24
+ }
25
+ return babel.types.cloneDeep(consoleErrors.get(file));
26
+ }
27
+
28
+ let consoleWarns = new WeakMap();
29
+ function getConsoleWarn(path, file) {
30
+ if (!consoleWarns.has(file)) {
31
+ consoleWarns.set(
32
+ file,
33
+ helperModuleImports.addNamed(
34
+ path,
35
+ 'warn',
36
+ 'shared/consoleWithStackDev',
37
+ {nameHint: 'consoleWarn'}
38
+ )
39
+ );
40
+ }
41
+ return babel.types.cloneDeep(consoleWarns.get(file));
42
+ }
43
+
44
+ return {
45
+ visitor: {
46
+ CallExpression: function(path, pass) {
47
+ if (path.node.callee.type !== 'MemberExpression') {
48
+ return;
49
+ }
50
+ if (path.node.callee.property.type !== 'Identifier') {
51
+ // Don't process calls like console['error'](...)
52
+ // because they serve as an escape hatch.
53
+ return;
54
+ }
55
+ if (path.get('callee').matchesPattern('console.error')) {
56
+ if (this.opts.shouldError) {
57
+ throw path.buildCodeFrameError(
58
+ "This module has no access to the React object, so it can't " +
59
+ 'use console.error() with automatically appended stack. ' +
60
+ "As a workaround, you can use console['error'] which won't " +
61
+ 'be transformed.'
62
+ );
63
+ }
64
+ const id = getConsoleError(path, pass.file);
65
+ path.node.callee = id;
66
+ }
67
+ if (path.get('callee').matchesPattern('console.warn')) {
68
+ if (this.opts.shouldError) {
69
+ throw path.buildCodeFrameError(
70
+ "This module has no access to the React object, so it can't " +
71
+ 'use console.warn() with automatically appended stack. ' +
72
+ "As a workaround, you can use console['warn'] which won't " +
73
+ 'be transformed.'
74
+ );
75
+ }
76
+ const id = getConsoleWarn(path, pass.file);
77
+ path.node.callee = id;
78
+ }
79
+ },
80
+ },
81
+ };
82
+};
scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
+64
-47
@@ -18,28 +18,35 @@ ruleTester.run('no-production-logging', rule, {
18
{
19
code: `
20
if (__DEV__) {
21
- warning(test, 'Oh no');
21
+ console.error('Oh no');
22
}
23
`,
24
},
25
{
26
code: `
27
if (__DEV__) {
28
- warningWithoutStack(test, 'Oh no');
28
+ console.error('Hello %s', foo)
29
}
30
`,
31
},
32
{
33
code: `
34
if (__DEV__) {
35
- lowPriorityWarning(test, 'Oh no');
35
+ console.error('Hello %s %s', foo, bar)
36
}
37
`,
38
},
39
{
40
code: `
41
if (__DEV__) {
42
- lowPriorityWarningWithoutStack(test, 'Oh no');
42
+ console.warn('Oh no');
43
+ }
44
+ `,
45
+ },
46
+ {
47
+ code: `
48
+ if (__DEV__) {
49
+ console.warn('Oh no');
50
}
51
`,
52
},
@@ -49,7 +56,7 @@ ruleTester.run('no-production-logging', rule, {
56
if (__DEV__) {
57
if (potato) {
58
while (true) {
52
- warning(test, 'Oh no');
59
+ console.error('Oh no');
60
}
61
}
62
}`,
@@ -61,7 +68,7 @@ ruleTester.run('no-production-logging', rule, {
68
f = function() {
69
if (potato) {
70
while (true) {
64
- warning(test, 'Oh no');
71
+ console.error('Oh no');
72
}
73
}
74
};
@@ -88,116 +95,102 @@ ruleTester.run('no-production-logging', rule, {
95
if (foo) {
96
if (__DEV__) {
97
} else {
91
- warning(test, 'Oh no');
98
+ console.error('Oh no');
99
}
100
}
101
}`,
102
},
96
- ],
97
- invalid: [
98
- {
99
- code: 'warning(test);',
100
- errors: [
101
- {
102
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
103
- },
104
- ],
105
- },
106
- {
107
- code: 'warningWithoutStack(test)',
108
- errors: [
109
- {
110
- message: `Wrap warningWithoutStack() in an "if (__DEV__) {}" check`,
111
- },
112
- ],
113
- },
103
{
104
+ // This is an escape hatch that makes it fire in production.
105
code: `
116
- if (potato) {
117
- warningWithoutStack(test);
118
- }
106
+ console['error']('Oh no');
107
`,
108
+ },
109
+ ],
110
+ invalid: [
111
+ {
112
+ code: "console.error('Oh no');",
113
errors: [
114
{
122
- message: `Wrap warningWithoutStack() in an "if (__DEV__) {}" check`,
115
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
116
},
117
],
118
},
119
{
127
- code: 'lowPriorityWarning(test);',
120
+ code: "console.warn('Oh no');",
121
errors: [
122
{
130
- message: `Wrap lowPriorityWarning() in an "if (__DEV__) {}" check`,
123
+ message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
124
},
125
],
126
},
127
{
135
- code: 'lowPriorityWarningWithoutStack(test)',
128
+ code: "console.warn('Oh no')",
129
errors: [
130
{
138
- message: `Wrap lowPriorityWarningWithoutStack() in an "if (__DEV__) {}" check`,
131
+ message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
132
},
133
],
134
},
135
{
136
code: `
137
if (potato) {
145
- lowPriorityWarningWithoutStack(test);
138
+ console.warn('Oh no');
139
}
140
`,
141
errors: [
142
{
150
- message: `Wrap lowPriorityWarningWithoutStack() in an "if (__DEV__) {}" check`,
143
+ message: `Wrap console.warn() in an "if (__DEV__) {}" check`,
144
},
145
],
146
},
147
{
148
code: `
149
if (__DEV__ || potato && true) {
157
- warning(test);
150
+ console.error('Oh no');
151
}
152
`,
153
errors: [
154
{
162
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
155
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
156
},
157
],
158
},
159
{
160
code: `
161
if (banana && __DEV__ && potato && kitten) {
169
- warning(test);
162
+ console.error('Oh no');
163
}
164
`,
165
// Technically this code is valid but we prefer
166
// explicit standalone __DEV__ blocks that stand out.
167
errors: [
168
{
176
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
169
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
170
},
171
],
172
},
173
{
174
code: `
175
if (!__DEV__) {
183
- warning(test);
176
+ console.error('Oh no');
177
}
178
`,
179
errors: [
180
{
188
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
181
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
182
},
183
],
184
},
185
{
186
code: `
187
if (foo || x && __DEV__) {
195
- warning(test);
188
+ console.error('Oh no');
189
}
190
`,
191
errors: [
192
{
200
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
193
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
194
},
195
],
196
},
@@ -205,12 +198,12 @@ ruleTester.run('no-production-logging', rule, {
198
code: `
199
if (__DEV__) {
200
} else {
208
- warning(test);
201
+ console.error('Oh no');
202
}
203
`,
204
errors: [
205
{
213
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
206
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
207
},
208
],
209
},
@@ -220,13 +213,37 @@ ruleTester.run('no-production-logging', rule, {
213
} else {
214
if (__DEV__) {
215
} else {
223
- warning(test);
216
+ console.error('Oh no');
217
}
218
}
219
`,
220
errors: [
221
{
229
- message: `Wrap warning() in an "if (__DEV__) {}" check`,
222
+ message: `Wrap console.error() in an "if (__DEV__) {}" check`,
223
+ },
224
+ ],
225
+ },
226
+ {
227
+ code: `
228
+ if (__DEV__) {
229
+ console.log('Oh no');
230
+ }
231
+ `,
232
+ errors: [
233
+ {
234
+ message: 'Unexpected use of console',
235
+ },
236
+ ],
237
+ },
238
+ {
239
+ code: `
240
+ if (__DEV__) {
241
+ console.log.apply(console, 'Oh no');
242
+ }
243
+ `,
244
+ errors: [
245
+ {
246
+ message: 'Unexpected use of console',
247
},
248
],
249
},
scripts/eslint-rules/__tests__/warning-args-test.internal.js
+25
-14
@@ -15,63 +15,74 @@ const ruleTester = new RuleTester();
15
16
ruleTester.run('eslint-rules/warning-args', rule, {
17
valid: [
18
- "warning('hello, world');",
19
- "warning('expected %s, got %s', 42, 24);",
18
+ "console.error('hello, world');",
19
+ "console.error('expected %s, got %s', 42, 24);",
20
'arbitraryFunction(a, b)',
21
],
22
invalid: [
23
{
24
- code: 'warning(null);',
24
+ code: 'console.error(null);',
25
errors: [
26
{
27
- message: 'The first argument to warning must be a string literal',
27
+ message:
28
+ 'The first argument to console.error must be a string literal',
29
},
30
],
31
},
32
{
32
- code: 'var g = 5; warning(g);',
33
+ code: 'console.warn(null);',
34
errors: [
35
{
35
- message: 'The first argument to warning must be a string literal',
36
+ message:
37
+ 'The first argument to console.warn must be a string literal',
38
+ },
39
+ ],
40
+ },
41
+ {
42
+ code: 'var g = 5; console.error(g);',
43
+ errors: [
44
+ {
45
+ message:
46
+ 'The first argument to console.error must be a string literal',
47
},
48
],
49
},
50
{
40
- code: "warning('expected %s, got %s');",
51
+ code: "console.error('expected %s, got %s');",
52
errors: [
53
{
54
message:
44
- 'Expected 3 arguments in call to warning based on the number of ' +
55
+ 'Expected 3 arguments in call to console.error based on the number of ' +
56
'"%s" substitutions, but got 1',
57
},
58
],
59
},
60
{
50
- code: "warning('foo is a bar under foobar', 'junk argument');",
61
+ code: "console.error('foo is a bar under foobar', 'junk argument');",
62
errors: [
63
{
64
message:
54
- 'Expected 1 arguments in call to warning based on the number of ' +
65
+ 'Expected 1 arguments in call to console.error based on the number of ' +
66
'"%s" substitutions, but got 2',
67
},
68
],
69
},
70
{
60
- code: "warning('error!');",
71
+ code: "console.error('error!');",
72
errors: [
73
{
74
message:
64
- 'The warning format should be able to uniquely identify this ' +
75
+ 'The console.error format should be able to uniquely identify this ' +
76
'warning. Please, use a more descriptive format than: error!',
77
},
78
],
79
},
80
{
70
- code: "warning('%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
81
+ code: "console.error('%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
82
errors: [
83
{
84
message:
74
- 'The warning format should be able to uniquely identify this ' +
85
+ 'The console.error format should be able to uniquely identify this ' +
86
'warning. Please, use a more descriptive format than: ' +
87
'%s %s, %s %s: %s (%s)',
88
},
scripts/eslint-rules/no-production-logging.js
+28
-17
@@ -9,13 +9,6 @@
9
10
'use strict';
11
12
-const LOGGER_FN_NAMES = [
13
- 'warning',
14
- 'warningWithoutStack',
15
- 'lowPriorityWarning',
16
- 'lowPriorityWarningWithoutStack',
17
-];
18
-
12
module.exports = function(context) {
13
function isInDEVBlock(node) {
14
let done = false;
@@ -38,12 +31,12 @@ module.exports = function(context) {
31
}
32
}
33
41
- function report(node) {
34
+ function reportWrapInDEV(node) {
35
context.report({
36
node: node,
44
- message: `Wrap {{identifier}}() in an "if (__DEV__) {}" check`,
37
+ message: `Wrap console.{{identifier}}() in an "if (__DEV__) {}" check`,
38
data: {
46
- identifier: node.callee.name,
39
+ identifier: node.property.name,
40
},
41
fix: function(fixer) {
42
return [
@@ -54,18 +47,36 @@ module.exports = function(context) {
47
});
48
}
49
57
- const isLoggerFunctionName = name => LOGGER_FN_NAMES.includes(name);
50
+ function reportUnexpectedConsole(node) {
51
+ context.report({
52
+ node: node,
53
+ message: `Unexpected use of console`,
54
+ });
55
+ }
56
57
return {
58
meta: {
59
fixable: 'code',
60
},
63
- CallExpression: function(node) {
64
- if (!isLoggerFunctionName(node.callee.name)) {
65
- return;
66
- }
67
- if (!isInDEVBlock(node)) {
68
- report(node);
61
+ MemberExpression: function(node) {
62
+ if (
63
+ node.object.type === 'Identifier' &&
64
+ node.object.name === 'console' &&
65
+ node.property.type === 'Identifier'
66
+ ) {
67
+ switch (node.property.name) {
68
+ case 'error':
69
+ case 'warn': {
70
+ if (!isInDEVBlock(node)) {
71
+ reportWrapInDEV(node);
72
+ }
73
+ break;
74
+ }
75
+ default: {
76
+ reportUnexpectedConsole(node);
77
+ break;
78
+ }
79
+ }
80
}
81
},
82
};
scripts/eslint-rules/warning-args.js
+12
-10
@@ -44,17 +44,19 @@ module.exports = function(context) {
44
// This could be a little smarter by checking context.getScope() to see
45
// how warning/invariant was defined.
46
const isWarning =
47
- node.callee.type === 'Identifier' &&
48
- (node.callee.name === 'warning' ||
49
- node.callee.name === 'warningWithoutStack' ||
50
- node.callee.name === 'lowPriorityWarning' ||
51
- node.callee.name === 'lowPriorityWarningWithoutStack');
47
+ node.callee.type === 'MemberExpression' &&
48
+ node.callee.object.type === 'Identifier' &&
49
+ node.callee.object.name === 'console' &&
50
+ node.callee.property.type === 'Identifier' &&
51
+ (node.callee.property.name === 'error' ||
52
+ node.callee.property.name === 'warn');
53
if (!isWarning) {
54
return;
55
}
56
+ const name = 'console.' + node.callee.property.name;
57
if (node.arguments.length < 1) {
58
context.report(node, '{{name}} takes at least one argument', {
57
- name: node.callee.name,
59
+ name,
60
});
61
return;
62
}
@@ -63,7 +65,7 @@ module.exports = function(context) {
65
context.report(
66
node,
67
'The first argument to {{name}} must be a string literal',
66
- {name: node.callee.name}
68
+ {name}
69
);
70
return;
71
}
@@ -71,8 +73,8 @@ module.exports = function(context) {
73
context.report(
74
node,
75
'The {{name}} format should be able to uniquely identify this ' +
74
- '{{name}}. Please, use a more descriptive format than: {{format}}',
75
- {name: node.callee.name, format: format}
76
+ 'warning. Please, use a more descriptive format than: {{format}}',
77
+ {name, format}
78
);
79
return;
80
}
@@ -85,7 +87,7 @@ module.exports = function(context) {
87
'the number of "%s" substitutions, but got {{length}}',
88
{
89
expectedNArgs: expectedNArgs,
88
- name: node.callee.name,
90
+ name,
91
length: node.arguments.length,
92
}
93
);
scripts/jest/preprocessor.js
+14
-7
@@ -16,6 +16,9 @@ const pathToBabel = path.join(
16
const pathToBabelPluginDevWithCode = require.resolve(
17
'../error-codes/transform-error-messages'
18
);
19
+const pathToBabelPluginReplaceConsoleCalls = require.resolve(
20
+ '../babel/transform-replace-console-calls'
21
+);
22
const pathToBabelPluginAsyncToGenerator = require.resolve(
23
'@babel/plugin-transform-async-to-generator'
24
);
@@ -65,18 +68,22 @@ module.exports = {
68
// for test files, we also apply the async-await transform, but we want to
69
// make sure we don't accidentally apply that transform to product code.
70
const isTestFile = !!filePath.match(/\/__tests__\//);
71
+ const testOnlyPlugins = [pathToBabelPluginAsyncToGenerator];
72
+ const sourceOnlyPlugins =
73
+ process.env.NODE_ENV === 'development'
74
+ ? [pathToBabelPluginReplaceConsoleCalls]
75
+ : [];
76
+ const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
77
+ babelOptions.plugins
78
+ );
79
return babel.transform(
80
src,
81
Object.assign(
82
{filename: path.relative(process.cwd(), filePath)},
83
babelOptions,
73
- isTestFile
74
- ? {
75
- plugins: [pathToBabelPluginAsyncToGenerator].concat(
76
- babelOptions.plugins
77
- ),
78
- }
79
- : {}
84
+ {
85
+ plugins,
86
+ }
87
)
88
);
89
}
scripts/print-warnings/print-warnings.js
+10
-7
@@ -51,13 +51,16 @@ function transform(file, enc, cb) {
51
exit: function(astPath) {
52
const callee = astPath.get('callee');
53
if (
54
- callee.isIdentifier({name: 'warning'}) ||
55
- callee.isIdentifier({name: 'warningWithoutStack'}) ||
56
- callee.isIdentifier({name: 'lowPriorityWarning'}) ||
57
- callee.isIdentifier({name: 'lowPriorityWarningWithoutStack'})
54
+ callee.matchesPattern('console.warn') ||
55
+ callee.matchesPattern('console.error')
56
) {
57
const node = astPath.node;
60
-
58
+ if (node.callee.type !== 'MemberExpression') {
59
+ return;
60
+ }
61
+ if (node.callee.property.type !== 'Identifier') {
62
+ return;
63
+ }
64
// warning messages can be concatenated (`+`) at runtime, so here's
65
// a trivial partial evaluator that interprets the literal value
66
try {
@@ -82,8 +85,8 @@ function transform(file, enc, cb) {
85
86
gs([
87
'packages/**/*.js',
85
- '!packages/shared/warning.js',
86
- '!packages/shared/lowPriorityWarning.js',
88
+ '!packages/*/npm/**/*.js',
89
+ '!packages/shared/consoleWithStackDev.js',
90
'!packages/react-devtools*/**/*.js',
91
'!**/__tests__/**/*.js',
92
'!**/__mocks__/**/*.js',
scripts/rollup/build.js
+29
-2
@@ -107,12 +107,31 @@ const closureOptions = {
107
rewrite_polyfills: false,
108
};
109
110
-function getBabelConfig(updateBabelOptions, bundleType, filename) {
110
+function getBabelConfig(
111
+ updateBabelOptions,
112
+ bundleType,
113
+ packageName,
114
+ externals,
115
+ isDevelopment
116
+) {
117
+ const canAccessReactObject =
118
+ packageName === 'react' || externals.indexOf('react') !== -1;
119
let options = {
120
exclude: '/**/node_modules/**',
121
presets: [],
122
plugins: [],
123
};
124
+ if (isDevelopment) {
125
+ options.plugins.push(
126
+ // Turn console.error/warn() into a custom wrapper
127
+ [
128
+ require('../babel/transform-replace-console-calls'),
129
+ {
130
+ shouldError: !canAccessReactObject,
131
+ },
132
+ ]
133
+ );
134
+ }
135
if (updateBabelOptions) {
136
options = updateBabelOptions(options);
137
}
@@ -352,7 +371,15 @@ function getPlugins(
371
exclude: 'node_modules/**/*',
372
}),
373
// Compile to ES5.
355
- babel(getBabelConfig(updateBabelOptions, bundleType)),
374
+ babel(
375
+ getBabelConfig(
376
+ updateBabelOptions,
377
+ bundleType,
378
+ packageName,
379
+ externals,
380
+ !isProduction
381
+ )
382
+ ),
383
// Remove 'use strict' from individual source files.
384
{
385
transform(source) {
scripts/rollup/forks.js
+3
-20
@@ -57,9 +57,7 @@ const forks = Object.freeze({
57
'from "' +
58
entry +
59
'" because it does not declare "react" in the package ' +
60
- 'dependencies or peerDependencies. For example, this can happen if you use ' +
61
- 'warning() instead of warningWithoutStack() in a package that does not ' +
62
- 'depend on React.'
60
+ 'dependencies or peerDependencies.'
61
);
62
}
63
return null;
@@ -180,25 +178,10 @@ const forks = Object.freeze({
178
return 'scheduler/src/forks/SchedulerHostConfig.default';
179
},
180
183
- // This logic is forked on www to ignore some warnings.
184
- 'shared/lowPriorityWarningWithoutStack': (bundleType, entry) => {
181
+ 'shared/consoleWithStackDev': (bundleType, entry) => {
182
switch (bundleType) {
183
case FB_WWW_DEV:
187
- case FB_WWW_PROD:
188
- case FB_WWW_PROFILING:
189
- return 'shared/forks/lowPriorityWarningWithoutStack.www.js';
190
- default:
191
- return null;
192
- }
193
- },
194
-
195
- // This logic is forked on www to ignore some warnings.
196
- 'shared/warningWithoutStack': (bundleType, entry) => {
197
- switch (bundleType) {
198
- case FB_WWW_DEV:
199
- case FB_WWW_PROD:
200
- case FB_WWW_PROFILING:
201
- return 'shared/forks/warningWithoutStack.www.js';
184
+ return 'shared/forks/consoleWithStackDev.www.js';
185
default:
186
return null;
187
}
scripts/shared/evalToString.js
+1
@@ -11,6 +11,7 @@
11
function evalToString(ast /* : Object */) /* : string */ {
12
switch (ast.type) {
13
case 'StringLiteral':
14
+ case 'Literal': // ESLint
15
return ast.value;
16
case 'BinaryExpression': // `+`
17
if (ast.operator !== '+') {