Add more info to invalid hook call error message (facebook#15139)

* Add more info to invalid hook call error message * Update other renderers + change call to action * Update related tests for new hooks error message * Fix lint errors
gaearon · Mar 22, 2019 · fb572af · fb572af
1 parent a0a2e84
commit fb572af
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 20 deletions.
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
@@ -239,7 +239,12 @@ describe('ReactHooksInspection', () => {
     expect(() => {
       ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
     }).toThrow(
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
 
     expect(getterCalls).toBe(1);

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -419,7 +419,12 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(() => {
       ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
     }).toThrow(
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
 
     expect(getterCalls).toBe(1);

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js
@@ -144,7 +144,12 @@ describe('ReactDOMServerHooks', () => {
 
         return render(<Counter />);
       },
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
 
     itRenders('multiple times when an updater is called', async render => {
@@ -626,7 +631,12 @@ describe('ReactDOMServerHooks', () => {
 
         return render(<Counter />);
       },
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
   });
 

diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -57,8 +57,12 @@ let currentHookNameInDev: ?string;
 function resolveCurrentlyRenderingComponent(): Object {
   invariant(
     currentlyRenderingComponent !== null,
-    'Hooks can only be called inside the body of a function component. ' +
-      '(https://fb.me/react-invalid-hook-call)',
+    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+      ' one of the following reasons:\n' +
+      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+      '2. You might be breaking the Rules of Hooks\n' +
+      '3. You might have more than one copy of React in the same app\n' +
+      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
   );
   if (__DEV__) {
     warning(

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -262,8 +262,12 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 function throwInvalidHookError() {
   invariant(
     false,
-    'Hooks can only be called inside the body of a function component. ' +
-      '(https://fb.me/react-invalid-hook-call)',
+    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+      ' one of the following reasons:\n' +
+      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+      '2. You might be breaking the Rules of Hooks\n' +
+      '3. You might have more than one copy of React in the same app\n' +
+      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
   );
 }
 

diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -44,7 +44,12 @@ describe('ReactHooks', () => {
       expect(() => {
         ReactTestRenderer.create(<Example />);
       }).toThrow(
-        'Hooks can only be called inside the body of a function component.',
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen' +
+          ' for one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
       );
     });
   }
@@ -805,15 +810,30 @@ describe('ReactHooks', () => {
     const root = ReactTestRenderer.create(<MemoApp />);
     // trying to render again should trigger comparison and throw
     expect(() => root.update(<MemoApp />)).toThrow(
-      'Hooks can only be called inside the body of a function component',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
     // the next round, it does a fresh mount, so should render
     expect(() => root.update(<MemoApp />)).not.toThrow(
-      'Hooks can only be called inside the body of a function component',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
     // and then again, fail
     expect(() => root.update(<MemoApp />)).toThrow(
-      'Hooks can only be called inside the body of a function component',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
   });
 

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
@@ -108,7 +108,12 @@ describe('ReactHooksWithNoopRenderer', () => {
     ReactNoop.render(<BadCounter />);
 
     expect(() => ReactNoop.flush()).toThrow(
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
 
     // Confirm that a subsequent hook works properly.
@@ -131,7 +136,12 @@ describe('ReactHooksWithNoopRenderer', () => {
     }
     ReactNoop.render(<Counter />);
     expect(() => ReactNoop.flush()).toThrow(
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
 
     // Confirm that a subsequent hook works properly.
@@ -145,7 +155,12 @@ describe('ReactHooksWithNoopRenderer', () => {
 
   it('throws when called outside the render phase', () => {
     expect(() => useState(0)).toThrow(
-      'Hooks can only be called inside the body of a function component.',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
   });
 

diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js
@@ -1514,7 +1514,12 @@ describe('ReactNewContext', () => {
       }
       ReactNoop.render(<Foo />);
       expect(ReactNoop.flush).toThrow(
-        'Hooks can only be called inside the body of a function component.',
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen' +
+          ' for one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
       );
     });
 

diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -218,8 +218,12 @@ class ReactShallowRenderer {
   _validateCurrentlyRenderingComponent() {
     invariant(
       this._rendering && !this._instance,
-      'Hooks can only be called inside the body of a function component. ' +
-        '(https://fb.me/react-invalid-hook-call)',
+      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+        ' one of the following reasons:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
     );
   }
 

diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
@@ -17,8 +17,12 @@ function resolveDispatcher() {
   const dispatcher = ReactCurrentDispatcher.current;
   invariant(
     dispatcher !== null,
-    'Hooks can only be called inside the body of a function component. ' +
-      '(https://fb.me/react-invalid-hook-call)',
+    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+      ' one of the following reasons:\n' +
+      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+      '2. You might be breaking the Rules of Hooks\n' +
+      '3. You might have more than one copy of React in the same app\n' +
+      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
   );
   return dispatcher;
 }