[BUG] Element Selector in Devtools causing crash through `e.getBoundingClientRect is not a function`

[andrulonis]

Describe the bug

When clicking the Element Selector in the small devtools panel, the page breaks (most likely something undefined is trying to be used) and reports the following:

Steps To Reproduce

1. Install devtools according to the documentation (the manual one).
2. Insert devtools into the app as per the usage.
3. Run the application.
4. Click the Element Selector button in the devtools panel.

Expected behavior

The Element Selector should open and allow me to select items on the website etc.

Packages

• @refinedev/cli@2.16.36
• @refinedev/core@4.53.0
• @refinedev/devtools@1.2.6
• @refinedev/inferencer@4.6.2
• @refinedev/kbar@1.3.10
• @refinedev/mui@5.15.1
• @refinedev/react-hook-form@4.8.18
• @refinedev/react-router-v6@4.5.9
• @refinedev/simple-rest@5.0.6

Additional Context

I have tried Google Chrome (127.0.6533.88), also in incognito mode and Firefox (128.0.2). Ran locally on localhost:5173 (so the default from vite). node v17.9.1 npm v8.11.0

[aliemir]

Sorry for the issue @andrulonis. I've tested out some elements to repro this issue but no luck 🤔 We're already checking for the element to be defined properly before listing and I don't see any reasons for getBoundingClientRect to be undefined. Can you check commenting and uncommenting your elements to see on which component this fails or check if its same for all components 🤔

We can implement some safety features to avoid this error but still I'm wondering what causes this issue 😅

Let me know if you can spare some time to test your elements 🙏

[andrulonis]

@aliemir I think I have narrowed it down quite well now for you. My findings are that the issue lays in the <ThemedLayoutV2> (or deeper). I use it in the following snippet like so (right inside the <Refine> and under a few Providers:

<Routes>                       
  <Route
    element={
      <Authenticated
          key={"login-check"}
        fallback={
          <CatchAllNavigate to="/login" />
        }
        loading={<LinearLoader />}
      >
        <ThemedLayoutV2
            Header={() => <Header />}
            Sider={() => <Sider /> }
          >
            <Outlet />
          </ThemedLayoutV2>
      </Authenticated>
    }
>
...
   </Route>
</Routes>

When commenting out the <ThemedLayoutV2> part, the error does not occur (but also the element inspector does not seem to do anthing, not sure if thats purely because the website is the empty). And even having just <ThemedLayoutV2/> without the params or Outlet inside, the original error occurs. I hope this is useful in some form, if more research into this is needed then let me know.

[aliemir]

Hey @andrulonis had a little digging in the devtools and reproduced the issue using @refinedev/mui. Turns our <Authenticated /> component was the one causing all the troubles. We're using all the components that uses Refine's hooks and look for appropriate HTML nodes to show them in the element selector (X-ray view). <Authenticated /> was failing to locate a proper React Fiber with an HTML element it was using a fiber that has no proper HTML elements linked to it.

I've prepared a PR to address this issue by updating the element searching and provided a fallback just in case it fails. This resolves your issue and hopefully any future problems this might cause.

[andrulonis]

@aliemir thank you very much for the PR and also for the explanation on what went wrong. Do you maybe have an idea when and in which version this will be included?

[aliemir]

The fix is published with the latest release 🚀