I'm not sharing any code its just a question is there any way to find witch component or function throw this error on my project
install "React Developer Tools " extension in your
browser
step 2: inspect the code you will have component
section open that you will find which component gets
error see in image
Related
I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
I am using cytoscape.js in react and cytoscape.js-expand-collapse. I register this extension at the very begining of my file as shown in docs: https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse: by doing expandCollapse( cytoscape ); and it works only on first render. When I come back to my cytoscape component I receive following error: Can not register expandCollapse for core since expandCollapse already exists in the prototype and can not be overridden. So my question is- has anyone had similar problem with using this extension in react and know how to deal with it?
As the title shows, Can i know how many times when a class component or a functional component render? Is there any chrome extension or webpack plugin?And now i just can get this by console.log
just console.log to log the times
You should use react-devtools:
Install react-devtools extension.
While on a development environment, excess your browser dev tools.
Go to Profiler tab
Press Start-Profiling
Examine the snapshot
Dashboard Component (0.6ms of 86.ms) - Rendered at 1.3 for 83ms
Refer to official walkthrough video of the profiler on YouTube.
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
I've create an ErrorBoundry component which is wrapped around all child components of App. I've added a throw error function to one of the child components to test. When the component renders it seems the ErrorBoundry is catching the error but then the error appears after it. What am I doing wrong.
Here's my sandbox https://codesandbox.io/s/n0qjwjvrnm
I noticed this please take a look in the error overlay.
This error overlay is powered by react-error-overlay used in
create-react-app.
I tested in my app and it show the correct behavior because I'm not using create-react-app so this is the feature powered by it.
This is not a bug. Cheers.