Unable to resolve module 'react-redux'...module 'react-redux' does not exist in haste module map - react-native

The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.

Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.

Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache

I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.

This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk

I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.

Related

React Native Module not found: Can't resolve '#react-navigation/core' with react-native-router-flux

I have this basic React Native Code which fails to compile as soon as I import anything from react-native-router-flux. It throws Module not found: Can't resolve '#react-navigation/core'
If I uncomment line import { Router, Scene } from "react-native-router-flux";, everything works fine. I also manually did npm install #react-navigation/core but to no avail
import React from "react";
import { Router, Scene } from "react-native-router-flux";
class Index extends React.Component {
render() {
return <div></div>
}
}
export default Index;
What could I be missing?
Versions
React v17.0.2
react-native-router-flux v4.3.1
React-native v0.66.3
The latest react-native version (v0.66.3) is incompatible with react-native-router-flux (v4.3.1) which is pretty old. Its better to look for #react-navigation/native
Thanks #XplosiVe06 for pointing out

I got this error but no idea where is the problem "Cant find the variable SafeAreaProvider"?

Got this error when try running npm run android.
Component Exception
Can't find variable SafeAreaProvider in files App.js and navigation/index.js.
I dont even have SafeAreaProvider included or used in the files. It looks strange to me, any ideas ?
App.js
import React from 'react';
import Providers from './navigation';
const App = () => {
return (
<Providers/>);
}
export default App;
navigation/index.js
import React from 'react';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';
const Providers = () => {
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
}
export default Providers;
Apart from installing npm install #react-navigation/native, you will also need to install its dependencies, which you can do by running npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view.
If we are supposed to implement the navigation in the react-native application we must have to install all the libraries described in the npm documentation.
So be sure that you have installed all the peer-dependencies and followed the documentation properly.
for the stack navigation implementation, we must have to install the following libraries as per the documentation.
#react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
#react-native-community/masked-view
#react-navigation/stack
for more information check out the official documentation to crash the issue.
https://reactnavigation.org/docs/getting-started

Warning:"Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle."

Getting this warning in the console when React Native app gets built initially.
Can anyone help me with the reason why I am getting this?
Following are the specifications
react-native-cli: 2.0.1
react-native: 0.62.0
Node: v12.9.1
There are generally two categories of cycle warning: one from our own codebase, and another from node_modules packages such as react-navigation-fluid-transitions. In this case, I think it is react-native paper.
We could hardly do anything about the require cycle in node_modules unless the package authors fix it.
But you still wish to keep the package and ignore the warning:
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings([
'Require cycle:'
])
I fixed it by importing each component separately like this:
import Button from 'react-native-paper/src/components/Button';
import IconButton from 'react-native-paper/src/components/IconButton';
do similar wherever you are using sth from react-native-paper
in your package.json ensure react-native-paper is "react-native-paper": "^4.5.0",
Then
rm -rf node_modules
npm install
npm start --reset-cache
your react-native-paper warning will disappear
If you have multiple Providers wrapping your app, make sure your Provider imported from react-native-paper is way up above in the Hierarchy (there are exceptions like Redux's Provider).
I had multiple providers and had it between other providers, which I think created cycle imports. Fixed the problem when I moved it above the tree, just below redux's provider().
import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { Provider as PaperProvider} from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { store } from './your/reduxStore';
import { someTheme } from './your/apptheme';
const App = () => (
<Provider store={store}>
{/* Make sure react-native-paper provider is high up the tree */}
<PaperProvider theme={muiTheme}>
<SafeAreaProvider>
<StatusBar translucent />
{/* Your other App Stuff Here */}
</SafeAreaProvider>
</PaperProvider>
</Provider>
);
export default App;
YellowBox is deprecated, use LogBox:
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
'Require cycle:'
])
sadly the "Require cycles are allowed" warning is still shown in the logs
You can go to each path and remove the cycle.
For example, in node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx, remove the reference of CheckboxItem.
However, I don't know what the impact of this is.

`unable to resolve module #react-native-community/async-storage` broke down my React Native environment

I'm basically having the issue same as here.
https://github.com/firebase/firebase-js-sdk/issues/1899
How I got this error
Since AsyncStorage is deprecated, I tried to install #react-native-community/async-storage following the official documentation
But it failed completely as I got the error above.
Thus I wanted to roll back to my previous working version except none of what I did worked.
None of these solved my problem
4 commands suggested on the error screen
undoing yarn add with yarn remove
I also did npm install #react-native-community/async-storage, did not work.
3.5 so I did npm uninstall #react-native-community/async-storage It was removed, but roll-back did not work.
Re-installing the react-native-cli
Re-creating a completely new project from scratch, but it is still giving the same error.
I could not find a solution for this. Please help.
If it's on iOS you probably forgot to do pod install.
Paste this inside ios/Podfile:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
then just do cd ios && pod install
EDIT.
I createad a project from scratch, this are the steps i did to make asyncStorage run on iOS and Android:
1) react-native init AsyncTest
2) npm i #react-native-community/async-storage
(trying to use asyncStorage during this step shows error, but works on Android)
3) Pasted inside Podfile this pod:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
4) From terminal, assuming you are in the project folder do cd ios and pod install
5) Project run succesfully on iOS and works.
react-native version was 0.60.4
This is how the project test App.js was for the test:
import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
return (
<View>
<AsyncStorageTest />
</View>
);
};
export default App
And AsyncStorageTest is:
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '#react-native-community/async-storage';
export class AsyncStorageTest extends Component {
constructor(props) {
super(props)
this.state = {
storedData: "myValue"
}
}
storeData = async () => {
console.log("inside storeData")
try {
await AsyncStorage.setItem('Test', 'TestValue')
} catch (e) {
console.log(e)
}
}
getData = async () => {
console.log("inside getData")
try {
const value = await AsyncStorage.getItem('Test')
this.setState({ storedData: value })
} catch (e) {
// error reading value
}
}
render() {
return (
<View style={{ marginTop: 40 }}>
<Text> {this.state.storedData}</Text>
<Button title={"storeData"} onPress={this.storeData}></Button>
<Button title={"getData"} onPress={this.getData}></Button>
</View>
)
}
}
export default AsyncStorageTest
Tested and worked, see if you missed something.
Make sure the that #react-native-community/async-storage is unlinked from your project.
Somehow the path to the package got changed.
This helped me:
import AsyncStorage from '#react-native-async-storage/async-storage';
For someone like me please double-check this as well:
When you install npm i #react-native-community/async-storage you should import it as import AsyncStorage from '#react-native-community/async-storage'; and DO NOT import is as import AsyncStorage from '#react-native-async-storage/async-storage';
after i run npm install react-native-dotenv
i take this error,
then i rerun npm install;
cd ios;pod install;cd ..;
and then close the terminal and uninstall app from phone,and restart them,it's works.
my version "react": "16.9.0",
"react-native": "0.61.5",
I solved this issue by installing #react-native-community/async-storage aliased to #react-native-async-storage/async-storage
The command was
yarn add #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
or
npm install --save #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
I solved this issue following the import...
import {AsyncStorage} from 'react-native';
When you install npm install #react-native-community/async-storage
You could import => import AsyncStorage from '#react-native-community/async-storage';
Dont import this => import AsyncStorage from '#react-native-async-storage/async-storage';

How do I fix RN suddenly being unable to find local modules (Unable to resolve module)?

I've got a strange situation where suddenly my RN app won't load any of its scenes. The app has been running fine for weeks and I haven't moved any of the files. The failure:
error: bundling: UnableToResolveError: Unable to resolve module `./src/scenes/splash` from `/Users/jcollum/projects/starsApp/index.ios.js`: Directory /Users/jcollum/projects/starsApp/src/scenes/splash doesn't exist
at Promise.resolve.then (/Users/jcollum/projects/starsApp/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:445:15)
at process._tickCallback (internal/process/next_tick.js:109:7)
My import statements look like:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import Splash from './src/scenes/splash';
The scene definitely exists:
$ ll /Users/jcollum/projects/starsApp/src/scenes/splash.js
-rw-r--r-- 1 jcollum staff 722B Apr 26 10:12 /Users/jcollum/projects/starsApp/src/scenes/splash.js
And it has an export default:
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import styles from '../styles'
import { Actions } from 'react-native-router-flux';
export default class Splash extends Component {
componentWillMount() {
setTimeout(() => {
Actions.Home()
}, 1000);
}
render() {
console.log(`rendering Splash`);
return (
<View ...
Things I have tried:
restarting packager
resetting content and settings
checking out a previous commit
clearing temp dir: rm -fr $TMPDIR/react-*
react-native --version
react-native-cli: 2.0.1
react-native: 0.43.2
What could be causing this? Why would this suddenly stop loading resources? What's the next thing to try?
Solution (don't know why this works, sorry):
Stop any running packager
Add this to package.json: "clean-start": "rm -rf node_modules && yarn install && rm -rf $TMPDIR/react* && npm start --reset-cache", (or npm install if you don't use yarn)
npm run clean-start
I faced the similar issue once and what i did was nothing fancy, I just cut all the files which were giving error and copied at some place(outside my project dir) and then paste those files again at their place helped me..
Cheers :)
In my case, ran
npm cache verify
in console at my project directory, all was well. Hope it helps