I'm converting an existing React app to use Next.js and I'm having an issue with the production build. I'm using Emotion to add a css prop for styling. The pages in my app render fine until they prefetch links, at which point the styles disappear from the current page. There's some odd intermittent behaviour as well – sometimes when I then refresh the page I can navigate between pages without the styles disappearing but eventually they disappear again. Inspecting the component shows that the value of the css prop has not changed, but the styles are not being applied to the actual element. Has anyone experienced something similar or could point me in the direction of what is causing this?
Checkout my comment on this issue for the library react-select which uses emotion for styling.
https://github.com/JedWatson/react-select/issues/3309#issuecomment-883001216
I was able to get the styled component to render by putting one in _app.tsx and hiding it so it always renders before any other components which may be delayed for one reason or another.
There are a couple other solutions in that thread that may help you as well.
Related
VSCode has breadcrumbs which is very useful to navigate between tags in a long HTML file. But in a jsx file the breadcrumbs stop when it reaches the return statement, effectively making this feature non-existent in any rendering part of React.
Is there a setting, an extension or anything that solves this problem? I feel like this should've been a thing by now, with React being around for quite some time.
I did find one VSCode extension called React Outline, but the breadcrumbs doesn't update when I move my cursor around. It doesn't seem to have lots of features either.
React Breadcrumbs VsCode extension already does it nicely. It helps see the React component trees and jump to these components with either outline tab or Cmd+shift+. command.
I've a next js project in typescript with inbuilt scss. The style loading approach is as per official documentation provided by next js and it's loading fine in browser. But, the issue I'm having is on inital load or when I refresh, the style is loaded only after page loads. So, there is some millisecond of page render without any style. How can I resolve this issue? I've digged around and found solution with jsx styled component. But, since my whole style is in separate scss and the project already in ready state, I can't choose to go that way. Is there any way where I can load scss style even on inital render without any delay of style loading on ssr.
I am try to add some CSS to my components. However, when the website renders the custom CSS is always removed. I am styling my own pages and do not override the CSS of third parties, at least not consciously. I am using Material UI and NextJS and realised that while following this
that all server-side CSS is removed. I suspect that this is the issue, but not sure how to work around it. The CSS is just custom to the component and follows the naming convention of Next :
[filename].modules.css
Does anyone know what do do?
In this example of how to use Material UI with Next.js, they remove the server-side injected CSS when the component mounts in the browser. What's the advantage of that?
This is more of a CSS in JS construct when SSR is involved. Once the client is rehydrated it adds any new styles that are needed for that view, however any previously printed styles are not removed and they are simply removing them,
User lands on Page A - SSR for Page A maybe rendered inline for performance purposes.
User transitions to or moves to Page B, it has conflicting CSS from previous SSR rendering and may cause side effects or simply does not need the style object.
Scenario:
I have a React component which shows up in one of the tabs on my website. Navigating to another tab in the same website unmounts the component and navigating back to the original tab renders the component again.
Problem:
The problem I'm facing is that the older React component still shows up in the React developer tools console and everytime I navigate back to the original tab, the number of components shown there increase by one.
My question is: Are the components not getting deleted and that there is another way to delete the component which I'm not doing or it is the behavior of React developer tools console to show earlier components?
I'll suggest to check the actual DOM, not what you see in the devtools. It is possible that there is a bug in devtools. The way of how React's devtools work is a little bit tricky. The communication between what happens in the page and the actual devtools ui depends on couple of factors. There is a content script, background script a bridge that they wrote and so on. If you see the components number growing in the DOM then the problem is not in the devtools but in your app.