Im running react 16.8+ on Internet Explorer 9.
Initially the page renders as blank without any react app in the root element.
When I open the F12 dev tools and refresh the page it renders fine.
When I close the dev tools and refresh it also renders fine.
Does anyone have an idea why initially the page is not rendered?
Apparently since redux is trying to console log the app freezes, since console log is only available when dev-tools is open. Therefor add the following polyfill in your index.tsx / index.js above all other imports:
yarn add console-polyfill
Related
Home.tsx，Page effect
Modify the Home component and save it.
And the terminal console can see the update of hmr, but the page effect has not changed, and the console.log in the Home component has not been triggered.
I am working with React and Ionic: "#ionic/react": "^5.5.0". The app looks fine in a fresh tab:
As soon I hit refresh on the browser the inputs get broken/look different:
Do you know why?
It depends from variables scss on preferred dark mode that usually Ionic put automatically. You can look for "#dark" on your scss files and edit it!
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github
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.