I’ve recently decided to migrate my React Native / Expo project from webpack to metro and I’m following the steps outlined here:
https://docs.expo.dev/router/migrate/from-expo-webpack/
I get no errors from iOS or Android and it seems to be working fine, but on React Native Web I always get this error:
Unable to resolve "../../Utilities/Platform" from "node_modules/react-native/Libraries/NewAppScreen/components/DebugInstructions.js"
Here’s my metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer"),
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"],
extraNodeModules: {
...config.resolver.extraNodeModules,
crypto: require.resolve("expo-crypto")
}
};
config.resolver.sourceExts = [...config.resolver.sourceExts, "ts", "tsx", "js", "jsx", "mjs", "cjs"];
module.exports = config;
Relevant app.json code:
{ "expo":
// more config
"web": {
"favicon": "./assets/favicon.png",
"bundler": "metro"
}
}
When I search for this problem on Stack Overflow there are some unresolved questions, and on github issues it doesn’t seem to be resolved either.
Not sure what I’m doing wrong, will happily provide more code examples if it’s relevant