Unable to resolve modules on latest Expo with Metro web

[damyyyy]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line
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

Describe the bug

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.

Expected behavior

Expected behavior is that it works fine on web, like on mobile, and doesn't show the error anymore.

Reproduction steps

on expo env:
npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage

create a simple file importing amplify:
import { Auth } from 'aws-amplify';
import { Amplify } from 'aws-amplify';
import awsExports from '@/aws-exports';
Amplify.configure(awsExports);

run "npx expo start" then access http://localhost:19000 on web browser

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line
Logs for your project will appear below. Press Ctrl+C to exit.
Web Bundling failed 6028ms
Unable to resolve "graphql" from "node_modules/@aws-amplify/api-graphql/lib-esm/GraphQLAPI.js"
Web Bundling failed 16517ms
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:
  node_modules/@aws-sdk/client-lex-runtime-service/node_modules
  node_modules
  4 | const node_config_provider_1 = require("@aws-sdk/node-config-provider");
  5 | const os_1 = require("os");
> 6 | const process_1 = require("process");
    |                            ^
  7 | const is_crt_available_1 = require("./is-crt-available");
  8 | exports.UA_APP_ID_ENV_NAME = "AWS_SDK_UA_APP_ID";
  9 | exports.UA_APP_ID_INI_NAME = "sdk-ua-app-id";

  116 |             const errorObject = JSON.parse(text);
  117 |             var ref;
> 118 |             throw new MetroNodeError((ref = (0, _ansi).stripAnsi(errorObject.message)) != null ? ref : errorObject.message, errorObject);
      |                   ^
  119 |         }
  120 |         throw new Error(`[${res.status}]: ${res.statusText}\n${text}`);
  121 |     }

Call Stack
  requireFileContentsWithMetro (node_modules/@expo/cli/build/src/start/server/getStaticRenderFunctions.js:118:19)
  process.processTicksAndRejections (node:internal/process/task_queues)
  async Object.getStaticRenderFunctions (node_modules/@expo/cli/build/src/start/server/getStaticRenderFunctions.js:138:28)
  async bundleStaticHtml (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:158:43)
  async MetroBundlerDevServer.getStaticPageAsync (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:167:41)
  async (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:272:46)

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

@damyyyy, was this on a newly built project with Amplify or an older one that was updated to latest version? Can you see if deleting your node_modules folder along with the package-lock.json file, then reinstalling the dependencies with npm install resolves the issue?

[damyyyy]

Hi @cwomack, it was on a newly built project, I just cloned this template https://github.com/EvanBacon/expo-router-instagram-layout then installed "aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage".

I've tried deleting node_modules along yarn.lock then did yarn install, problem is exactly same: works on mobile, same error for web.

It may have something to do with metro

[cwomack]

Thanks for the quick follow up @damyyyy. If the project was cloned from that template, I'm wondering if there's a dependency issue going on. To reproduce on my side, should I just clone that repo first then follow the steps you listed out originally?

[damyyyy]

@cwomack, you're welcome

To reproduce on my side, should I just clone that repo first then follow the steps you listed out originally?

Yes, that's exact.

[cwomack]

@damyyyy, can you share your full package.json?

[ocho-cesar]

@cwomack I'm able to reproduce with the following package.json

{
  "name": "amplify-test",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.18.2",
    "aws-amplify": "^5.3.3",
    "expo": "~49.0.0-beta.3",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0-rc.10",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@types/react": "~18.0.27",
    "typescript": "^4.9.4"
  },
  "resolutions": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  },
  "private": true
}

And a simple index route with

import { Text } from "react-native";

import "aws-amplify";

export default function App() {
  return <Text>Test</Text>;
}

https://github.com/ocho-cesar/amplify-test/blob/main/src/app/index.tsx

Thats enough to break the app

Reproducible repo at https://github.com/ocho-cesar/amplify-test

[younes0]

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

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

[damyyyy]

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