Doesn't work with TransitionLink

[sashafklein]

Total bummer -- this package seems really great!

I isolated the problem trying to get this set up -- if I include both this plugin and gatsby-plugin-transition-link, this doesn't work. Specifically, using the Link in the package with an asModal prop or a regular Link with state={{modal: true}}, the modal prop passed into the render props of the Consumer component (I'm using the starter example ConditionalLayout component verbatim) is undefined.

If I remove TransitionLink from the plugin list and restart, this works perfectly. Reversing the plugin order doesn't seem to fix anything.

I think the problem has to do with React.createContext. Possibly, the contexts in the two plugins are overwriting one another.

I'd love to help, but I'm unfamiliar with how the plugin is inserted into the app (in particular, where the contexts are rendered). I'll continue to try to poke around and make a PR if I figure this out, but I wanted to start an issue now that I've pinpointed what seems to be causing the problem.

[lsirivong]

Hey @sashafklein! Sorry to hear the trouble you're having here. If you could spin up a sample project it would help me take a look at this more quickly and understand what the issues are here.

[mhigley]

@sashafklein Have you had any success with getting this package to work with TransitionLink? I am trying to do the same. @lsirivong Are there any updates to this issue? Examples or clarifications?

[sashafklein]

@lsirivong -- So sorry! I guess my notifications were off. I ended up moving in another direction, and didn't make the modals navigable, so didn't figure this out.

[zuzy-dev]

hey @lsirivong, @mhigley -- hope you’re doing well in this crazy times.

i'm also running into this.

i prepared this codesandbox

the link-component can be found in '../components/PostListing' (line 29) when removing "gatsby-plugin-transition-link", from gatsby-config.js and restarting the sandbox the modal works as exspected.

maybe you have a hint to solve this interference. thanks!

EDIT: Here is a more simple example codesandbox, based on gatsby-starter.

[lsirivong]

@lucasdon thank you!

Frankly, I'm not spending much time working on gatsby sites so I'm not able to dig into this. What I can say is the this plugin uses link state to signal that the modal should be rendered. I noticed that gatsby-plugin-transition-link calls navigate manually it some places, so maybe the state is getting lost somehow.

Happy to help shepherd PRs or advise anyone who's looking into the issue if it would be helpful, but I'm probably not going to be able to dig into this deeply anytime soon.