Material-ui: SSR ServerStyleSheets || => sheets.toString() stays blank with sheets.collect()

Created on 7 Jun 2019  路  5Comments  路  Source: mui-org/material-ui

sheets.toString() stays blank for me !!!!!

I followed the documentation and I even followed the repo example

What's the diff between your repo and my code ? you launch SSR with babel-node (not possible in real life because of import of images and svg in ES6), me I put SSR in webpack as entry, and wait for a fresh server as output. Is it why your function sheets.collect() doesn't work ? because it's been compiled in webpack ?? I think so...

const renderFullPage = (html, css, store) => `<!doctype html>
<html lang="fr">
  <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style id="jss-server-side">${css}</style>
  </head>
  <body>
    <div id="root-frontgarage">${html}</div>
    <script>window.__PRELOADED_STATE__ = ${serialize(store)}</script>
    <script src="http://localhost:8500/static/client.bundle.js"></script>
  </body>
</html>`;

app.use((req, res) => {
  const initialState = {};
  const history = createHistory([req.url]);
  const store = configureStore(initialState, history);
  const sheets = new ServerStyleSheets();
  const context = {};
  const html = ReactDOMServer.renderToString(
    sheets.collect(
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          <App />
        </StaticRouter>
      </Provider>
    )
  );

  const css = sheets.toString();

  return res.send(renderFullPage(html, css, store.getState()));
});

This is where I found the function after webpack compilation, and this is why it doesn't work, don't you ?


Capture d鈥檈虂cran 2019-06-07 a虁 21 44 52

incomplete
Source
picture tomtom94

Most helpful comment

@oliviertassinari @srghma YEAHHH !!!

You were right I was using 3 months ago "@material-ui/core": "^3.9.3",

And I have made an update it works like a charm with "@material-ui/core": "^4.4.0",

Manyyyy cheers

picture tomtom94 on 3 Sep 2019
👍2 🚀1 ❤1

All 5 comments

@tomtom94 Do you have a reproduction for us? I would suspect an issue with a CJS and UMD bundling duplication.

oliviertassinari picture oliviertassinari on 7 Jun 2019

had the same error, sheets.getStyleElement() generated empty sheet, the problem was in duplicated @material-ui/styles in yarn.lock, there should be only one !

srghma picture srghma on 22 Jul 2019
👍1

@oliviertassinari I probably have this issue because @material-ui/core depends on "@material-ui/styles" "^4.2.0" instead of "@material-ui/styles" "^4.2.1"

"@material-ui/core@^4.2.1":
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.2.1.tgz#18255c01d039ff856bfdb2f955fec6c9ae64a464"
  integrity sha512-hasPQUFAb9OxKng7UX2+SjUWtVZbnkVJ/jHZWXTivVcU+UzvNIpA9AyRRQvZ8SPV6swP/HD2VzUBzoMEeRR6wg==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@material-ui/styles" "^4.2.0"
    "@material-ui/system" "^4.3.0"
    "@material-ui/types" "^4.1.1"
    "@material-ui/utils" "^4.1.0"
    "@types/react-transition-group" "^2.0.16"
    clsx "^1.0.2"
    convert-css-length "^2.0.1"
    deepmerge "^4.0.0"
    hoist-non-react-statics "^3.2.1"
    is-plain-object "^3.0.0"
    normalize-scroll-left "^0.2.0"
    popper.js "^1.14.1"
    prop-types "^15.7.2"
    react-transition-group "^4.0.0"
    warning "^4.0.1"
"@material-ui/styles@^4.2.0":
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.2.0.tgz#dafb8a271cb6772354aece15d3e43af33844f692"
  integrity sha512-VpPCNWYK1KjpurFh1gH02xpAmCqKZrC/rmiBosZcCRDl8AOcUkSxBMNU0rziHgSQ/jYTEh3MdKNs3Gq0vGCQ/w==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@emotion/hash" "^0.7.1"
    "@material-ui/types" "^4.1.1"
    "@material-ui/utils" "^4.1.0"
    clsx "^1.0.2"
    csstype "^2.5.2"
    deepmerge "^3.0.0"
    hoist-non-react-statics "^3.2.1"
    jss "10.0.0-alpha.17"
    jss-plugin-camel-case "10.0.0-alpha.17"
    jss-plugin-default-unit "10.0.0-alpha.17"
    jss-plugin-global "10.0.0-alpha.17"
    jss-plugin-nested "10.0.0-alpha.17"
    jss-plugin-props-sort "10.0.0-alpha.17"
    jss-plugin-rule-value-function "10.0.0-alpha.17"
    jss-plugin-vendor-prefixer "10.0.0-alpha.17"
    prop-types "^15.7.2"
    warning "^4.0.1"

"@material-ui/styles@latest":
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.2.1.tgz#b07383ffeaa840bcb6969eb17c5f0e3b734e8e5b"
  integrity sha512-1KSOZ17LBWBqIyPRsEpyb4snT/wRIfQTPi0x66UvSzznVK9MPAfJx3/s5lVT4vrGFObs/nj6Pet6Nhrdl2WCrg==
  dependencies:
    "@babel/runtime" "^7.2.0"
    "@emotion/hash" "^0.7.1"
    "@material-ui/types" "^4.1.1"
    "@material-ui/utils" "^4.1.0"
    clsx "^1.0.2"
    csstype "^2.5.2"
    deepmerge "^4.0.0"
    hoist-non-react-statics "^3.2.1"
    jss "10.0.0-alpha.17"
    jss-plugin-camel-case "10.0.0-alpha.17"
    jss-plugin-default-unit "10.0.0-alpha.17"
    jss-plugin-global "10.0.0-alpha.17"
    jss-plugin-nested "10.0.0-alpha.17"
    jss-plugin-props-sort "10.0.0-alpha.17"
    jss-plugin-rule-value-function "10.0.0-alpha.17"
    jss-plugin-vendor-prefixer "10.0.0-alpha.17"
    prop-types "^15.7.2"
    warning "^4.0.1"

My package json

  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "@material-ui/styles": "latest",
srghma picture srghma on 22 Jul 2019

@srghma Have you solved your issue ??? is this just about dependencies ??

tomtom94 picture tomtom94 on 3 Sep 2019

@oliviertassinari @srghma YEAHHH !!!

You were right I was using 3 months ago "@material-ui/core": "^3.9.3",

And I have made an update it works like a charm with "@material-ui/core": "^4.4.0",

Manyyyy cheers

tomtom94 picture tomtom94 on 3 Sep 2019
👍2 🚀1 ❤1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

reflog picture reflog  路  3Comments
mb-copart picture mb-copart  路  3Comments
revskill10 picture revskill10  路  3Comments
FranBran picture FranBran  路  3Comments
newoga picture newoga  路  3Comments