javascript - Cannot find module 'react' Error When Running Expo Project in Web Browser - Stack Overflow

admin管理员组

文章数量:1023838

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.

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.

• javascript
• react-native
• npm
• expo
• npx

Share Improve this question Follow edited Nov 15, 2024 at 5:27 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Nov 14, 2024 at 20:14 user24809029user24809029 5555 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

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

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.

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.

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.

• javascript
• react-native
• npm
• expo
• npx

Share Improve this question Follow edited Nov 15, 2024 at 5:27 James Z 12.3k1010 gold badges2727 silver badges4747 bronze badges asked Nov 14, 2024 at 20:14 user24809029user24809029 5555 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

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

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.

本文标签： javascriptCannot find module 39react39 Error When Running Expo Project in Web BrowserStack Overflow