infi-pc / locatorjs

https://www.locatorjs.com
1.41k stars 67 forks source link

Bug: `No source info found for this element` when using Locator and React dev tool #98

Closed trunghieu0207 closed 1 year ago

trunghieu0207 commented 1 year ago

Where the bug happens

your browser

Chrome/Edge

Describe the bug

I used the locatorjs with React dev tool extension and then click on the element, and the error display:

image

To reproduce

My custom project uses the webpack to build React. I not using React app You can reproduce the bug in the steps below:

  1. Config in root file using locatorjs. Ex: Index.tsx
    
    import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") { setupLocatorUI(); }

2. Install React dev tool
3. Try clicking on the component

### Additional information

# [Reason]
I checked the source and discovered the check condition is in the wrong order in `getElementInfo` function.
```javascript
return reactAdapter.getElementInfo(target) ||  jsxAdapter.getElementInfo(target) || svelteAdapter.getElementInfo(target);

The flow will call the reactAdapter.getElementInfo(target) and it returns null value then flow continues to call jsxAdapter.getElementInfo(target) and it returns the correct value

The flow will call the reactAdapter.getElementInfo(target) and it NOT returns null value then flow cannot call to jsxAdapter.getElementInfo(target) so the value is incorrect.

[Fix]

I changed from

return reactAdapter.getElementInfo(target) ||  jsxAdapter.getElementInfo(target) || svelteAdapter.getElementInfo(target);

to

return jsxAdapter.getElementInfo(target) || reactAdapter.getElementInfo(target) || svelteAdapter.getElementInfo(target);

and it works normally

@infi-pc You can check it and fix it. My English skill is not good, you can ask me anytime if you find it difficult to understand. This is a very useful tool and I want to apply it to my product Thank for you making the tool!

zigsong commented 1 year ago

Is this issue resolved?

infi-pc commented 1 year ago

yes, should be solved

viscous-coder commented 7 months ago

still not worked. I am not using create react app. I build the app using webpack. Screenshot (4) console error:- Screenshot (5) @infi-pc can you please help me to get rid from that problem It is working fine in my other project. But in one project that i build using custom webpack show that error.

zhanglkx commented 5 months ago
image

still has this problem,i use webpack