Skip to content

Uncaught Error: Missing Subscribe #265

@SerkanSipahi

Description

@SerkanSipahi

Unfortunately, I don't know what to do because I am very new to the React world and have only worked with Angular until now. Unfortunately, I cannot assign this error. What does "Missing Subscribe" mean? Do I have to subscribe to it myself? If so, what steps are missing here? I have orientated myself on the tests and also on the React page how to build custom hooks.

Sources:
https://github.com/re-rxjs/react-rxjs/blob/main/packages/core/src/bind/connectObservable.test.tsx
https://react-rxjs.org/docs/api/core/bind
https://reactjs.org/docs/hooks-custom.html

Where are my misconceptions of using of react-rxjs?

log://error

Error
Missing Subscribe!
Call Stack
 gv
  vendor.js:1142:15
 mountSyncExternalStore
  vendor.js:23762:20
 Object.useSyncExternalStore
  vendor.js:24701:14
 useSyncExternalStore
  vendor.js:40731:21
 useStateObservable
  vendor.js:1175:101
 useStaticObservable
  vendor.js:1190:37
 App
  main.js:102:30
 renderWithHooks
  vendor.js:23268:18
 mountIndeterminateComponent
  vendor.js:27960:13
 beginWork
  vendor.js:29464:16

file://main.tsx

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

file://app.tsx

export function App() {
  const element = useWatchSelector('video', 0, 250);
  return <div>{radarElement ? 'Found' : 'notFound'}</div>;;
}

file:// use-watch-selector.ts

import { bind } from '@react-rxjs/core';
import { watchSelector } from './radar.observable';
import { useEffect, useState } from 'react';

export function useWatchSelector<Element extends HTMLElement>(
  selector: string,
  startWithInterval = 0,
  interval = 250,
  context: Document | HTMLElement = document,
) {
  const [watchElement, setWatchElement] = useState<Element | null>(null);
  const [useBindValue] = bind(
    watchSelector<Element>(selector, context, interval, startWithInterval), // Obervable<HTMLElement>
  );

  const watchSelectorValue = useBindValue();
  useEffect(() => setWatchElement(watchSelectorValue), [watchSelectorValue]);

  return watchElement;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions