React Static Site Rendering with Webpack StaticSiteGeneratorPlugin and Styled Components

Question

We have a current existing website made with Intersystems Caché and HTML, CSS & JS. We are currenlty trying to implement react into this existing website.

For this we created a react component library using styled components. We import this library in our existing website.

In our existing website we want to staticly render our html files with the react components in it. For this we use the webpack plugin: StaticSiteGeneratorPlugin. This parts works. The only problem we are having is that the SSR of Styled Components is not working. The extracted css is always empty.

Page template where we import our component library and use one of the components:

const React = require('react');
const { Button }  = require("component-library"); // Our own created External component library 

const Index = () => {
  return (
      <html>
        <head>
          <title></title>
        </head>

        <body>
          <Button>THIS IS RENDERED BY REACT </Button>
        </body>
      </html>
  )
};

module.exports = Index;

This gets rendered into this: (this part is working, you also see the classes of Styled components)

<html>
  <head>
    <title></title>
  </head>
  <body>
    <button class="sc-bdnxRM bBXhOB" type="button">
      <span>THIS IS RENDERED BY REACT </span>
    </button>
  </body>
</html>

This is the code to render this HTML file:

var React = require("react");
const { StaticRouter, Route } = require('react-router-dom');
const ReactDOMServer = require('react-dom/server');
const { ServerStyleSheet } = require('styled-components');
const paths = require("./paths.js");

const html = (locals) => {
  const sheet = new ServerStyleSheet();
  const html = ReactDOMServer.renderToString(
    sheet.collectStyles(
      <StaticRouter location={locals.path} context={{}}>
        {paths.map((path) => <Route exact path={path.name} key={path.name} component={require("./pages/"+path.component+".jsx")} />)}
      </StaticRouter>
    )
  );
  const css = sheet.getStyleTags()

  console.log('css',css)
  return html
}

export default html;

But the css variable is always empty. Could someone help me with this?

React Static Site Rendering with Webpack StaticSiteGeneratorPlugin and Styled Components

0 Answers0