Issue
Gatsby hot reloading is not working when modifying CSS properties
from Components that lives in generated .MDX pages.
Goal
I want the ability to review changes made to Components using hot
reloading.
I started playing around with MDX and Gatsby but, I am finding frustrating having to restart the server every time I want to preview changes made to the design of Components. Is there any workaround this issue?
Thank you in advance.
Related
I am working on a Next.js app where I am using Ant Design for the UI components. To decrease the initial load time of the app, I have used dynamic imports for the header. However, doing so causes a bug where some Ant Design packages (Menu and Input) won't load on the header when changing pages internally using Next.js Link component. The bug goes away when I refresh the page.
I have tried statically importing the header, and it resolves the issue. However, it increases the load time of the app.
What is the best way to solve this issue and decrease the initial load time of the app without encountering the bug?
Expected
const Header = dynamic(() => import('src/components/Header/Header'), { ssr: false, });
I appreciate any help or insights on this issue. Thank you.
I'm having an issue with my React app where as soon as I edit code and hit save on my IDE, the entire app refreshes on the browser- triggering all of the API calls. I could be making a minor text change and the entire project will essentially reload.
I've tried messing around with FAST_REFRESH=false in the env file, but it's not working. I've also confirmed that there are no instances of window.location.reload() within the codebase. The project also does not include any custom webpacks or bundles.
Ideally, I want the project to update the necessary components on edits, without reloading the entire project.
This might be a silly question, but after reading many documents, I am still not sure. I know there are 3 main types of rendering:
Sever side rendering (render at request time)
Client-side rendering (render on client side)
Static site generation (render at build time)
I have some experience with Next JS, and I know you can choose which rendering type you want for a page in Next JS.
However, for React JS, from what I read here and there, it seems to be client-side render. But when I host a React webpage (say on S3), I would build it first and host the generated static contents on S3. Doesn't this mean React JS fall into the static site generation category? What is the "build action" doing anyway, and how is it different from rendering?
When you write your code you more than likely seperate your concerns and components into different files. With react you likely have a .js file for each component, you may also have a .css file etc etc. This is great for organising workflow, but not idea for a production app.
When you "build" your project, react takes all these files and merges them together and optimises for fast page loading. You are left with a build directory which contains the files ready for deployment.
Rendering happens as the page is loaded. It is the process of react determining what the UI will look like by checking what components need to be loaded and what state they are in.
I have a style guide for a react web component library
When loading the base URL, the sections load as expected and everything works.
When I load the base URL/index.html (e.g. by switching back to "Components" after loading "Layers" in the top right tabs), the same page should be loaded, but the web component fails to load with no errors. When checking out the examples, errors are thrown, presumably because they can't access the web component.
My guess is some adjustments should be made in the style guide config. Does anyone have any hints? I am fairly new to web components, so I am pretty much in the dark atm
Thanx
After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?
Im using the exact same code from the controlled 'react material ui grid' example:
https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material ui example for how this is done. I utilize demo grid in Students.jsx.
Here is a pic of what happens post refresh:
Everything else renders fine (all other pages) in production mode and dev mode. I have no clue what im missing here. It looks like the jss-in-css is mapping incorrectly.
I found that reverting back to pre-React 16 everything began to work again SSR and what not, however i cant use dx-react-grid project since it requires 16. Kind of in a wackamole, still investigating where i goofed.
TEST
http://transportation.kkotwal.me/
I hosted it, if you click on login you can log in with yea#yea.com, password: 123, or you can just sign up where the username has to be a email it doesnt matter. After wards if you navigate to the students button on the navigation (if you click on transportation tracker after logging in you should be back to the root page / view). You will see the dev extreme controlled grid example.
If you hit refresh on that page you will see all the css is messed up. In case you arent sure what the page is: http://transportation.kkotwal.me/students. The source is here: https://github.com/kkotwal94/DrivingService/tree/UpdateReact . The server side rendering is located https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. The component for the devExtreme component is called DemoBase.jsx in the components folder, and the container that renders this is https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx.
I guess you're already aware that React 16 came with lots of improvements to server-side rendering. The update came with additional server-side render methods like renderToNodeStream().
The official guide on upgrading React from 15 to 16 mentions that it should have no issues, with minor exceptions. One of those exceptions is a break change exactly when you hydrate a server-rendered container:
Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.
Having that in mind, I'd search in your project (and possibly in third-party libraries as well) for some ReactDOM.render that was missed to be changed to ReactDOM.hydrate while upgrading React to version 16.
this is probably the issue at server side code and your nodejs script.
Reason #1:
if you are using material ui version 4.x then you should look at their ssr documentation
in material ui version 3.x or below that we use
JssProvider from 'react jss/lib/JssProvider';
however this is no more required, your both github links are broken , kindly check ssr code of yours and compare it with material-ui documentation
Reason #2:
you have to refer to your build folder for your expressjs
app.use(express.static(path.join(__dirname, '../../build')));
app.use(express.static(path.join(__dirname, 'public')));
this could be another reason and if this is missing then check that your componentDidMount also will not be invoked, so client side rendering won't be happening, however for ssr both client side and server side rendering has to happen
For complete code on SSR kindly refer this link