Expo Web not working

[etiennelacoursiere]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I have an expo project on SDK 46 with Moti and everything is working great. Today i am trying to upgrade to expo SDK 48 and i'm encountering some error related to Moti and prevent the app from building. I only tried web for now by pressing w in the terminal so i didn't start a new dev-client built as web don't use it (i think? 🤔 ). I'm sure these errors are config errors but i can't find what i'm doing wrong.

Expected Behavior

The project build.

Steps To Reproduce

No response

Versions

- Moti: ^0.24.2
- Reanimated: ~3.0.2
- React Native: 0.71.6

Screenshots

Reproduction

https://github.com/etiennelacoursiere/moti-web-crash

[etiennelacoursiere]

I added a reproduction.

I started with npx create-react-native-app -t with-moti then added npx expo install @expo/webpack-config and added a webpack config file like described in the docs. I tried with both @motify and without it in the dangerouslyAddModulePathsToTranspile as the doc says it's not needed for moti 0.19+.

In this reproduction, when i tried to start the web app, i got the same error i got in my project

[etiennelacoursiere]

If anyone have the same problem, setting @expo/webpack-config to 0.17.4 instead of the latest 18.0.3 seems to fix the problem for now. Also from what I understand, webpack config will be deprecated in favor of using metro bundler soon.

[nandorojo]

hmm, can you try yarn why moti and yarn why framer-motion?

[nandorojo]

did you follow the expo web docs? https://moti.fyi/web#expo-web-support

can I see your webpack config?

[nandorojo]

oh i see, it says there’s no dist/framer-motion…interesting

[nandorojo]

Okay I solved it. To fix it, I deleted the webpack.config.js file. It seems that it's no longer needed.

I just did the following:

npx create-react-native-app -t with-moti
# cd into it
yarn add  @expo/webpack-config moti
yarn web

I got a Reanimated error in the console and added this to my App.js:

import { Platform, Pressable, StyleSheet } from "react-native";
if (Platform.OS === "web") {
  window._frameTimestamp = null;
}

I'll update the docs.

[etiennelacoursiere]

Yes i confirm that fixes it! Thanks!

[nandorojo]

https://user-images.githubusercontent.com/13172299/231235590-e91d58df-2d40-4191-b791-7defb372c0cc.mp4

Cool! Video for reference.