[Bug]: Web Storybook not working with Reanimated v4

[jordmccord]

Version

v5.2.3

Reanimated Version

v4.0.2

Gesture Handler Version

v2

Platforms

Web

What happened?

When upgrading to v4 of reanimated and running a Storybook web instance, which is wrapped in a BottomSheetProvider, I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'out') which refers to the line var ANIMATION_EASING = Easing.out(Easing.exp); this can be resolved by downgrading to v3.

Reproduction steps

• Pull https://github.com/jordmccord/bottomsheet-example
• Run npm install
• Run npm run storybook
• See the error in the console
• Run git checkout working to see working changes (reanimated v3)
• Run npm install
• Run npm run storybook

Reproduction sample

https://github.com/jordmccord/bottomsheet-example snack.expo.dev

[gorhom]

hmm the Easing object is exported from Reanimated for mobile and web. I noticed when i remove the BottomSheetModalProvider i get another error

Uncaught WorkletsError: [Worklets] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details.

[gorhom]

it might be an issue with Vite and Reanimated web configuration

[dannyhw]

@jordmccord have you tried the official storybook framework for react native web vite? https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite

---

Edit: like mo mentioned I think theres issues with worklets currently, I need to figure out why still

[adam-sajko]

Transpile this package with the worklets plugin in storybook: https://github.com/gorhom/react-native-bottom-sheet/issues/2497#issuecomment-3403400207

[dannyhw]

You can just pass it in the framework options instead of vitefinal there is a babel configuration there https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite#example-configuration-for-reanimated

[connorhalldev]

I am running into this same error, downgrading to reanimated v3 works. I tried the above 2 solutions and neither of these worked. Is there any update on a solution for this?

[dannyhw]

@connorhalldev a fix should be in the latest version of reanimated, were you on the latest version?

[connorhalldev]

@dannyhw I was on v4.1.0 but i just tried v4.1.3 and i still get the error Uncaught TypeError: Cannot read properties of undefined (reading 'out') which is coming from the Easing. I also added the modulesToTranspile: ["@gorhom/bottom-sheet"], to the framework options but i still get the error.

[dannyhw]

@connorhalldev Ok I will investigate, I am able to reproduce the error

[dannyhw]

@connorhalldev it seems like the fix is in react-native-worklets 0.6.1

heres the change, check the very last file for the change in the if statement

https://github.com/software-mansion/react-native-reanimated/pull/8241/files

Heres a patch for 0.5.2

diff --git a/lib/module/initializers.js b/lib/module/initializers.js
index d012b5093956744fac0aa3d7fe9df734b20d191a..62ecc33146754b52e1487c90aae9fe97318fdedc 100644
--- a/lib/module/initializers.js
+++ b/lib/module/initializers.js
@@ -104,7 +104,7 @@ function initializeRuntime() {
 
 /** A function that should be run only on React Native runtime. */
 function initializeRNRuntime() {
-  if (__DEV__) {
+  if (__DEV__ && !SHOULD_BE_USE_WEB) {
     const testWorklet = () => {
       'worklet';
     };
diff --git a/src/initializers.ts b/src/initializers.ts
index dc252b387093cf6839a97f0d08e96581839dab16..fd180700c777e02ffa056a497ad6b10f43007de8 100644
--- a/src/initializers.ts
+++ b/src/initializers.ts
@@ -117,7 +117,7 @@ function initializeRuntime() {
 
 /** A function that should be run only on React Native runtime. */
 function initializeRNRuntime() {
-  if (__DEV__) {
+  if (__DEV__ && !SHOULD_BE_USE_WEB) {
     const testWorklet = () => {
       'worklet';
     };

[connorhalldev]

!SHOULD_BE_USE_WEB

That did the trick! Thank you!