Cannot make this work with Expo 45

[SleeplessByte]

Is there an existing issue for this?

• [X] I have searched the existing issues

Workaround

https://github.com/nandorojo/moti/issues/199#issuecomment-1134805495

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 https://github.com/software-mansion/react-native-reanimated/pull/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]

is the framer issue a web issue only?

[SleeplessByte]

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

[nandorojo]

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

[SleeplessByte]

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]

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

[nicolasteofilo]

@nandorojo Thanks

[SleeplessByte]

@nandorojo yes.

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