Issue with missing 'react' module encountered while launching Expo project in web browser

As I dive into my inaugural React Native project utilizing React Native with Expo, I find myself faced with a vexing predicament. While the project functions smoothly on the Expo Go app on my Android device, attempting to access it through a web browser on my Windows laptop triggers the subsequent 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

Provided below is an image captured from the web browser:

https://i.sstatic.net/lxopnU9F.jpg

Multiple troubleshooting steps have been taken in these circumstances:

  1. Installed react and react-dom via npm install react react-dom.
  2. Emptied the Metro Bundler cache using npx expo start --clear.
  3. Executed npx expo-doctor, which yielded no indicators of errors or issues.

In addition to the aforementioned actions, I also experimented with methods found on various YouTube tutorials. Despite these dedicated efforts, the persisting error remains unyielding.

javascriptreact-nativenpmexponpx

Answer №1

Make sure to change your Expo settings from "output": "static" to "output": "single" in the app.json file for an updated configuration. After making this adjustment, restart the development server by running npx expo start command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display restricted content within a Scroll View?

I'm currently developing a transaction history feed feature, but I've encountered an issue where the app lags heavily when a user has a large number of transactions. This is because the app tries to render all the contents of the scroll view at o ...

reactjsreact-native

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...

javascripthtmlangulartypescriptforms

What steps should I take to ensure that the <select> tag is compatible with Microsoft Edge?

Currently, I am working on editing jsp files that utilize struts1. <html:select property="someProperty" style="width:110;height:110" styleClass="someClass"> However, when viewing it in Microsoft Edge, I noticed that the drop-down menu already ...

javascripthtmlmicrosoft-edgecompatibilitystruts-1

Exploring the use of jQuery/JS for parsing and working with JSON

Hi everyone, I need some assistance with displaying data from an array created by a PHP file using JS/jQuery. Currently, I am working on implementing a points system for ZetaBoards which you can check out here. The points will be shown below the user' ...

phpjavascriptjqueryarraysjson

What is the process for exporting/importing a variable in Node.js?

What is the correct way to export/import a variable in Node.js? I attempted to use export and import methods, but I received an error message stating that it should be a module. After changing the type to module in the JSON file, it then told me that requ ...

javascriptnode.jsvariablesimportexport

Avoiding the Popover Component from Covering the Screen When the Menu Component Opens in React Material UI

I have implemented a Menu component to display a menu upon hovering over an element. However, I have encountered an issue where the menu includes a Popover component that opens up and covers the entire screen as an overlay, preventing interaction with th ...

javascriptreactjsmaterial-ui

Steps for importing an external .js file into a Vue 2 component

Hello, I am currently working on vue.js 2 and I have come across a problem with the JavaScript part. I would like to include the general.js file in my posts.vue file. Can anyone provide assistance with this? Your help would be greatly appreciated :) Below ...

javascriptvue.jsvuejs2vue-component

Exploring the XML data received through an AJAX request

There is an XML file that I have defined <?xml version="1.0" encoding="UTF-8"?> <root> <town> <area>20000</area> <population>10000</population> </town> </root> Using AJAX, I load the XML file ...

javascriptajaxxml

Unable to display React document

Here is the complete code I am working with: <!DOCTYPE html> <html> <head> <title>React Course</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l ...

javascriptreactjs

Step-by-step guide on how to index timestamp type using Knex.js

I'm in the process of indexing the created_at and updated_at columns using knex js. However, when I try to use the index() function, I encounter the following error: Property 'index' does not exist on type 'void' await knex.sche ...

javascriptnode.jstypescriptpostgresqlknex.js

Content retrieved through AJAX from the backend of the PHP website

My goal is to dynamically load content from various pages on a website without needing to refresh the entire main page. Can you provide guidance on modifying this code to load files with different names such as about.html and project.html? Please note th ...

javascriptphpjqueryhtmlajax

Having difficulty importing an ES2015 module

As I work on creating my own npm library, I encountered an issue when trying to integrate it into another application. For example: import React from 'react'; import SmallGrid from 'react-smallgrid'; export default class Library exte ...

reactjsnpmecmascript-6

Encountered Server Error: received [errono: -4094, code: 'UNKNOWN', syscall: 'open'] when running the command "npm run dev"

I'm trying to set up a local server. Initially, when I created a new project with next-app and ran the local server using npm run dev, everything worked smoothly. However, after making some changes, I encountered an error when running npm run dev. In ...

npmnext.jsnext.js14

How to set an already existing anonymous object to a property within the data property in VueJS

Help needed for a beginner question let myOptions: { chart: { height: 350, type: 'bar' }, colors: ["#800000"] }; let vueExample = new Vue({ el: '#example', components: { apexchart: VueApexCh ...

javascripttypescriptvue.js

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Can the MemoryRouter be successfully nested within the BrowserRouter in a React application?

I've been on a quest for some time now, trying to uncover whether it's feasible to utilize MemoryRouter solely for specific routes while maintaining the use of BrowserRouter in general. My goal is to navigate to a particular component without alt ...

javascriptreactjsreact-router

Angular 7: Resetting multiple dynamically generated checkboxes back to their original state with the click of a button

I have created a child component that contains 3 checkboxes, generated dynamically using ngFor, along with Apply and Cancel buttons. In the parent template, I include the selector tag for the child component. The parent component accesses this child compo ...

javascriptangulartypescriptcheckboxangular7

Execute Babel task individually for each file instead of running it on the entire directory, Grunt

I've set up a Grunfile to monitor .js files in the src/ directory and trigger the babel task from https://github.com/babel/grunt-babel to generate ES5 files in the dist/ directory: module.exports = function(grunt) { require('load-grunt-task ...

javascriptgruntjsgrunt-contrib-watchbabeljs

Struggling to delete elements from observable array within Knockoutjs framework

I am attempting to use knockoutjs to remove a user from an observable array called users. It seems like my viewModel may not be working correctly because it is within a document.ready function. Here is some context about the code below: My application fet ...

javascriptjqueryknockout.js

Concealing elements in a template depending on the value of another field - utilizing Kendoui grid

Below is a column I have: var commentsTemplate = "<input class='comments-button' type='image' src='images/comments_button.png'/>#: COMMENTS #"; { "field": "COMMENTS", "title": "Comments", "template": matcher_comments_t ...

javascriptjqueryangularjskendo-uikendo-grid