Error when trying to use Preact Signals with React Native Skia

[elliotwaite]

Trying to use @preact/signals-react with @shopify/react-native-skia results in the following error:

Uncaught TypeError: dispatcher.useSyncExternalStore is not a function
    at useSyncExternalStore (react.development.js:1671:1)
    at Object.apply (signals.module.js:1:1)
    at renderWithHooks (react-reconciler.development.js:6412:1)
    at mountIndeterminateComponent (react-reconciler.development.js:9238:1)
    at beginWork (react-reconciler.development.js:10476:1)
    at HTMLUnknownElement.callCallback (react-reconciler.development.js:12184:1)
    at Object.invokeGuardedCallbackDev (react-reconciler.development.js:12233:1)
    at invokeGuardedCallback (react-reconciler.development.js:12292:1)
    at beginWork$1 (react-reconciler.development.js:16531:1)
    at performUnitOfWork (react-reconciler.development.js:15337:1)
    at workLoopSync (react-reconciler.development.js:15268:1)
    at renderRootSync (react-reconciler.development.js:15231:1)
    at performSyncWorkOnRoot (react-reconciler.development.js:14821:1)
    at react-reconciler.development.js:2546:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority (react-reconciler.development.js:2495:1)
    at flushSyncCallbackQueueImpl (react-reconciler.development.js:2541:1)
    at flushSyncCallbackQueue (react-reconciler.development.js:2528:1)
    at scheduleUpdateOnFiber (react-reconciler.development.js:14421:1)
    at Object.updateContainer (react-reconciler.development.js:18229:1)
    at render (Canvas.js:19:1)
    at Canvas.js:50:1
    at commitHookEffectListMount (react-dom.development.js:22969:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24702:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24666:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24653:1)
    at commitPassiveMountEffects (react-dom.development.js:24641:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26848:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at react-dom.development.js:26597:1
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at performWorkUntilDeadline (scheduler.development.js:533:1)
    at run (setImmediate.js:40:1)
    at runIfPresent (setImmediate.js:69:1)
    at onGlobalMessage (setImmediate.js:109:1)

The above error occurred in the <Group> component:

    at Object.apply (http://localhost:19006/static/js/bundle.js:1835:188)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-reconciler.development.js:11782
update.callback @ react-reconciler.development.js:11815
callCallback @ react-reconciler.development.js:3699
commitUpdateQueue @ react-reconciler.development.js:3720
commitLifeCycles @ react-reconciler.development.js:12648
commitLayoutEffects @ react-reconciler.development.js:15993
callCallback @ react-reconciler.development.js:12184
invokeGuardedCallbackDev @ react-reconciler.development.js:12233
invokeGuardedCallback @ react-reconciler.development.js:12292
commitRootImpl @ react-reconciler.development.js:15716
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority @ react-reconciler.development.js:2495
commitRoot @ react-reconciler.development.js:15551
performSyncWorkOnRoot @ react-reconciler.development.js:14857
(anonymous) @ react-reconciler.development.js:2546
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority @ react-reconciler.development.js:2495
flushSyncCallbackQueueImpl @ react-reconciler.development.js:2541
flushSyncCallbackQueue @ react-reconciler.development.js:2528
scheduleUpdateOnFiber @ react-reconciler.development.js:14421
updateContainer @ react-reconciler.development.js:18229
render @ Canvas.js:19
(anonymous) @ Canvas.js:50
commitHookEffectListMount @ react-dom.development.js:22969
commitPassiveMountOnFiber @ react-dom.development.js:24702
commitPassiveMountEffects_complete @ react-dom.development.js:24666
commitPassiveMountEffects_begin @ react-dom.development.js:24653
commitPassiveMountEffects @ react-dom.development.js:24641
flushPassiveEffectsImpl @ react-dom.development.js:26848
flushPassiveEffects @ react-dom.development.js:26801
(anonymous) @ react-dom.development.js:26597
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27329
ensureRootIsScheduled @ react-dom.development.js:25522
retryTimedOutBoundary @ react-dom.development.js:27019
resolveRetryWakeable @ react-dom.development.js:27065
Promise.then (async)
(anonymous) @ react-dom.development.js:24172
attachSuspenseRetryListeners @ react-dom.development.js:24154
commitWork @ react-dom.development.js:24095
commitMutationEffectsOnFiber @ react-dom.development.js:24375
commitMutationEffects_complete @ react-dom.development.js:24228
commitMutationEffects_begin @ react-dom.development.js:24217
commitMutationEffects @ react-dom.development.js:24187
commitRootImpl @ react-dom.development.js:26638
commitRoot @ react-dom.development.js:26517
finishConcurrentRender @ react-dom.development.js:25775
performConcurrentWorkOnRoot @ react-dom.development.js:25648
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
performWorkUntilDeadline @ scheduler.development.js:538
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27329
ensureRootIsScheduled @ react-dom.development.js:25522
scheduleUpdateOnFiber @ react-dom.development.js:25316
updateContainer @ react-dom.development.js:28635
./node_modules/react-dom/cjs/react-dom.development.js.ReactDOMHydrationRoot.render.ReactDOMRoot.render @ react-dom.development.js:29048
./entry.js @ entry.js:12
__webpack_require__ @ bootstrap:832
fn @ bootstrap:129
1 @ log.js:59
__webpack_require__ @ bootstrap:832
(anonymous) @ bootstrap:970
(anonymous) @ bootstrap:970
react.development.js:1671

Steps to reproduce:

1. Clone this repo: https://github.com/elliotwaite/expo-46-skia-preact-signals-test
2. Run yarn (to install the dependencies)
3. Run yarn web (to run the expo web version)

You can also comment out the lines that import and use preact signals to see that it works without any errors in that case.

From looking at this Stack Overflow question about the same error (Uncaught TypeError: dispatcher.useSyncExternalStore is not a function), it seems like it may be related to React 18 support. Does Preact Signals support using React 18 at the moment?

[rschristian]

Does Preact Signals support using React 18 at the moment?

useSyncExternalStore is a React v18 construct, so yes. Though we use the shim (from the React team) to also support v17.

Might be a react-native issue, I don't think anyone's really tested/investigated using Signals with it (to my knowledge, anyways).

[elliotwaite]

useSyncExternalStore is a React v18 construct, so yes. Though we use the shim (from the React team) to also support v17.

Ah, okay.

Might be a react-native issue, I don't think anyone's really tested/investigated using Signals with it (to my knowledge, anyways).

I've been testing it out with React Native and it seems to be working as expected in most cases. Here's a Snack demo that demonstrates it working on Android, iOS, and web (using React Native Web).

The only issues I've run into so far are trying to use Preact Signals with React Native Skia or trying to use it with React Navigation (as is mentioned in this issue).