I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
Related
When I run Lighthouse for the project I am working on, I get
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js
as no1 causer of unused JS.
How is that making sense from a performance optimization perspective?
I can't control what extensions the user runs in his browser.
I also can't find anything about the React dev tools in the project.
Would highly appreciate if someone could shed some light on that issue.
I found the issue is because the file of the devTools is installed when the page is loading... and it is useless in production mode.
So go to the extension and right click on it.
Then go to the manage extensions.
Then find the "Allow this extension to read and change all your data on websites you visit" change it to "on click".
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
I finished developing a professional portfolio website for myself (since I will be graduating this May). Everything looked great when I was using the development server. However, after I tried to deploy it to GitHub Pages, only a blank screen shows. The site should be reachable at https://shaynajrosado.github.io/Portfolio.
After getting frustrated, I tried seeing whether hosting it on Firebase would make a difference.
Click here to see Firebase-Hosted Project
Still, nothing shows up.
This links to a picture of the error message I get when I right-click on the blank page & Inspect
After clicking the error message, it takes me to the React website which translates the error message into: "e(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
However, in my code, there really aren't any return statements missing. Below is a link to the project repository:
https://github.com/shaynajrosado/Portfolio/tree/gh-pages
I currently have the project set to use branch gh-pages as the source.
Any words of advice would be very greatly appreciated as I continue to wrestle with this!
I use create-react-app 16.["react": "^16.8.4", "react-scripts": "^2.1.8"]
I read the blog on profiling react performance by Ben Schwarz using Chrome Dev tools:
https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
He recommends to export your JS with source-maps.
When he does a performance trace, and clicks on a given react component in the User Timing section, specific component information shows in the Bottum-Up section with ** blue links to the source code** on the right hand side. This links don`t show, when I click on React components. When I click on components like for instance Evaluate Script, the blue links on the right hand side show.
Isn`t source mapping supposed to work "out-of-the-box" with create-react-app 16 in development.
I want to source-map only in development using Chrome Dev tools. Source mapping is activated in the Chrome Browser. What am I missing?
Thx in advance
P.S.:Since I haven`t got 10 reputation points I´m not suppose to use screenshots, which in this case made things not quite easy. I hope I managed to explain my problem sufficiently, though.
The Source Files for Debugging will be available under your localhost:3000 in the Chrome devtools.
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/
background:
I'm just getting started with AngularJS and I'm using HotTowel as a starting point.
I've actually done a fair amount of work with HotTowel and have several features built for an application I'm doing. What led me to this problem is trying to get ui-grid in to my application. It blows up. Looking at HotTowel it seems to have been a while since it was last update, but the Angular stuff (and other libraries) are full steam ahead. When I update all of the Angular packages HotTowel's navigation stuff stops working. I'm going to start chasing it down, but I thought I might ask if somebody else has already fixed this issue to save myself some time.
Reproduction:
I'm using VisualStudio2015. My project is an ASP.NET Web Application (.NET Framework) w/ just MVC added.
For the reproduction of the issue I used the above in a new solution. I then went to manage NuGet packages and update everything to latest, there should be 10 updates. This requires a restart of Visual Studio.
Once I'm back in I return to my solution and bring up Manage NuGet pakages again. This time I go to Browse and find HotTowel. This brings up a short list. I select HotTowl.Angular by John Papa (~73.6K downloads, version v2.3.3) and install it. Allow it to overwrite the favorite icon.
After NuGet finishes go to the solution explorer, find Index.HTML, right click on it and select "set as start page". Now, open Index.html and change line 51 to say "" and save it.
Now do a rebuild all and then run the application using Google Chrome (issue will occur with any browser). Everything works great. You can switch between dashboard and admin.
Stop the application and return to manage nuget package. select the update tab and update all of the packages. You'll be asked about overwriting some map files, go ahead and do it.
Do another rebuild all and then run the application.
The dashboard will come up as before, click on admin. You will see dashboard fade out and then fade back in. This is the issue. the routes appear to be broken.
At this point there is nothing custom in the solution. We have just updated all of the packages to their latest releases. HotTowel, however seems to have a gone stale.
Being new to Angular, and HotTowel. I'm not sure where to start debugging this.
At a guess the issue is with how the code in config.route.js sets up the routes.
Can somebody please give me some hints on how to fix this?
TIA