Multi Zustands - Seems like you have not used zustand provider as an ancestor.

[bknill]

Hi!

I'm using React Three Fiber( with Drei), ReactFlow and Plate (all of which use Zustand internally), in React App that uses Redux for state management.

I'm getting this error

context.js:32 Uncaught Error: Seems like you have not used zustand provider as an ancestor.
    at useStoreApi (context.js:32:1)
    at slicedToArray.js:7:1

I've got no idea where this is coming from!

On I think pages that are using the Plate text editor, which is within a drei HTML component where the Redux state is passed in

             const ContextBridge = useContextBridge(ReactReduxContext);
            ....
          <ContextBridge>
            <Wrapper ref={ref} readOnly={!editing} id={'text-editor'} className="box">
              <TextEditor
                textId={entity.textId}
                readOnly={!editing}
                parentId={entity.id}
                parentType={EntityTypes.ACTION_ENTITY}
              />
            </Wrapper>
          </ContextBridge>

This error has only recently started turning up, I assume on of the libraries has updated how they manage content.

If I comment this out, I still get the error - but on pages where this text component isn't present I never see this error.

Any idea how to get rid of it?

[dai-shi]

Can you identify which version works and which version causes an error?

[bknill]

Thanks hmm it's hard to tell I'll try rolling back the libraries and see if anything changes

[doshiparth642]

context.js:32 Uncaught Error: Seems like you have not used zustand provider as an ancestor. at useStoreApi (context.js:32:1) at useViewportHelper (toConsumableArray.js:7:1) at useReactFlow (toConsumableArray.js:7:1) at NestedFlow (NestedFlow.tsx:127:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1)

hi guys, i have an same issue i used React flow render Package version(10.3.17) and got same error because of using useReactFlow. And distract Zoom In And Zoomout.

so, I think you have to write your own own logic for Zoom in and Zoom out on button click

url -> https://www.geeksforgeeks.org/how-to-zoom-in-and-zoom-out-image-using-reactjs/

[dai-shi]

To confirm, if you don't use context with zustand, there's no issue, right?

[bknill]

The issue I had was a random <Handle /> attempting to render outside of React Flow Renderer

[doshiparth642]

I think this is the problem of useReactflow() that error can occur when distract properties in zoomin, zoomout in react-flow-renderer

[open-cipher]

This might be helpful -> https://reactflow.dev/docs/guides/troubleshooting/#warning-seems-like-you-have-not-used-zustand-provider-as-an-ancestor, I had a similar issue when calling useReactFlow.

[moklick]

This might be helpful -> https://reactflow.dev/docs/guides/troubleshooting/#warning-seems-like-you-have-not-used-zustand-provider-as-an-ancestor, I had a similar issue when calling useReactFlow.

That link answers the question. It's a React Flow issue and can be closed!