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"
}
}
What does your package.json look like?
Does it contain "react-native": "x.x.x" under dependencies?
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.
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'),
}
}
})
Comments
Post a Comment