Code Monkey home page Code Monkey logo

Comments (6)

ro-savage avatar ro-savage commented on May 22, 2024 4

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

Cannot find imported React library

from react-sight.

davidcsally avatar davidcsally commented on May 22, 2024 1

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

from react-sight.

nilshartmann avatar nilshartmann commented on May 22, 2024 1

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

from react-sight.

greggb avatar greggb commented on May 22, 2024 1

@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)), '*');
}

from react-sight.

mattblackdev avatar mattblackdev commented on May 22, 2024 1

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

from react-sight.

bvaughn avatar bvaughn commented on May 22, 2024

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

screen shot 2017-10-13 at 12 34 47 pm

from react-sight.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.