Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dev run shows different styling than production build

See original GitHub issue

Are you reporting a bug?

I am trying to build static site using material-ui. Sample is at: https://github.com/paramr/react-static-issue/tree/master . when I run in dev i see styling of UI which disappears when I run in prod. Dev: screen shot 2018-12-20 at 5 14 38 pm

Prod: screen shot 2018-12-20 at 5 14 08 pm

Environment

react-static -V: 6.0.11
node -v: v10.14.2
npm -v: 6.4.1
Operating system: mac OS - 10.14.2
Browser and version (if relevant): Repros on safari and chrome

Steps to Reproduce the problem

I started from archives/old-examples/material-ui and fixed issues that arose to get it working for dev. Repro steps are:

$ git clone https://github.com/paramr/react-static-issue.git
$ cd react-static-issue
$ npm install
$ npm run start
open http://localhost:3000 on browser.
$ non run build-dbg
$ cd dist
$ python3 -m http.server 8080
open http://localhost:8080 on browser

Expected Behavior

Both sites should look the same.

Issue Analytics

State:
Created 5 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

tannerlinsleycommented, Dec 21, 2018

The process of static generation doesn’t happen at dev time, as this would be too costly and slow and just doesn’t make sense for developer experience.

Both renderToElement and renderToHtml are methods that are used only to produce the static HTML for the static site. That HTML is then used as the starting point for the app to rehydrate.

Just as with any static site generation in React, there are side effects of rendering that must be extracted and pushed into the resulting HTML so as to ensure that the HTML markup looks exactly the same as the post-mounted react markup.

These methods provide a place to do that (but I can see how they are a bit confusing), and to be honest, most of this should be happening in plugins that we haven’t built yet.

You can still achieve what you are wanting without a plugin for now though.

This repo has a working static export configuration for matierial UI: https://github.com/cbroberg/react-static-mui

In fact, let’s track this issue there (#896) from here on out.

0reactions

paramrcommented, Dec 21, 2018

Thanks for explanation.