I have come accross an issue where styles of a component, that is imported from my component library which is bundled with webpack 5, are not applied during ssr.
I have two projects.
-
A NextJs app with SC. Importing a component library
minimal reproduction repo: https://github.com/tadej321/nextjs-test.git
-
A React component library with SC and bundled with webpack 5. Imported into my NextJs app
minimal reproduction repo: https://github.com/tadej321/component-library-test.git
The component library is added as a dependancy to the NextJs app.
Once the page is updated on the client, the styles are applied correctly, just the inital render of the page lacks the styles.
I do not know if the problem is with SC or NextJs. But if I dont bundle the component library with webpack and instead only transpile with babel using this configuration:
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["babel-plugin-styled-components"] }
then NextJs performs ssr with styles applied.
To bundle the component library run the npm run build command and set the main in package.json to:
"main": "./dist/index.js"
To transpile with babel run the npm run transiple command and set the main in package.json to:
"main": "./dist/index.transpiled.js"
I have come accross an issue where styles of a component, that is imported from my component library which is bundled with webpack 5, are not applied during ssr.
I have two projects.
A NextJs app with SC. Importing a component library
minimal reproduction repo: https://github.com/tadej321/nextjs-test.git
A React component library with SC and bundled with webpack 5. Imported into my NextJs app
minimal reproduction repo: https://github.com/tadej321/component-library-test.git
The component library is added as a dependancy to the NextJs app.
Once the page is updated on the client, the styles are applied correctly, just the inital render of the page lacks the styles.
I do not know if the problem is with SC or NextJs. But if I dont bundle the component library with webpack and instead only transpile with babel using this configuration:
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["babel-plugin-styled-components"] }then NextJs performs ssr with styles applied.
To bundle the component library run the npm run build command and set the main in package.json to:
"main": "./dist/index.js"To transpile with babel run the npm run transiple command and set the main in package.json to:
"main": "./dist/index.transpiled.js"