facebook · bvaughn · Jan 3, 2019 · Jan 3, 2019 · Jan 3, 2019 · Jan 3, 2019
diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
@@ -358,9 +358,14 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
           case CONTEXT_CONSUMER_SYMBOL_STRING:
             nodeType = 'Special';
             props = fiber.memoizedProps;
+
+            // 16.3-16.5 read from "type" because the Consumer is the actual context object.
+            // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
+            const resolvedContext = fiber.type._context || fiber.type;
+
             // NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'
             // If you change the name, figure out a more resilient way to detect it.
-            name = `${fiber.type.displayName || 'Context'}.Consumer`;
+            name = `${resolvedContext.displayName || 'Context'}.Consumer`;
             children = [];
             break;
           case STRICT_MODE_NUMBER:

diff --git a/test/regression/16.7.html b/test/regression/16.7.html
@@ -11,11 +11,11 @@
       __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     </script>
 
-    <script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
-    <script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
-    <script src="https://unpkg.com/react@next/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.7/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@2.0.0-alpha.1/umd/react-cache.development.js"></script>
 
     <!-- Don't use this in production: -->
     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

diff --git a/test/regression/index.html b/test/regression/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <iframe src="canary.html"></iframe>
+    <iframe src="next.html"></iframe>
     <iframe src="16.7.html"></iframe>
     <iframe src="16.6.html"></iframe>
     <iframe src="16.5.html"></iframe>

diff --git a/test/regression/next.html b/test/regression/next.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>React next</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <script type="text/javascript">
+      // Enable DevTools to inspect React inside of an <iframe>
+      // This must run before React is loaded
+      __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    </script>
+
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
+    <script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
+    <script src="https://unpkg.com/react@next/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react-cache@next/umd/react-cache.development.js"></script>
+
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root">
+      If you are seeing this message, you are likely viewing this file using the <code>file</code> protocol which does not support cross origin requests.
+      <br/><br/>
+      Use a web server like <code>serve</code> instead:
+      <br/><br/>
+      <code>npm install -g pushstate-server</code><br/>
+      <code>pushstate-server .</code><br/>
+      <code>open <a href="http://localhost:9000/test/regression/next.html">http://localhost:9000/test/regression/next.html</a></code>
+    </div>
+
+    <script src="shared.js" type="text/babel"></script>
+
+    <!--
+      This is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+      Learn more at https://reactjs.org/docs/getting-started.html
+    -->
+  </body>
+</html>
diff --git a/test/regression/shared.js b/test/regression/shared.js
@@ -35,24 +35,26 @@ switch (major) {
   case 16:
     switch (minor) {
       case 7:
-        // Hooks
-        function Hooks() {
-          const [count, setCount] = React.useState(0);
-          const incrementCount = React.useCallback(
-            () => setCount(count + 1),
-            [count]
-          );
-          return (
-            <div>
-              count: {count} <button onClick={incrementCount}>increment</button>
-            </div>
+        if (typeof React.useState === 'function') {
+          // Hooks
+          function Hooks() {
+            const [count, setCount] = React.useState(0);
+            const incrementCount = React.useCallback(
+              () => setCount(count + 1),
+              [count]
+            );
+            return (
+              <div>
+                count: {count} <button onClick={incrementCount}>increment</button>
+              </div>
+            );
+          }
+          apps.push(
+            <Feature key="Hooks" label="Hooks" version="16.7+">
+              <Hooks />
+            </Feature>
           );
         }
-        apps.push(
-          <Feature key="Hooks" label="Hooks" version="16.7+">
-            <Hooks />
-          </Feature>
-        );
       case 6:
         // memo
         function LabelComponent({label}) {
@@ -279,6 +281,12 @@ function TopLevelWrapperForDevTools({ version }) {
         React canary <a href={`https://github.com/facebook/react/commit/${commitSha}`}>{commitSha}</a>
       </h1>
     );
+  } else if (version.includes('alpha')) {
+    header = (
+      <h1>
+        React next
+      </h1>
+    );
   }
 
   return (