From 2a14db68fcecce26ae409cd9655b5e33e43fbb07 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 13 Aug 2019 22:51:07 +0100 Subject: [PATCH] Make component stack last argument for deprecation warnings --- .../ReactDeprecationWarnings-test.internal.js | 10 +++---- .../src/__tests__/findDOMNode-test.js | 20 ++++++------- .../__tests__/ReactFabric-test.internal.js | 20 ++++++------- .../ReactNativeMount-test.internal.js | 20 ++++++------- .../react-reconciler/src/ReactChildFiber.js | 14 ++++------ .../src/ReactFiberReconciler.js | 14 ++++------ .../src/ReactStrictModeWarnings.js | 8 +++--- .../ReactIncremental-test.internal.js | 28 +++++++++---------- ...tIncrementalErrorHandling-test.internal.js | 4 +-- .../ReactNewContext-test.internal.js | 2 +- .../ReactStrictMode-test.internal.js | 28 +++++++++---------- 11 files changed, 75 insertions(+), 93 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js index 9d29ef5a34c6d..ce89d56e23fbf 100644 --- a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js @@ -64,12 +64,10 @@ describe('ReactDeprecationWarnings', () => { expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( 'Warning: Component "Component" contains the string ref "refComponent". ' + 'Support for string refs will be removed in a future major release. ' + - 'We recommend using useRef() or createRef() instead.' + - '\n\n' + - ' in Component (at **)' + - '\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref' + + '\n in Component (at **)', ); }); }); diff --git a/packages/react-dom/src/__tests__/findDOMNode-test.js b/packages/react-dom/src/__tests__/findDOMNode-test.js index 2be58e0c67115..3dbad1001a861 100644 --- a/packages/react-dom/src/__tests__/findDOMNode-test.js +++ b/packages/react-dom/src/__tests__/findDOMNode-test.js @@ -120,14 +120,12 @@ describe('findDOMNode', () => { expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in div (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child); }); @@ -152,14 +150,12 @@ describe('findDOMNode', () => { expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in div (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child); }); diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index e13718ad7374a..cbfff45d4bf45 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -885,14 +885,12 @@ describe('ReactFabric', () => { expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child._nativeTag); }); @@ -923,14 +921,12 @@ describe('ReactFabric', () => { expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child._nativeTag); }); diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index ce51af605f4b5..a22d9ee7e86c1 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -669,14 +669,12 @@ describe('ReactNative', () => { expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child._nativeTag); }); @@ -707,14 +705,12 @@ describe('ReactNative', () => { expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child._nativeTag); }); diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index af113294a946a..fb94fe1df1466 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -125,10 +125,9 @@ function coerceRef( false, 'Component "%s" contains the string ref "%s". Support for string refs ' + 'will be removed in a future major release. We recommend using ' + - 'useRef() or createRef() instead.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-string-ref', + 'useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref%s', componentName, mixedRef, getStackByFiberInDevAndProd(returnFiber), @@ -138,10 +137,9 @@ function coerceRef( false, 'A string ref, "%s", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-string-ref', + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref%s', mixedRef, getStackByFiberInDevAndProd(returnFiber), ); diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js index dc62033d9389d..81c8418263d65 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.js @@ -261,10 +261,9 @@ function findHostInstanceWithWarning( false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, @@ -275,10 +274,9 @@ function findHostInstanceWithWarning( false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js index 87d19201934aa..6f9c34311340e 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js @@ -346,14 +346,14 @@ if (__DEV__) { warningWithoutStack( false, - 'Legacy context API has been detected within a strict-mode tree: %s' + + 'Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: %s' + - '\n\nLearn more about this warning here:' + - '\nhttps://fb.me/react-legacy-context', - strictRootComponentStack, + '\n\nLearn more about this warning here: https://fb.me/react-legacy-context' + + '%s', sortedNames, + strictRootComponentStack, ); }, ); diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js index 3854a56fabd52..d4448cf8c0ec6 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js @@ -1913,7 +1913,7 @@ describe('ReactIncremental', () => { 'ShowBoth {"locale":"fr"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowBoth, ShowLocale', @@ -1970,7 +1970,7 @@ describe('ReactIncremental', () => { 'ShowBoth {"locale":"en"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Router, ShowRoute', @@ -2001,7 +2001,7 @@ describe('ReactIncremental', () => { ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Recurse', @@ -2046,7 +2046,7 @@ describe('ReactIncremental', () => { "If you can't use a class try assigning the prototype on the function as a workaround. " + '`Recurse.prototype = React.Component.prototype`. ' + "Don't use an arrow function since it cannot be called with `new` by React.", - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Recurse', @@ -2114,7 +2114,7 @@ describe('ReactIncremental', () => { 'ShowLocale {"locale":"ru"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocale', @@ -2195,7 +2195,7 @@ describe('ReactIncremental', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn', @@ -2289,7 +2289,7 @@ describe('ReactIncremental', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn', @@ -2360,7 +2360,7 @@ describe('ReactIncremental', () => { // Init ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child', @@ -2412,7 +2412,7 @@ describe('ReactIncremental', () => { // Init ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: ContextProvider', @@ -2465,7 +2465,7 @@ describe('ReactIncremental', () => { expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( [ 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended', - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: MyComponent', @@ -2614,7 +2614,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, TopContextProvider', @@ -2678,7 +2678,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', @@ -2751,7 +2751,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', @@ -2834,7 +2834,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js index 66f47b0b41289..9020e3d739cb9 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js @@ -1118,7 +1118,7 @@ describe('ReactIncrementalErrorHandling', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but ' + 'applications using it should migrate to the new version.\n\n' + 'Please update the following components: Connector, Provider', @@ -1621,7 +1621,7 @@ describe('ReactIncrementalErrorHandling', () => { "If you can't use a class try assigning the prototype on the function as a workaround. " + '`Provider.prototype = React.Component.prototype`. ' + "Don't use an arrow function since it cannot be called with `new` by React.", - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but ' + 'applications using it should migrate to the new version.\n\n' + 'Please update the following components: Provider', diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js index 5723ca9937527..b08aa0762df46 100644 --- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js @@ -1196,7 +1196,7 @@ describe('ReactNewContext', () => { expect(() => { expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']); }).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: LegacyProvider', diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js index 085bf94e1c792..8dea81c71d528 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js @@ -693,11 +693,11 @@ Please update the following components: Parent`, }).toWarnDev( 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.\n\n' + + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref\n' + ' in StrictMode (at **)\n' + - ' in OuterComponent (at **)\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + ' in OuterComponent (at **)', ); // Dedup @@ -735,12 +735,12 @@ Please update the following components: Parent`, }).toWarnDev( 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.\n\n' + + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref\n' + ' in InnerComponent (at **)\n' + ' in StrictMode (at **)\n' + - ' in OuterComponent (at **)\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + ' in OuterComponent (at **)', ); // Dedup @@ -813,16 +813,16 @@ Please update the following components: Parent`, expect(() => { rendered = ReactTestRenderer.create(); }).toWarnDev( - 'Warning: Legacy context API has been detected within a strict-mode tree: ' + - '\n in StrictMode (at **)' + - '\n in div (at **)' + - '\n in Root (at **)' + + 'Warning: Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: ' + 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' + - '\n\nLearn more about this warning here:' + - '\nhttps://fb.me/react-legacy-context', + '\n\nLearn more about this warning here: ' + + 'https://fb.me/react-legacy-context' + + '\n in StrictMode (at **)' + + '\n in div (at **)' + + '\n in Root (at **)', ); // Dedupe