search

kentcdodds / mdx-bundler

🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
MIT License
1.78k stars 75 forks source link

useContext is not working as expected #144

Closed jacargentina closed 2 years ago

jacargentina commented 2 years ago

https://github.com/jacargentina/remix-mdx-test

Captura de Pantalla 2022-01-12 a la(s) 21 56 07

@kentcdodds as promised, here is the demo for the useContext problem, as I pointed on discord today.

Cheers!

UPDATE: added a commit with a hackish? way to solve it. I hope there is a better approach?

Captura de Pantalla 2022-01-13 a la(s) 14 48 13
jacargentina commented 2 years ago

SOLVED

The server-side rendered MDX , even if having a Context Provider and child like this:

<AppProvider>
  <Demo />
</AppProvider>

...Will not be the same context provider as on client side, when <Demo/> is mounted via getMDXComponent

Solution: the AppProvider does this.

Captura de Pantalla 2022-01-13 a la(s) 23 31 01

So <Demo/> (in my case I need two utility functions that interact to show a modal on the page) can access them via window globally

aliceHendicott commented 1 year ago

Hey @jacargentina, did you ever find a better way to solve this issue? I'm encountering something similar when using styled-components that reference a theme context and don't think it can be solved by exposing the theme globally unless we also change all the references to that theme.