facebook
[DevTools Bug]: React instrumentation encountered an error: TypeError: e.hasOwnProperty is not a function.
Website or app
https://github.com/molnard1/react-template/tree/devtools-bug
Repro steps
- Clone the above repo (the
devtools-bugbranch should be used), install dependencies (npm i) - Build/start it in development mode (
npm run watch) - Observe the following error in console, along with devtools not working:
As far as I can tell, this appears to be caused by Axios, as this error does not happen before adding it to the project.
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
No response
Error message (automated)
No response
Error call stack (automated)
No response
Error component stack (automated)
No response
GitHub query string (automated)
No response
e should be object not variable,
Error is due to the:
const e = "some string"; // this is a variable not obejct
var hasProperty = e.hasOwnProperty("someProperty");
This is how your code should look like:
const e = { name: "xyz" };
const prop = e.hasOwnProperty("name");
console.log(prop); // output will be true because name is property of e
I've had a bit of time to look over this again, and it seems that the issue is actually caused by esbuild, specifically, the development build command:
esbuild src/js/index.js --bundle --loader:.js=jsx --format=cjs --outfile=public/dist/bundle.js --watch
changing --format=cjs (or --format=esm, which also triggers the same error) to --format=iife fixes the issue.
The reason this doesn't happen in the production build is because --minify seems to remove the code that's causing the DevTools error in cjs/esm mode.
Thanks @molnard1 ,
This error occurs when using React + ESBuild. This works for me:
Development mode: --format=iife and minify=false
Production: --format=cjs and minify=true
