Updated Expo Router + Expo -> Unable to resolve "framer-motion" from "node_modules/moti/build/core/index.js"

[johnmccants002]

I get this error on when trying to launch on Web: Unable to resolve "framer-motion" from "node_modules/moti/build/core/index.js"

"expo": "~49.0.0",
"moti": "^0.25.3",
"expo-router": "2.0.0",

Everything was working fine until I updated Expo Router and Expo. I ran npm i framer-motion and that didn't work either. Any ideas?

[flowgrow]

same problem here. were you able to resolve this?

[johnmccants002]

I have not. I just removed Moti for the time being. If you solve it let me know 😃

[nandorojo]

Please try this answer: #303 (comment)

[flowgrow]

I think the problem is, that expo 49 uses metro instead of webpack as its bundler, and you somehow have to configure metro to handle this. problem is, I have no idea how

[nandorojo]

are you using npm? npm i moti —legacy-peer-deps is what’s in the docs. does that help

[flowgrow]

yes i am using npm, yes i installed with legacy peers

[borstessi]

any news on this topic? We cannot roll out OTA Updates currently.

[nandorojo]

Are you implying that this affected your native OTA build? This is a web-only issue.

In any case, the solution is posted.

[johnmccants002]

I ended up upgrading to "moti": "^0.26.0" and adding "mjs" to my sourceExts in my metro.config.js and it worked. resolver: { assetExts: assetExts.filter((ext) => ext !== "svg"), sourceExts: [...sourceExts, "svg", "mjs"], }

[nandorojo]

This error is due to Metro web. Please see this solution:

In your metro config file:

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.assetExts.push(
  // Adds support for framer-motion
  'mjs’
);

config.resolver.assetExts.push(
  'cjs’
);

module.exports = config;

[nandorojo]

weird, maybe expo router would be a good place to ask

[nandorojo]

Hey guys, does this fix it?

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: true,
  },
});

+config.resolver.sourceExts.push('mjs');
+config.resolver.sourceExts.push('cjs');

module.exports = config;

[abanobboles]

for me not, but what is working is not to use the static output for web,

[SomayChauhan]

this fixed it for me, thankyou!!

[janziemba]

It worked, thank you, Fernando!