From 973496b40ce6fcb84f3df20aa1c73af5bc4db0d4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 20 Aug 2018 16:43:25 +0100
Subject: [PATCH] Fix component name for React.lazy (#13443)

* Fix component name for React.lazy

* Fix lint
---
 .../__tests__/ReactSuspense-test.internal.js  | 24 +++++++++++++++++++
 packages/shared/getComponentName.js           |  8 ++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 0827816b2b..6511d22e60 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -1576,6 +1576,30 @@ describe('ReactSuspense', () => {
         span('C'),
       ]);
     });
+
+    it('includes lazy-loaded component in warning stack', async () => {
+      const LazyFoo = lazy(() => {
+        ReactNoop.yield('Started loading');
+        const Foo = props => (
+          <div>{[<Text text="A" />, <Text text="B" />]}</div>
+        );
+        return Promise.resolve(Foo);
+      });
+
+      ReactNoop.render(
+        <Placeholder fallback={<Text text="Loading..." />}>
+          <LazyFoo />
+        </Placeholder>,
+      );
+      expect(ReactNoop.flush()).toEqual(['Started loading', 'Loading...']);
+      expect(ReactNoop.getChildren()).toEqual([]);
+
+      await LazyFoo;
+      expect(() => {
+        expect(ReactNoop.flush()).toEqual(['A', 'B']);
+      }).toWarnDev('    in Text (at **)\n' + '    in Foo (at **)');
+      expect(ReactNoop.getChildren()).toEqual([div(span('A'), span('B'))]);
+    });
   });
 
   it('does not call lifecycles of a suspended component', async () => {
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index e5b39b33c4..558f00c1a0 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -21,10 +21,7 @@ import {
   REACT_STRICT_MODE_TYPE,
   REACT_PLACEHOLDER_TYPE,
 } from 'shared/ReactSymbols';
-import {
-  getResultFromResolvedThenable,
-  refineResolvedThenable,
-} from 'shared/ReactLazyComponent';
+import {refineResolvedThenable} from 'shared/ReactLazyComponent';
 
 function getComponentName(type: mixed): string | null {
   if (type == null) {
@@ -77,8 +74,7 @@ function getComponentName(type: mixed): string | null {
       const thenable: Thenable<mixed> = (type: any);
       const resolvedThenable = refineResolvedThenable(thenable);
       if (resolvedThenable) {
-        const Component = getResultFromResolvedThenable(resolvedThenable);
-        return getComponentName(Component);
+        return getComponentName(resolvedThenable);
       }
     }
   }