styled components for SSR needs to be transpiled with special plugins such as (babel-plugin-styled-components or typescript-plugin-styled-components)
https://styled-components.com/docs/tooling#serverside-rendering
Using so, it adds the deterministic component ID to each of the component to avoid classname collision and thus to avoid hydration issues such as Classname didn't match
my babel.config.json in NextJS app is set to,
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true, "displayName": false, "minify": true }]]
}
this takes care of enabling SSR support for the styled components which I have created in the app(./src/components) BUT
I'm consuming a third-party component library(@org/carousel) which is not maintained by me so I have no control over its build & publish process.
Since NextJS clearly ignores transpiling node_modules, so I have looked at next-transpiled-modules with the following setup in next.config.js, hoping that it would that support
const withTM = require('next-transpile-modules')(['@org/carousel']);
module.exports = withTM();
Yet, in my build, I don't see the addition of deterministic ID for that component.
Gist: node_modules/@org/carousel/build/index.js has styled.div() but we need it as styled.div.withConfig({componentId:'sc-someId'})
- Am I in the right direction?
- Can we transpile an ES5 compliant module again? (@org/carousel was already transpiled before publish)
- Are there any other ways to address this issue?
Any thoughts/ideas/suggestions are greatly appreciated!