Unable to resolve modules on latest Expo with Metro web

[damyyyy]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
When running npx expo start, i got the following error when trying to open web:

Web Bundling failed 20984ms
Unable to resolve "graphql" from "node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js"
Web Bundling failed 114456ms
Unable to resolve "process" from "node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js"

Metro error: Unable to resolve module process from /home/d/expo49/node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js: process could not be found within the project or in these directories:

On mobile (Expo GO) it works as expected and doesn't show the error. It probably comes from the metro for web.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.
clone https://github.com/EvanBacon/expo-router-instagram-layout then install amplify auth:
yarn add aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage
then run npx expo

What is the expected behavior?
To fix the error when accessing on web (on mobile it works well)

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname, {
isCSSEnabled: true,
});

config.resolver.sourceExts.push("svg");

config.resolver.assetExts = config.resolver.assetExts.filter(
(ext) => !config.resolver.sourceExts.includes(ext)
);

config.transformer.babelTransformerPath = require.resolve(
"./metro.transformer.js"
);

module.exports = config;

my environment:
System:
OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (4) x64 Intel(R) Pentium(R) Gold 7505 @ 2.00GHz
Memory: 1.99 GB / 3.73 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v19.3.0/bin/yarn
npm: 9.3.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
npmPackages:
@babel/core: ^7.19.3 => 7.21.8
@babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9
@react-native-async-storage/async-storage: ^1.18.2 => 1.18.2
@react-native-community/netinfo: ^9.3.10 => 9.3.10
@types/react: ^18.2.6 => 18.2.8
HelloWorld: 0.0.1
amazon-cognito-identity-js: ^6.2.0 => 6.2.0
aws-amplify: ^5.2.5 => 5.2.5
expo: ^49.0.0-alpha.3 => 49.0.0-alpha.3
expo-constants: ~14.3.0 => 14.3.0
expo-image-picker: ~14.1.1 => 14.1.1
expo-linking: ~4.1.0 => 4.1.0
expo-router: ^1.7.1 => 1.7.1
expo-splash-screen: ~0.19.0 => 0.19.0 (0.18.2)
expo-status-bar: ~1.5.0 => 1.5.0
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-gesture-handler: ~2.9.0 => 2.9.0
react-native-reanimated: ~3.0.2 => 3.0.2
react-native-safe-area-context: 4.5.0 => 4.5.0
react-native-screens: ~3.20.0 => 3.20.0
react-native-svg: 13.4.0 => 13.4.0
react-native-svg-transformer: ^1.0.0 => 1.0.0
react-native-web: ~0.18.7 => 0.18.12
sass: ^1.62.1 => 1.62.1
typescript: ^5.0.4 => 5.1.3
npmGlobalPackages:
@aws-amplify/cli: 10.6.1
amplify-category-video: 3.9.2
aws-cdk: 2.76.0
corepack: 0.15.3
eas-cli: 3.7.2
npm: 9.3.0
yarn: 1.22.1

[huntie]

Unable to resolve "graphql" from "node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js"

Was unable to replicate this, try reinstalling node_modules?

Unable to resolve "process" from "node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/index.js"

I don't think using this package (@aws-sdk/util-user-agent-node) will be possible within React Native Web unfortunately, since process (and also os) are Node.js built in modules. While some Node packages may work in React Native contexts, this isn't something we explicitly support, since modules are compiled (via Babel) and then execute at runtime in the browser or on device.

In this case, React Native does support process.env referenced instead as a global, but the use of os would remain problematic — and this is not something in-scope for transformation via Babel.

---

• Unable to resolve modules on latest Expo with Metro web aws-amplify/amplify-js#11474

[robhogan]

@huntie @aws-sdk packages theoretically support RN, and use browser-redirection-style react-native fields - this package in particular tries to redirect ./runtimeConfig (see https://unpkg.com/browse/@aws-sdk/client-lex-runtime-service@3.8.1/package.json) and it looks like that's failing and hitting the Node JS runtime instead.

There's been lots of work in that area - maybe we've intentionally changed something there, or there's been a regression?

[oliviercperrier]

I also get this new error after upgrading expo 49:

Unable to resolve "make-plural" from "node_modules/i18n-js/dist/import/Pluralization.js"

[younes0]

This could solve: add support for .mjs files in metro.config.js:

config.resolver.sourceExts.push("mjs");

[seanblonien]

@younes0 thank you!! adding .mjs to sourceExts fixed it for me! 🎉

I was seeing this with styled-components for web bundling

Web Bundling failed 5439ms
Unable to resolve "stylis" from "node_modules/styled-components/dist/styled-components.browser.esm.js"

[damyyyy]

Indeed, I can confirm adding this line solved the problem. Thank you @younes0 !

[eightyfive]

@younes0 the 👑

🙏

[DAVIS-PYTH]

@younes0 thanks for this.
I was getting :

Web Bundling failed 2164ms
Unable to resolve "graphql" from "node_modules/graphql-tag/lib/index.js"

[ricardoribas]

@younes0 thanks a lot. It seemed to solve the problem 😄

[markedwards]

I have the same issue as @DAVIS-PYTH, but adding config.resolver.sourceExts.push("mjs"); is not fixing it for me.

I still get this when building for web (works fine on mobile):

Unable to resolve "graphql" from "node_modules/graphql-tag/lib/index.js"

[markedwards]

I have the same issue as @DAVIS-PYTH, but adding config.resolver.sourceExts.push("mjs"); is not fixing it for me.

This turned out to be a mysterious issue related to using metro.config.cjs instead of metro.config.js. No idea why, but renaming it made this above fix work.

[robhogan]

This turned out to be a mysterious issue related to using metro.config.cjs instead of metro.config.js. No idea why, but renaming it made this above fix work.

metro.config.cjs is ignored by Metro prior to 0.78.0 (which you're unlikely to be using in a stable RN/Expo version), so you would've been working off a default config. #1027 add support for it.

[markedwards]

Thanks @robhogan.

I’m also seeing this error when hot-reloading a project file, when a web client is connected. No error with iOS or Android clients.

The error isn’t fatal, everything still seems to work. It’s just clutter in the console output.

[learncreateconquer]

This could solve: add support for .mjs files in metro.config.js:

config.resolver.sourceExts.push("mjs");

Issue on Web build: Unable to resolve "graphql" from "node_modules/graphql-tag/lib/index.js"
Working fine on Native.

Adding this line of code solve the problem. Thank you

[jeancatarina]

this fixed to me

metro.config.js

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

module.exports = (() => {
	const config = getDefaultConfig(__dirname, {
		isCSSEnabled: true,
	})

	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", "cjs", "mjs"],
	}

	return config
})()