Comments (6)
Same issue. Using React 16 (haven't tried with React 15)
Cannot find imported React library
from react-sight.
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.
@davidcsally If there is anything i can do to support you fixing the bug, please let me know.
from react-sight.
@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.
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.
FWIW I think I saw a similar issue when trying it out on https://bvaughn.github.io/react-virtualized/
from react-sight.
Related Issues (20)
- Cannot read property 'current' of undefined HOT 1
- [Feature Request] Firefox support HOT 7
- Chrome RangError : Maximum call stack size exceeded HOT 5
- Cannot find React HOT 55
- > [Feautre Request] : Adding Support for Preact HOT 1
- TypeError: Cannot convert undefined or null to object (installHook.js) HOT 8
- Cannot find React Triggering a setState() usually fixes this HOT 24
- Chrome extension makes sites with production build unresponsive HOT 5
- Unchecked runtime.lastError: The message port closed before a response was received.
- Chrome Extension link is broken in the documentation HOT 6
- This extension has been turned off as it's been marked unsafe by the Chrome Web Store. HOT 2
- Broken URL for extension @Chrome HOT 2
- Maybe this project requires older node-sass which requires python2?
- feature request: Download as image HOT 2
- The height of the header is too long
- Footer missing HOT 1
- The demo box and the React Sight Box seem to be aligned badly.
- "React Sight" link on reactsight.com is broken HOT 1
- Extenstion not getting installed in firefox and chrome.
- Converting circular structure of JSON HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sight.