Question
We upgraded our Yarn version from 1.22.19 to 4.3.0 and TypeScript from 4.8.4 to 5.4.5, while keeping the styled-components version unchanged and updating other modules.
Since this upgrade, although the HTML is correctly generated in SSR mode, the getStyleElement() method of ServerStyleSheet returns an empty style tag.
This issue did not occur before the upgrade, and we have followed the documentation thoroughly.
What could be the cause of this problem?
If you need any further adjustments, please let me know!
Environment
System:
- OS: macOS 14.5
- CPU: Apple M2 Max
- Memory: 1TB / 32GB
Binary:
- Node: 18.18.0
- Yarn: 4.3.0
npmPackages:
- typescript: 5.4.5
- react: 18.2.0
- react-dom: 18.2.0
- styled-components: 5.3.6
- webpack: 5.88.2
- pnp-webpack-plugin: 1.7.0
- babel-plugin-styled-components: 2.0.7
Reproduction
It is difficult to reproduce this issue on CodeSandbox. Instead, please refer to the code below for your review.
GitHub Repository
// packages/app/src/app.tsx
export const TestApp = () => {
return (
<ThemeProvider theme={theme}>
<Container>TestApp</Container>
</ThemeProvider>
);
};
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`;
// packages/server/ssr.tsx
let content = "";
let styleTags: Array<React.ReactElement> = [];
try {
content = ReactDOM.renderToString(sheet.collectStyles(<TestApp />));
// why empty :(
styleTags = sheet.getStyleElement();
} catch (err) {
logger.error("Error:" + err);
} finally {
sheet.seal();
}
return <Html content={content} styleTags={styleTags} />;
// packages/web/webpack.config.js
[
"babel-plugin-styled-components",
{
ssr: true,
},
],
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
plugins: [PnpWebpackPlugin],
},
resolveLoader: {
plugins: [PnpWebpackPlugin.moduleLoader(module)],
},
Steps to reproduce
None
Expected Behavior
The built styles should be included in the __html.
Actual Behavior
However, an empty style is returned.