_debougSource property is missing on some react fiber nodes

66 Views Asked by At

I'm trying to get the line and column of each component declared in the codebase (React web app).

The problem is when I try to get the _debugSource property on some Mantine imported component (selecting the Mantine button on the DOM, then storing it as a global variable, and accessing the corresponding React Fiber node), I get a null value on the _debugSource attribute. So my initial solution was to access the return attribute recursively until I find a Fiber node containing the _debugSource property with a non-null value. I'm getting an object containing the column and line numbers, but when I check the codebase, I don't find the component on that particular line and column (the file is correct, but the component was on line 205 instead of 242).

the source map is enabled in my vite config file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig(({ mode }) => {
  const config = {
    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
    mode: 'development',
    define: {
      __VITE_DEV_SERVER__: true, // Enable Vite dev server in production
    },
    build:{
      rollupOptions: {
        external: ['@mui/icons-material'] // Mark @mui/icons-material as external
      },
      sourcemap: true,
    }
  };

  return config;
});

0

There are 0 best solutions below