React 16

[jimthedev]

Perhaps it is just my app but it seems not to work with my React 16.

I did not have tail logging on when React Sight crashed but the panel just seems to stay empty.

[bvaughn]

FWIW I think I saw a similar issue when trying it out on https://bvaughn.github.io/react-virtualized/

[ro-savage]

Same issue. Using React 16 (haven't tried with React 15)

Cannot find imported React library

[davidcsally]

This bug is at the top of our list and we are investigating why for some R16 apps why the mount point is not being detected

[nilshartmann]

@davidcsally If there is anything i can do to support you fixing the bug, please let me know.

[greggb]

@davidcsally - Some additional data from my logs:

chrome console error

installHook.js:202 Uncaught TypeError: Cannot read property 'current' of undefined
    at traverse16 (installHook.js:202)
    at window.addEventListener (installHook.js:188)
traverse16 @ installHook.js:202
window.addEventListener @ installHook.js:188

installhook.js

/**
 * Traversal Method for React 16
 *
 * If the application is using React Fiber, run this method to crawl the virtual DOM.
 * First, find the React mount point, then walk through each node
 * For each node, grab the state and props if present
 *
 * */
function traverse16(components = []) {
  // console.log('#traverse16 vDOM: ', fiberDOM);
  recur16(fiberDOM.current.stateNode.current, components); // <--- installHook.js:202 Uncaught TypeError: Cannot read property 'current' of undefined
  const data = {
    data: components,
    store,
  };
  data.data = data.data[0].children;
  // console.log('retrieved data --> posting to content-scripts...: ', data)
  window.postMessage(JSON.parse(JSON.stringify(data)), '*');
}

[mattblackdev]

I am working on a React 16 component library bootstrapped with nwb. On my demo app, I get the same screen on React-Sight as shown above But I have a different error than @greggb:

Warning: React DevTools encountered an error: TypeError: Cannot read property 'constructor' of undefined
printWarning | @ | warning.js:33

immediately followed by:

Uncaught TypeError: Cannot read property 'constructor' of undefined
    at keys.forEach (installHook.js:285)
    at Array.forEach (<anonymous>)
    at props16 (installHook.js:269)
    at recur16 (installHook.js:247)
    at recur16 (installHook.js:257)
    ...

installHook.js:

/** TODO - get objects to work
 *
 * Parse the props for React 16 components
 */
function props16(node) {
  const props = {};
  const keys = Object.keys(node.memoizedProps);

  keys.forEach((prop) => {
    if (typeof node.memoizedProps[prop] === 'function') {
      props[prop] = parseFunction(node.memoizedProps[prop]);
    }
    // TODO - get these objects to work, almost always children property
    else if (typeof node.memoizedProps[prop] === 'object') {
      props[prop] = 'object*';
      // console.log('obj: ', node.memoizedProps[prop]);
      // if (node.memoizedProps[prop] && Object.keys(node.memoizedProps[prop]).length) {
      //   const keys = Object.keys(node.memoizedProps[props]);
      //   console.log('keys', keys)
      //   props[prop] = keys
      //   props[prop] = parseProps(node.memoizedProps[props]);
      // }
    }
    else if (prop === 'children') {
      props[prop] = new node.memoizedProps[prop].constructor; // <--- installHook.js:285 Uncaught TypeError: Cannot read property 'constructor' of undefined
      if (Array.isArray(node.memoizedProps[prop])) {
        node.memoizedProps[prop].forEach((child) => {
          props[prop].push(child && child.type && child.type.name);
        });
      }
      else props[prop].name = node.memoizedProps[prop].type && node.memoizedProps[prop].type.name;
    }
    else props[prop] = node.memoizedProps[prop];
  });
  return props;
}

cc @davidcsally