Warning: React instrumentation encountered an error: Error: Could not find ID for Fiber "SvgCheck"

Question

I have a state and depending if it's true or false I show a different svg icon, although I noticed switching between the state caused this error to appear: Warning: React instrumentation encountered an error: Error: Could not find ID for Fiber "SvgCheck", I have my icons in a public/static/icons, all svg files are here and then I have index.js where I import those icons and then export like

import Check from './check.svg'
export {
...
Check,
}

Then I am importing them as:

import {Check} from "public/static/icons"

and I use them as <Check/>

to allow me to use it like this I am using svgr plugin in next.config.js I have:

module.exports = {
    webpack(config) {
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
  
      return config;
    }
  };

I only started getting this warning recently and never saw it before.

Answer 1

Hi 👋 I'm the author and maintainer of React DevTools.

The error you're asking about is related to the interaction between React DevTools and React Refresh.

These bugs have existed for a while, but recently became more visible because of an intentional change to surface errors earlier (21426) so that bug reports would include the original error and not a downstream error (which is much harder to attribute and fix).

I've been fixing instances of the DevTools+Refresh for the last week or two (21536, 21516, 21523) but I haven't gotten them all yet. Sorry.

If you have a way to reproduce the bug you're seeing, please tell me about it on GitHub (with code and instructions) so that I can hopefully fix it for you. I don't really check Stack Overflow for this sort of thing.