search

Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.
https://shopify.github.io/restyle/
MIT License
2.86k stars 128 forks source link

undefined is not a function [buildStyle(@shopify/restyle/dist/composeRestyleFunctions)] #291

Open isaachinman opened 4 months ago

isaachinman commented 4 months ago

Current behavior

I was just notified of a fatal error via Sentry. The stack trace is below.

It's probably relevant to note that this crash occurred immediately after a user touch event: Touch event within element: Text.

Expected behavior

The @shopify/restyle package should never fatally crash a RN app, regardless of user error or incorrect configuration.

I suspect this crash was somehow due to incorrect configuration, but I have no idea how/where, and moreover the crash only occurred on a single user device, across hundreds of sessions/devices.

Stack trace

TypeError: undefined is not a function
  at buildStyle(/node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:38:44)
  at func(/node_modules/@shopify/restyle/dist/createVariant.js:36:80)
  at buildStyle(/node_modules/@shopify/restyle/dist/composeRestyleFunctions.js:38:44)
  at anonymous(/node_modules/@shopify/restyle/dist/hooks/useRestyle.js:40:55)
  at HooksDispatcherOnMount.useMemo(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:4062:30)
  at exports.useDeferredValue(/node_modules/react/cjs/react.production.min.js:25:215)
  at useRestyle(/node_modules/@shopify/restyle/dist/hooks/useRestyle.js:39:46)
  at createRestyleComponent(/node_modules/@shopify/restyle/dist/createRestyleComponent.js:25:51)
  at renderWithHooks(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:3525:22)
  at updateForwardRef(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:4316:30)
  at beginWork$1(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7929:25)
  at performUnitOfWork(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7304:25)
  at workLoopSync(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7297:54)
  at renderRootSync(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7279:19)
  at performSyncWorkOnRoot(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6975:34)
  at flushSyncCallbacks(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:2145:31)
  at batchedUpdatesImpl(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8462:58)
  at batchedUpdates(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:30)
  at _receiveRootNodeIDEvent(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:17)
  at ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches(/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1209:30)
  at apply(native)
  at __callFunction(/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:433:34)
  at __guard$argument_0(/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:26)
  at __guard(/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:11)
  at callFunctionReturnFlushedQueue(/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:17)

To Reproduce

TBD.

Platform:

Environment

@shopify/restyle@v2.4.2

isaachinman commented 4 months ago

Update: after digging deeper, this was indeed user error. The new Expo router exposes error boundaries, and our team had incorrectly used Restyle theme elements which expected a ThemeProvider, but none was present.

I think all that needs to be done here is to surface the error in a much more straightforward way. Perhaps just throw a straightforward "No ThemeProvider" error?