After updating to expo 52: ReferenceError: _WORKLET | __reanimatedLoggerConfig is not defined

[abretonc7s]

Description

After updating to Expo SDK 52, I encountered a ReferenceError: _WORKLET is not defined error on web platform. This error occurred after running expo install --fix to update dependencies. The error prevents the application from running properly on web.

Relevant dependencies:

{
  "dependencies": {
    "expo": "~52.0.0",
    "react-native-reanimated": "~3.6.1",
    "@react-native-community/slider": "4.5.5",
    "@gorhom/bottom-sheet": "^5.0.5",
    "@gorhom/portal": "~1.0.14"
  }
}

// packages/expo-audio-ui/src/AnimatedCandle/AnimatedCandle.tsx
import { Rect } from '@shopify/react-native-skia'
import React, { useEffect } from 'react'
import { Platform } from 'react-native'
import { useSharedValue, withTiming } from 'react-native-reanimated'

import { CANDLE_OFFCANVAS_COLOR } from '../constants'

export interface AnimatedCandleProps {
    height: number
    x: number
    y: number
    startY: number
    width: number
    color: string
    animated?: boolean
}
const AnimatedCandle: React.FC<AnimatedCandleProps> = ({
    color: targetColor,
    x: targetX,
    y: targetY,
    startY,
    height: targetHeight,
    width,
    animated = true,
}) => {
    const y = useSharedValue(startY)
    const height = useSharedValue(0)
    const x = useSharedValue(targetX)
    const color = useSharedValue(CANDLE_OFFCANVAS_COLOR)

    useEffect(() => {
        if (Platform.OS === 'web') {
            y.value = targetY
            height.value = targetHeight
            x.value = targetX
            color.value = targetColor
            return
        }

        if (animated) {
            y.value = withTiming(targetY, { duration: 500 })
            height.value = withTiming(targetHeight, { duration: 500 })
            x.value = withTiming(targetX, { duration: 500 })
            color.value = withTiming(targetColor, { duration: 500 })
        } else {
            y.value = targetY
            height.value = targetHeight
            x.value = targetX
            color.value = targetColor
        }
    }, [targetY, targetHeight, targetX, targetColor, animated])

    return <Rect x={x} y={y} width={width} height={height} color={color} />
}

export default React.memo(AnimatedCandle)

Steps to reproduce

on Web it seems that using any wtihTiming creates the issue.

Snack or a link to a repository

https://github.com/deeeed/expo-audio-stream/blob/main/apps/playground/src/app/minimal.tsx

Reanimated version

3.6.1

React Native version

0.76.2

Platforms

Android, iOS, Web

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iphone pro 13

Acknowledgements

Yes

[hirbod]

I can confirm the problem. 3.16.* is failing on web for me. 3.15 works fine.

[tjzel]

@hirbod @abretonc7s I'm on it!

[tjzel]

Heyi @abretonc7s @hirbod I tried to reproduce it locally but it didn't work. Could you provide some minimal expo repo where this issue appears?

[MariusCatanoiu]

similar here.
Property '_reanimatedLoggerConfig' doesn't exit
at line 96 in the logger.ts file

[hirbod]

For now, I added

if (Platform.OS === 'web') {
  global._WORKLET = false
  // @ts-expect-error
  global._log = console.log
  // @ts-expect-error
  global._getAnimationTimestamp = () => performance.now()
}

as a hack in my entrypoint. Everything works now, beside reanimatedLoggerConfig, but I don't import configureReanimatedLogger for web.

[tjzel]

@abretonc7s @hirbod @MariusCatanoiu

The supposed fix is available on @next and @nightly versions of Reanimated. Could you install it and see if it resolves the issue?

[abretonc7s]

I tried the latest night build "react-native-reanimated": "3.17.0-nightly-20241124-af73db066"

[tjzel]

Well that sucks 🤔

[hirbod]

That aligns with my observations, as I also tried patch 3.16.2, and it didn’t work.
I’m starting to think this issue occurs when both iOS and the web are running simultaneously and Metro strips code?

Now, let me add a bit more confusion to the topic:

if (Platform.OS !== 'web') {
  // We need to set the log level to error to avoid spamming the console because of NativeWind for now
  configureReanimatedLogger({
    level: ReanimatedLogLevel.error,
  });
} else {
  global._WORKLET = false;
  // @ts-expect-error
  global._log = console.log;
  // @ts-expect-error
  global._getAnimationTimestamp = () => performance.now();
}

This is my "hack." After adding it, changing the if condition from !== to ===, reloading, and then switching it back, the "bug" disappeared—even without the hack. Does that make sense? No. I’m starting to think the Metro bundler and its cache are doing something strange.

[tjzel]

Yes, it happened to me a few times recently that only after git clean -Xdf the Metro cache was properly reset in some exotic cases 🤔