Module not found: Can't resolve 'react-native' - React Native

Question

I have just started learning React Native and wanted to add input fields to the page. I have gone through this tutorial to add input fields. But whenever I run the React App it throws the following error.

./src/Inputs.js Module not found: Can't resolve 'react-native' in 'E:\hybrid\reactDemo\src'

I have checked if the react-native node-modules is there or not, then I came to know that the module react-native was not there. I installed it run the app again, but it shows the same error. I have spent more than 8 hours on this but unable to resolve this error. I have tried out all the solution from google but none of them worked for me.

Note: I am using windows PC

Update 1: I am importing react-native like following

import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

Update 2:

This is my package.json file

{ "name": "reactDemo", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.3.1", "react-dom": "^16.3.1", "react-native": "^0.54.4", "react-router": "^3.0.5", "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

please add your package.json and webpack.config.js/other build tool config. looks like it's trying to find react-native in <root>/src while it should be looking in <root>/node_modules — VF_
– VF_, Commented Apr 5, 2018 at 9:13

qNA · Accepted Answer · 2021-01-27 17:50:27Z

35

I'm not sure but in my case it helped to install react native web by npm install react-native-web. Hope it helps you too.

answered Jan 27, 2021 at 17:50

qNA

3763 silver badges2 bronze badges

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

2 Comments

Memphis Meng Over a year ago

It really helps! I guess this is one of the dependency of react-native.

user56reinstatemonica8 Over a year ago

react-native-web is not a dependency of react-native, but if you make a web build of a react-native project, webpack/babel/etc use an alias under the hood to hijack every import of react-native and point them at react-native-web instead. So if react-native-web isn't installed, the react-native import will fail because it has been aliased to point somewhere that doesn't exist.

Alekssandro Assis Barbosa · Accepted Answer · 2018-10-05 22:59:53Z

Your project can't see the react-native package. If you already have all required dependencies installed (for use of react-native) go the end of this post. if not, I suggest you have the following:

react-scripts: contains the scripts used in create-react-app.
react-dom: allows react-code to be rendered into an HTML page
react-native-web: the main source of magic in this app. This library will convert our react-native components into web elements.
react-art: a peer dependency for react-native-web
react-router-native: routing library for React Native
react-router-dom: routing library for React on the web

========================================================================

First thing first, you need compatible babel-jest dependencies. To fix the dependency tree, try following the steps below in the exact order:

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.

The above configuration do not require you to have webpack manually configured, because react-scripts does that.

Maybe you don't use all that nor even react-scripts, so you must have to configure your webpack.config.js. To fix this, try the following:

const path = require('path') module.exports = ({platform}, defaults) => ({ ...defaults, entry: './index.js', /* ... */ resolve: { ...defaults.resolve, alias: { ...defaults.resolve.alias, react: path.join(__dirname, 'node_modules/react'), 'react-native': path.join(__dirname, 'node_modules/react-native'), } } })

Vladimir Salguero · Accepted Answer · 2021-03-09 08:20:28Z

To add web support to an existing Expo app you can do the following:

Install the latest version of the Expo CLI: npm i -g expo-cli
Add web dependencies: yarn add react-native-web react-dom
Startup faster in web-only mode by running expo start:web You can also run expo start --web which will start Webpack immediately.

Source https://docs.expo.io/guides/running-in-the-browser/

Community · Accepted Answer · 2020-05-07 07:42:47Z

You are trying to add react-native in other react project. React Native is like React, but it uses native components instead of web components as building blocks. So install react-native using npm install -g react-native-cli in a new folder and then initiate new react-native project using react-native init ProjectName.

Run react-native run-ios / run-android inside your React Native project folder

Reference

Wildan Muhlis · Accepted Answer · 2022-07-30 07:14:11Z

I've experienced a similar issue after upgrading Webpack, for me performing a clean install will resolve it.

npm ci

Naleen Dissanayake · Accepted Answer · 2018-08-22 17:13:54Z

File path doesn't mention correctly. Please check it again. Issue is in your external import of the files in src directory and confirm that the file is in the mentioned path.

Irfan wani · Accepted Answer · 2021-01-15 04:24:27Z

I will recommend EXPO which by just one command sets up everything necessary for writing react-native locally. First dowmload the expo-cli; In your command line;

npm install expo-cli --global

After it gets installed, run this command to create a project;

expo init name_of_project

That is it. Everything will be done and now you just have to start writing some code.

Ritika Gupta · Accepted Answer · 2021-06-23 19:08:45Z

0

Just running npm install inside the main app folder, solved it in my case.

answered Jun 23, 2021 at 19:08

Ritika Gupta

6038 silver badges14 bronze badges

Comments

Mehdi Musavand · Accepted Answer · 2021-12-17 16:20:12Z

i have been create project by expo init name_of_project and it runs on web as well but when i add mapbox by this command npm install @react-native-mapbox-gl/maps --save i have some errors

./node_modules/react-native/Libraries/Image/AssetSourceResolver.js:24:17 Module not found: Can't resolve '../Utilities/Platform' 22 | 23 | const PixelRatio = require('../Utilities/PixelRatio');

24 | const Platform = require('../Utilities/Platform'); | ^ 25 | 26 | const invariant = require('invariant'); 27 |

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review

Rajnikant Solanki · Accepted Answer · 2022-06-20 03:21:38Z

0

I faced this issue since many days "Module not found" the simple solution is go to your project folder and delete node_modules folder and then try i hope this answer is helpful for you thank you.

answered Jun 20, 2022 at 3:21

Rajnikant Solanki

538 bronze badges

1 Comment

Rajnikant Solanki Over a year ago

still facing issue after deleting node_modules please also delete npm-cache folder go to C:/Users/Admin/AppData/Local/npm-cache and delete it will working fine.

Collectives™ on Stack Overflow

Module not found: Can't resolve 'react-native' - React Native

10 Answers 10

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Linked

Related