Question: Getting error while using React DevTools for React Native app

[SujitKaulavkar]

I am using Flipper to check the performance issue for a React Native project. Whenever I am selecting the React DevTools option, I am getting error on the iOS simulator. Attached screenshot for reference.

I want to check the load time for components. My React Native version is 0.63.4. I am unsure if I need to install package for dev tools.

I found following error in Flipper which says Failed to find globally installed React DevTools.

Help me.

[vincentmegia]

I'm seeing same issue. not relevant but if you want to fix that react dev tools warning do below

npm i react-devtools-inline -g

Environment:

react: 18.0.0 react-native: 0.69.4 react-devtools: 4.25.0

Flipper: 0.162.0

[efstathiosntonas]

I'm having the same issue for a really long time, I gave up using that part of Flipper. I have tried every single combination of solutions available on internet, used resolutions for devtools and devtools-core, installed devtools-inline as mentioned above (flipped the switch to use it), cleared caches, re-install, removed all global npm related packages, downgraded flipper to match the version when 0.68.3 came out, I tried every single sorcery but still, not possible to fix it. I've started a fresh 0.69.0 project (with no global devtools packages) to see if something is wrong with my working project, again, same issue.

All other parts of Flipper work fine, only the profiler is messed up.

[SujitKaulavkar]

When I tried react-devtools in terminal then I am can see the profiler. But still profiler is not working with Flipper. At least, I can move ahead now.

[touchmarine]

I encountered the same error using the same 4.24.3-46a98cff2 version. It seems to be a bug related to the "Highlight updates when components render." DevTools setting.

This feature tries creating a canvas element using window.document.createElement which is not available in React Native and is throwing the error you are seeing.

Quick Fix

Disable "Highlight updates when components render.".

Permanent Fix

Disabling supportsTraceUpdates in the createStore call which should also prevent the setting from being displayed. (I'm assuming Flipper doesn't need to support environments with DOM and the feature doesn't seem to support environments without DOM.)

[devYonz]

@touchmarine you are the 🐐 ! I was going crazy because after implementing a global install both react-devtools and react-devtools-inline I was still running into the createElement error. I only managed to get here once npx react-devtools and flipper window started acting differently. When launched from npx react-devtools the option is not available and is off, however under General in the Flipper mode it is available and as you say tied to trying to do reactDOM createElement exec.

Like @efstathiosntonas I have been driving myself nuts trying to get the error below (hopefully searching will get people here). ERROR TypeError: Cannot read property 'createElement' of undefined, js engine: hermes

Confounding things I had to figure out,

• Expo 46 : already comes with Flipper support from the RN version, the expo-community-flipper plugin goes to enable flipper with a particular version. I personally prefer just setting the version in gradle and ios.
• Metro error message with realpath missing when removing global react-native and using npx version on mac : can be fixed by brew install coreutils
• There is an app crash issue with Flipper and RN right now. If you close flipper after using it once, the app will continue to crash. You will need to uninstall and re-install the app or execute this nifty: adb shell run-as "software.innov8.allspark" rm -rf files/sonar command.

Hope some poor soul like myself finds this and saves a day+; it's days like this that I rue react native dependency wrangling

[touchmarine]

Thanks for writing out the other issues; I constantly got into the crash loop and had to clear the app's data way too often! Also, I would like to note that the global devtools package is not required and the "Failed to find globally installed React Dev Tools..." is a warning, not an error (it uses bundled devtools otherwise). However, it is a way to set a custom devtools version if needed.