Cannot find module 'react' Error When Running Expo Project in Web Browser

Question

I'm working on my first React Native project using React Native with Expo, and I'm encountering a frustrating issue. The project runs fine on the Expo Go app on my Android device, but when I try to view it in a web browser on my Windows laptop, I keep getting the following error:

Metro error: Cannot find module 'react'
Require stack:
- /C:%5CUsers%5CMuhammed%20Tauqeer%20Ali%5CSocialSphere%5Cnode_modules%5Cexpo-router%5Cnode%5Crender.js.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&resolver.environment=node&transform.environment=node&unstable_transformProfile=hermes-stable
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\server\getStaticRenderFunctions.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\server\metro\metroErrorInterface.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\server\metro\createServerComponentsMiddleware.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\server\metro\MetroBundlerDevServer.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\server\DevServerManager.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\startAsync.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\src\start\index.js
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\@expo\cli\build\bin\cli
- C:\Users\Muhammed Tauqeer Ali\SocialSphere\node_modules\expo\bin\cli

The following is the image from web browser:

Here's what I've tried so far:

1. Installed react and react-dom with npm install react react-dom.
2. Cleared the Metro Bundler cache with npx expo start --clear.
3. Ran npx expo-doctor, which didn't find any errors or problems.

Besides these, I did also tried a few things from YouTube. But despite all these efforts, the error persists.

Answer 1

Update your Expo configuration from "output": "static" to "output": "single" in app.json file. Then start the development server again.(npx expo start)

Answer 2

make sure, you have no spaces in the path of your project. If you have spaces and need them, try to change the expo configuration

{"expo":{
  ...
    "web": {
      ...
        "output": "single"

instead of "output": "static". After the change expo needs to be restarted

Answer 3

make sure there is no whitespace in your path. Open file in Mac Finder or Windows Explorer, remove whitespaces, save and close/quit your editor/VSCode, reopen.