Hi I have followed the example here https://facebook.github.io/react/docs/installation.html to create a reactjs app but the browser loads a blank page. When I check the source, the div with root tag has nothing in it when it is supposed to have the html code from the react component.
I followed the same example on my windows machine it worked without having to change any code.
Related
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'm using a bootstrap theme into ReactJS app. Everything works except the NavBar transition/animation effect on scrolling isn't working. I have noticed in the projects GitHub they are using a script. They are referring this script in the index.html page (the last line within the body tag).
Now, I'm trying to get it working in my ReactJS app but without luck so far. I've created a navbar component and imported into App.JS. I've used same id, "mainNav" for the tag with in my navbar component, but I've noticed that an error in the script. It says "undefined is not an object(evaluating '$("#mainNav").offset().top > 100)' in the browser.
Could you please point me what I'm doing wrong? How can I get the same effect using ReactJS?
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
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
We are using Nightwatch and working with Page objects. The tests are running without any issue on Chrome but element cannot be found on IE 11. We use css selector and custom tags (named data-testid) to call each element. IE 11 is starting correctly and loading the login page but cannot find any element on the page. Does anyone have a tip?