nandorojo/moti

Cannot make this work with Expo 45

Closed this issue · 7 comments

SleeplessByte commented

Is there an existing issue for this?

  • I have searched the existing issues

Workaround

#199 (comment)

Current Behavior

I've started upgrading to expo 45

  • Moti 0.17.1 and below fail because they rely on a feature in react-native-reanimated (reanimated2) that was remove (see software-mansion/react-native-reanimated#3143).
  • Moti 0.18.0 no longer fails on the issue listed for 0.17.1 but complains about framer-motion.

Now, I assume that the framer-motion issue is actually upstream / has to do with how webpack is importing the dependency, but I couldn't find in the instructions how to make this work. Perhaps you have some guidance?

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 34:2-10
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 74:31-45
Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)
./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 144:29-43
[... many more ...]

Expected Behavior

It works without these errors

Steps To Reproduce

  1. npx create-react-native-app -t with-moti
  2. yarn add expo-cli -D
  3. yarn expo upgrade
  4. Y (proceed)
  5. Y (upgrade to 45.0.0)
  6. Upgrade moti to 0.17.1
  7. yarn install
  8. yarn web (it doesn't work)
  9. Upgrade moti to 0.18.0
  10. yarn install
  11. yarn web (it doesn't work)

Versions

- Moti: 0.18.0
- Reanimated: 2.8.0
- React Native: 0.68.2

Screenshots

No response

Reproduction

https://github.com/SleeplessByte/broken-moti-18-expo-45

nandorojo commented

is the framer issue a web issue only?

SleeplessByte commented

Yes, because framer-motion is not imported on native (as far as I can tell)

nandorojo commented

it is imported on native, so this must be an expo web issue. it works fine for me with next.js

SleeplessByte commented

Do you set up next.js differently (like, is it not using webpack)?
It feels like a babel/webpack issue, and that would indeed point to expo web's configuration.

nandorojo commented

no, I think it's just an issue with expo's webpack config or something

does this help?

webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve.alias['framer-motion'] = 'framer-motion/dist/framer-motion';
 
  return config;
};

I got the idea to alias the imports from here: https://stackoverflow.com/a/70387589/7869175

  • 👍4
  • ❤️2
SleeplessByte commented

@nandorojo yes.

I had to rm -rf .expo/web after doing a fresh node_modules, but it then worked.

  • 👍2