nandorojo/moti

Expo Web not working

etiennelacoursiere opened this issue · 8 comments

etiennelacoursiere commented

Is there an existing issue for this?

  • 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

image

Reproduction

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

etiennelacoursiere commented

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

image

etiennelacoursiere commented

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 commented

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

nandorojo commented

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

can I see your webpack config?

nandorojo commented

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

nandorojo commented

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.

  • 🎉2
etiennelacoursiere commented

Yes i confirm that fixes it! Thanks!

nandorojo commented
moti-expo-web-repro.-.11.April.2023.mp4

Cool! Video for reference.