Error: Unable to resolve module `react` from `index.js`: react could not be found within the project

Question

Error: Unable to resolve module `react` from `index.js`: react could not be found within the project.

When i tried to run my project then it will give me this bundling failed error.

Here is my index.js file code.

/**
 * @format
 */
import React,{Component} from 'react';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import src from './Screens/Search'
import AppContainer from "./Component/MainNavigation";
class myApp extends Component {
    render(){
        return(
            <AppContainer />
        )
    }

}
AppRegistry.registerComponent(appName, () => myApp);

package.json file.

{
  "name": "CharityDating",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "^1.0.0",
    "@react-native-community/masked-view": "^0.1.6",
    "react": "16.9.0",
    "react-native": "^0.61.5",
    "react-native-animatable": "^1.3.3",
    "react-native-country-picker-modal": "^1.10.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-draggable": "^3.0.0",
    "react-native-draggable-grid": "^1.2.1",
    "react-native-gesture-handler": "^1.5.3",
    "react-native-image-picker": "^2.0.0",
    "react-native-image-slider": "^2.0.3",
    "react-native-keyboard-aware-scrollview": "^2.1.0",
    "react-native-pulse": "^1.0.7",
    "react-native-reanimated": "^1.7.0",
    "react-native-responsive-fontsize": "^0.4.2",
    "react-native-responsive-screen": "^1.3.1",
    "react-native-safe-area-context": "^0.6.2",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-slider": "^0.11.0",
    "react-native-sortable-grid": "^2.0.0",
    "react-native-switch-toggle": "^1.1.4",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^2.0.13",
    "react-navigation-tabs": "^2.7.0",
    "react-toggle": "^4.1.1",
    "responsive-image": "^0.3.1",
    "toggle-switch-react-native": "^2.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

you can add react manually using yarn add react and try again — Mayank Pandav
– Mayank Pandav, Commented Jan 31, 2020 at 9:25
Try to install the last version of react which is 16.12.0. And then follow the steps from @prakash-karena post. — mindmaster
– mindmaster, Commented Jan 31, 2020 at 9:51
In my case, I had from "React" instead of from "react". I guess at React 16.9+, it became case sensitive. — Joshua Pinter
– Joshua Pinter, Commented Apr 27, 2021 at 18:47

Raghusingh · Accepted Answer · 2020-01-31 09:53:43Z

10

I installed react again once more.Using 'npm i react' and error is solved.

answered Jan 31, 2020 at 9:53

Raghusingh

4183 gold badges11 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prakash Karena · Accepted Answer · 2020-01-31 09:28:50Z

6

This error is might be related to npm installation try this out :

Solution 1 : follow the steps given with your error to resolve this error

Solution 2 :

npm start -- --reset-cache

then

react-native run-android // in separate command line

Solution 3 :

  Delete node_modules folder and package-lock.json file 

  => npm install

edited Jan 31, 2020 at 9:28

answered Jan 31, 2020 at 9:02

Prakash Karena

2,6031 gold badge9 silver badges18 bronze badges

4 Comments

Prakash Karena Over a year ago

let me know if you have any query

Raghusingh Over a year ago

I did it .But there is same issue.

Prakash Karena Over a year ago

have you intalled your all packages in root directory ?? npm install

Raghusingh Over a year ago

Yes.But i will check it again.@Prakash Karena

Radek Mezuláník · Accepted Answer · 2022-09-14 08:46:48Z

3

Just went through the same error after adding typescript. I solved it by adding json extension to resolver in metro.config.js

module.exports = {
    resolver: {
        sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
      }
}

answered Sep 14, 2022 at 8:46

Radek Mezuláník

4091 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Error: Unable to resolve module `react` from `index.js`: react could not be found within the project