In useContextSelector(.., selector: (v) => ...) the argument v is not the valid context value type

[NotYoojun]

Hi there,

I use the following code to create the EditorContext:

export const EditorContext = createContext<EditorContextValues>(defaultContextValues);

export default function EditorProvider({ children }: { children: ReactNode }) 
{
    const _preferences = useStateEx(EditorPreferencesDefaults);
    const _states = useStateEx(EditorStatesDefaults);

    // ...

    return (
        <EditorContext.Provider value={value}>
            {children}
        </EditorContext.Provider>
    );
}

And below is a wrapper for useContext:

export type EditorContextSelected<T> = T & Pick<EditorContextValues, "onContextSave" | "onContextUpdate" | "onContextUpdateDelay">;

export default function useEditorContextSelector<selected extends object>(selector: (value: EditorContextValues) => selected) : EditorContextSelected<selected>
{
    const context = useContextSelector(EditorContext, (v) => 
    { 
        const value = v;
        const selectorResult = selector(value);


        return { 

            ...selectorResult,

            onContextSave: value.onContextSave,
            onContextUpdate: value.onContextUpdate,
            onContextUpdateDelay: value.onContextUpdateDelay,

        }
    });

    if (!context) throw new Error("useThemeSettingsContext must be use inside SettingsProvider");

    return context;
};

But then I use the function useEditorContextSelector like this:

const editor = useEditorContextSelector((v) => 
    {
        return {
            preferences: v.preferences.viewport3d,
            states: v.states.viewport3d,
        }
    });

I got this error in my console:

Uncaught 
TypeError: Cannot read properties of undefined (reading 'viewport3d')
    at viewport-3d.tsx:48:40
    at use-context.ts:18:32
    at useContextSelector (index.js:123:22)
    at useEditorContextSelector (use-context.ts:10:21)
    at Viewport3DScene (viewport-3d.tsx:44:20)
    at renderWithHooks (react-reconciler.development.js:7363:18)
    at mountIndeterminateComponent (react-reconciler.development.js:12327:13)
    at beginWork (react-reconciler.development.js:13831:16)
    at HTMLUnknownElement.callCallback2 (react-reconciler.development.js:14219:14)
    at Object.invokeGuardedCallbackDev (react-reconciler.development.js:14268:16)

After some digging, I found out that the argument v is not the type of EditorContextValues which I want.
It looks like this when I use console.log to inspect it:

I don't know whether this is an internal bug of this package, or it's caused by my incorrect usage.
Has anybody got the same problem? I need this to be fixed as soon as possible.

Thanks!

EDIT 05-19-2024

I'm using @react-three/fiber package on my project. And this issue only appears when I invoke useEditorContextSelector inside a three-fiber element. Invoking it inside a normal react component will not cause this issue.

[dai-shi]

If you are using r3f, it's a different renderer, so BridgeProvider will be necessary.

[NotYoojun]

It worked, thanks 🙏🏻👍🏻