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"
  }
}

Answer 1

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.

Answer 2

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:

1. react-scripts: contains the scripts used in create-react-app.
2. react-dom: allows react-code to be rendered into an HTML page
3. react-native-web: the main source of magic in this app. This library will convert our react-native components into web elements.
4. react-art: a peer dependency for react-native-web
5. react-router-native: routing library for React Native
6. 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:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. 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'),
    }
  }
})

Answer 3

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

1. Install the latest version of the Expo CLI: npm i -g expo-cli
2. Add web dependencies: yarn add react-native-web react-dom
3. 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/

Answer 4

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

Answer 5

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

npm ci

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

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 |

Answer 10

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.