Razzle with styled components and react-toastify #1783

RicardoGaefke · 2021-12-07T02:21:09Z

RicardoGaefke
Dec 7, 2021

❓Question

Hey guys, I'm facing a problem using styled components and react-toastify. My theme tsx has:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

The output of this imported css is: <link data-chunk="client" rel="preload" as="style" href="/public/static/css/client.8df04b7c.css"> and react-toastify toasts don't have the styles applied. If I copy the content of ReactToastify.css into the styles tag in browser inspector it works perfectly. Something important is the css file is loaded in Network browser inspector. There is just a warn:

The resource {url} was preloaded using link preload but not used within a few seconds from...

In my old apps (which don't use razzle) the ReactToastify.css styles are within the <styles data-styled ...> tag.

Do you have a clue about how to solve this?

Thanks a lot.

Answered by RicardoGaefke

Dec 7, 2021

Hey, I just changed my server.js and it worked now. Below is working version but I'd like to know if you have something more elegant.

import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { ServerStyleSheet } from "styled-components";
import App from './App';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
    assets[entrypoint].css.map(asset =>
      `<link rel="stylesheet" href="${asset}" />`.replace('public', 'publ…

View full answer

fivethreeo · 2021-12-07T02:50:37Z

fivethreeo
Dec 7, 2021
Collaborator

Need to see your server.js

0 replies

RicardoGaefke · 2021-12-07T02:55:16Z

RicardoGaefke
Dec 7, 2021
Author

Sure... thanks for your quick response. Here is my server.js:

import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { ServerStyleSheet } from "styled-components";
import App from './App';

const server = (cb, url, data, initialContext) => {
  const context = { data };
  const extractor = new ChunkExtractor({
    statsFile: path.resolve(__dirname, 'loadable-stats.json'),
    entrypoints: ['client'],
  });
  const sheet = new ServerStyleSheet();

  const markup = renderToString(
    sheet.collectStyles(
      <StaticRouter context={context} location={url}>
        <ChunkExtractorManager extractor={extractor}>
          <App initialContext={initialContext} />
        </ChunkExtractorManager>
      </StaticRouter>
    )
  );

  const scriptTags = extractor.getScriptTags();
  const linkTags = extractor.getLinkTags();
  const styleTags = sheet.getStyleTags();

  cb(null, `<!doctype html>
      <html lang="">
      <head>
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta charset="utf-8" />
          <title>Harmony With Nature</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="shortcut icon" href="/public/favicon.png">
          <script>window.initialContext=${initialContext}</script>
          <script>window.initialData=${data}</script>
          ${linkTags}
          ${styleTags}
      </head>
      <body>
          <div id="root">${markup}</div>
          ${scriptTags}
      </body>
    </html>`);
};

export default server;

0 replies

RicardoGaefke · 2021-12-07T03:18:07Z

RicardoGaefke
Dec 7, 2021
Author

Hey, I just changed my server.js and it worked now. Below is working version but I'd like to know if you have something more elegant.

import React from 'react';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
import { ServerStyleSheet } from "styled-components";
import App from './App';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
    assets[entrypoint].css.map(asset =>
      `<link rel="stylesheet" href="${asset}" />`.replace('public', 'public/')
    ) : '' : '';
};

const server = (cb, url, data, initialContext) => {
  const context = { data };
  const extractor = new ChunkExtractor({
    statsFile: path.resolve(__dirname, 'loadable-stats.json'),
    entrypoints: ['client'],
  });
  const sheet = new ServerStyleSheet();

  const markup = renderToString(
    sheet.collectStyles(
      <StaticRouter context={context} location={url}>
        <ChunkExtractorManager extractor={extractor}>
          <App initialContext={initialContext} />
        </ChunkExtractorManager>
      </StaticRouter>
    )
  );

  const scriptTags = extractor.getScriptTags();
  const linkTags = extractor.getLinkTags();
  const styleTags = sheet.getStyleTags();

  cb(null, `<!doctype html>
      <html lang="">
      <head>
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta charset="utf-8" />
          <title>Harmony With Nature</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          ${cssLinksFromAssets(assets, 'client')}
          <link rel="shortcut icon" href="/public/favicon.png">
          <script>window.initialContext=${initialContext}</script>
          <script>window.initialData=${data}</script>
          ${linkTags}
          ${styleTags}
      </head>
      <body>
          <div id="root">${markup}</div>
          ${scriptTags}
      </body>
    </html>`);
};

export default server;

0 replies

fivethreeo · 2021-12-07T03:37:22Z

fivethreeo
Dec 7, 2021
Collaborator

Seems right to me, If you need both styled components and regular css.

0 replies

fivethreeo · 2021-12-07T06:19:26Z

fivethreeo
Dec 7, 2021
Collaborator

How I handle PUBLIC_PATH https://codesandbox.io/embed/boring-kirch-ju2dw?codemirror=1

Set PUBLIC_PATH to / when building and set env vars to point it where you serve it when deployed

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Razzle with styled components and react-toastify #1783

{{title}}

Replies: 5 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Razzle with styled components and react-toastify #1783

RicardoGaefke Dec 7, 2021

❓Question

Replies: 5 comments

fivethreeo Dec 7, 2021 Collaborator

RicardoGaefke Dec 7, 2021 Author

RicardoGaefke Dec 7, 2021 Author

fivethreeo Dec 7, 2021 Collaborator

fivethreeo Dec 7, 2021 Collaborator

RicardoGaefke
Dec 7, 2021

fivethreeo
Dec 7, 2021
Collaborator

RicardoGaefke
Dec 7, 2021
Author

RicardoGaefke
Dec 7, 2021
Author

fivethreeo
Dec 7, 2021
Collaborator

fivethreeo
Dec 7, 2021
Collaborator