How are we supposed to handle app-wide context when substituting Plasmic components?

Developer Support
1

hey plasmic team. How are we supposed to handle application wide context when substituting plasmic components? I get persitent error that the hook is not defined Plasmic: Encountered error while prepass rendering: TypeError: Cannot destructure property 'menuIsOpen' of '(0 , src_store_state__WEBPACK_IMPORTED_MODULE_1__.useAppContext)(...)' as it is undefined.
I guess I could create the context within plasmic, but I kind of doesn’t make sense

2

Can you explain a little bit more of the setup that you have?

3

I’m using nextJS and I have a application wide context to control states like the mobile-nav-menu. Then, to avoid defining the action on the hamburger icon on every page i am substituting the plasmic component with my own, which is basically the same component with onclick actions that handle those states from the application context (the routes are quite complex, so a single catchall won’t do).
The problem is that it works sometimes, but others i get that error.

4

The error happened while prepass rendering. The “prepass” is where we try to fake-render the React tree to try to get all the data fetches to fire, so we can cache them. However, during the fake-render, your component is running into an error because it is expecting AppContext to exist (useAppContext() returns undefined). You could try making sure that it is defined, like so:

const queryCache = await extractPlasmicQueryData(
  <AppContext> // <-- Define your context
    <PlasmicRootProvider>
      ...
);
5

Oh damn that makes total sense! Thanks you so much