Skeloton erroring in web

[AlejandroGutierrezB]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Nextjs Production build errors: framework-5aea5e833474e66c.js:9 TypeError: Cannot read properties of null (reading 'value') at e (410-e4c8d19a8e3bd9ef.js:1:117517) at e (410-e4c8d19a8e3bd9ef.js:1:117579) at e (410-e4c8d19a8e3bd9ef.js:1:117579) at e (410-e4c8d19a8e3bd9ef.js:1:117465) at e (410-e4c8d19a8e3bd9ef.js:1:117579) at g (410-e4c8d19a8e3bd9ef.js:1:117728) at P.animate (410-e4c8d19a8e3bd9ef.js:9:11698) at 410-e4c8d19a8e3bd9ef.js:9:14899 at ap (framework-5aea5e833474e66c.js:9:60417) at un (framework-5aea5e833474e66c.js:9:73285)

works in dev

Expected Behavior

Work fine like in dev

Steps To Reproduce

import { Skeleton } from 'moti/skeleton'

const Component = () => {
return (
<Skeleton width={250} />
)

Versions

- Moti: "0.24.2" (was in "0.19.0-alpha.6" an updated it but still not working)
- Reanimated: "~2.9.1"
- React Native: "0.69.6"

I am using solito with nativewind starter with following dependancies:
https://moti.fyi/next also checked that config matches the docs

root: {
  "dependencies": {
    "expo-linking": "~3.2.4",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.6"
  }
}

packages/app/ : {
    "dependencies": {
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "moti": "0.24.2",
    "nativewind": "2.0.9",
    "react-error-boundary": "^3.1.4",
    "react-native-reanimated": "2.9.1",
    "solito": "^2.0.0"
  },
}

apps/next: {
    "dependencies": {
    "@expo/next-adapter": "^4.0.12",
    "app": "*",
    "next": "13.0.1",
    "raf": "^3.4.1"
  },
}

apps/expo: {
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "app": "*",
    "expo": "~46.0.19",
    "expo-dev-client": "~1.3.1",
    "expo-linear-gradient": "~11.4.0",
    "expo-linking": "~3.2.4",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.6",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-web": "~0.18.7"
  }
}

Screenshots

Reproduction

Fix might be similar to https://github.com/nandorojo/moti/issues/275

[nandorojo]

you need to upgrade to reanimated 3 or use the reanimated SWC/babel plug-in

[AlejandroGutierrezB]

I am using the reanimated SWC/babel plug-in that came with starter is there somewhere I can check for different plugin versions?

Or any guide to upgrade the stack to latest expo sdk?

[nandorojo]

the latest examples for web require reanimated 3.0.2+.

for expo, you can run expo upgrade in apps/expo. after that, increase the reanimated version and build a dev client with expo run:ios (can’t use expo go).

lastly, check your next config for any SWC plugins and remove them

[nandorojo]

check out the solito release notes