Styled-components break with react-router v4 about styled-components

[sheepsteak]

I think this may be because react-router also uses broadcasts via react-broadcast and there is a clash as both put broadcasts onto the context. I think the fix above is just papering over the cracks.

Maybe it would be better to remove the broadcast stuff in this module and depend on react-broadcast instead? The code is very similar and there would be no overwriting happening on the context.

[madeinfree]

I got the same error.
I found this issue happened StyledComponent.js#L44, it can get the this.context but didn't have __styled-components__, I try to fixed this line become

const subscribe = this.context.broadcasts[CHANNEL]
  this.unsubscribe = subscribe && subscribe(theme => {
  // This will be called once immediately
  this.setState({ theme })
})

it works fine

[mxstbr]

Interesting, @madeinfree would you mind submitting a PR with this change? Then I can take a look if that fixes the issue once and for all! Thanks!

[madeinfree]

@mxstbr no problem ~

[mxstbr]

I think this may be because react-router also uses broadcasts via react-broadcast and there is a clash as both put broadcasts onto the context. I think the fix above is just papering over the cracks.

Interesting theory. We could just not use the broadcast context property and use theme instead?

Maybe it would be better to remove the broadcast stuff in this module and depend on react-broadcast instead? The code is very similar and there would be no overwriting happening on the context.

The reason we don't do this (if you look at the PR I actually initially built it this way: #56) is that it would mean that every styled component is wrapped in two components instead of one, which has a non-negligible performance impact. I thought I integrated it properly so it doesn't matter if there's another broadcast happening, but obviously I was wrong.

[garmjs]

I'm getting the same error with react-router v4, i think i'm goin to use @madeinfree fix for now

[mxstbr]

Can replicate – working on a fix now! 🔥

[mxstbr]

Could you try out #86 in your project and report back if it fixes the issue? It did for me in a simple test, but I want to make 100% sure!

[madeinfree]

I can try ~~ 👍🏻

[gbozee]

Just tested the PR #86 . Issue resolved. 👍

[mxstbr]

Awesomeee, thanks!

[mxstbr]

Released as 1.0.4 – thanks for reporting and testing this everyone!