Uncaught Error: Invariant failed: You can only use useNode in the context of <Editor />.

[rafark]

Describe the bug I've wrapped my entire app in an Editor component and I'm still getting this error when using useNode() in a "related" settings component. It works fine when using it in a UserComponent, but everytime i want to useNode inside a related settings component i get an error.

const root = ReactDOM.createRoot(
  document.getElementById('automated-emails-dashboard') as HTMLElement
);

root.render(
  <React.StrictMode>
    <Provider store={store}>
        <Editor resolver={namedWatchedComponents}>
            <DevTools />
            <App />
        </Editor>
    </Provider>
  </React.StrictMode>
);

export const TextSource: TextComponent & UserComponent<TextProps> = ({text}) => {
    const {connectors: {connect, drag}} = useNode()

    return <Text craftsRef={(ref: HTMLElement) => connect(drag(ref))} text={text}/>
}

TextSource.craft = {
    related: {
        settings: ComponentPreferences
    }
}

ComponentPreferences.tsx in another directory:

const ComponentPreferences: FC<{}> = () => {
    const node = useNode()
    return <div>
                The settings here
           </div>;
}

Uncaught Error: Invariant failed: You can only use useNode in the context of <Editor />.

Please only use useNode in components that are children of the <Editor /> component. at invariant (tiny-invariant.js:12) at ye (index.js:1) at me (index.js:1) at ComponentPreferences (ComponentPreferences.tsx:11) at renderWithHooks (react-dom.development.js:16305) at mountIndeterminateComponent (react-dom.development.js:20074) at beginWork (react-dom.development.js:21587) at beginWork$1 (react-dom.development.js:27426) at performUnitOfWork (react-dom.development.js:26557) at workLoopSync (react-dom.development.js:26466) invariant @ tiny-invariant.js:12 ye @ index.js:1 me @ index.js:1 ComponentPreferences @ ComponentPreferences.tsx:11 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 beginWork$1 @ react-dom.development.js:27426 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performConcurrentWorkOnRoot @ react-dom.development.js:25750 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533