You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using styled-components with SSR heavily and found few cases when the server-rendered markup mismatches on the client-side, resulting in a console warning in development mode.
After a lot of digging, I noticed that the problem goes away when I resign from the object/function syntax for extended components, like this:
This happens because this babel plugin does not ensure that styled-components with this kind of syntax will result in consistent component-id while doing SSR.
I tried to provide a PR by myself but I don't have much experience in compiler stuff so it took me a lot of time to start to understand anything in this repository 😥 And unfortunately I don't have more time to sit on this. But I managed to set up a failing test for this case - I guess it might be helpful.
I think handling this case could resolve few issues like #147 or next.js#3706.
I would very appreciate any action on this issue as I'm completely out of time right now and I'm sure someone with greater experience with AST's or particularly this repository could do this without spending a lot of time on it.
The text was updated successfully, but these errors were encountered:
I'm running into this problem in 2020, was this every fixed?
When wrapping an external library component with styled(Component), class mismatches are generated both in develop and production mode. I have tried every possible solution in the related issues, but can not seem to get it to work.
Same issue is surfacing when using mui v5 with styled-components. I am not sure if it is also related to it being an external dependency (there is another issue around this #358)
I'm using
styled-components
with SSR heavily and found few cases when the server-rendered markup mismatches on the client-side, resulting in a console warning in development mode.After a lot of digging, I noticed that the problem goes away when I resign from the object/function syntax for extended components, like this:
This happens because this babel plugin does not ensure that styled-components with this kind of syntax will result in consistent
component-id
while doing SSR.I tried to provide a PR by myself but I don't have much experience in compiler stuff so it took me a lot of time to start to understand anything in this repository 😥 And unfortunately I don't have more time to sit on this. But I managed to set up a failing test for this case - I guess it might be helpful.
test/fixtures/add-identifier/index.js
test/snapshots/index.test.js.snap
I think handling this case could resolve few issues like #147 or next.js#3706.
I would very appreciate any action on this issue as I'm completely out of time right now and I'm sure someone with greater experience with AST's or particularly this repository could do this without spending a lot of time on it.
The text was updated successfully, but these errors were encountered: