CODEWITHSUNDEEP
reactjsreact-native
Alpesh Trivedi
Alpesh Trivedi

Reputation: 979

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

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

Upvotes: 23

Views: 146789

Answers (10)

Wildan Muhlis
Wildan Muhlis

Reputation: 1603

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

npm ci

Upvotes: 1

Rajnikant Solanki
Rajnikant Solanki

Reputation: 53

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.

Upvotes: 0

Mehdi Musavand
Mehdi Musavand

Reputation: 1

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 |

Upvotes: 0

Ritika Gupta
Ritika Gupta

Reputation: 573

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

Upvotes: 0

Vladimir Salguero
Vladimir Salguero

Reputation: 5947

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/

Upvotes: 2

qNA
qNA

Reputation: 366

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.

Upvotes: 34

Irfan wani
Irfan wani

Reputation: 5055

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.

Upvotes: 0

Payal Munjewar
Payal Munjewar

Reputation: 11

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

Upvotes: 1

Alekssandro Assis Barbosa
Alekssandro Assis Barbosa

Reputation: 151

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'),
    }
  }
})

Upvotes: 13

Naleen Dissanayake
Naleen Dissanayake

Reputation: 181

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.

Upvotes: 0

Related Questions