I'm new to React Native. I get import errors like this when I try to import a class from another file in React Native. How can I resolve this ? (I'm using react-navigation 2.18.3)
C:/Users/Suman Shaw/Login/components/Login.js
Module not found: Can't resolve '../config/firebaseSDK' in 'C:\Users\Suman Shaw\Login\components'
[![my folder hierarchy][1]][1]
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"firebase": "^7.9.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gifted-chat": "^0.13.0",
"react-native-web": "~0.11.7",
"react-navigation": "^2.18.3",
"uuid": "^7.0.1"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
Can't resolve '../config/firebaseSDK' means you are giving wrong path
import as '../../'till you find config
you can refer this https://www.youtube.com/watch?v=ephId3mYu9o
Related
so basically the app runs fine on android/iOS but doesn't run on web
These are the following persistent errors
I apparently have figured it has something to do with Webpack(v5?) and react-scripts,
have already downgraded Webpack and added the react-error-overlay but still these errors pop-up
This is my App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Platform } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hi! Welcome</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
alignSelf:'stretch',
alignItems:'center',
...Platform.select({android:{backgroundColor:'orchid'}})
},
});
This is my package.json
{
"name": "bigapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"preinstall": "npx npm-force-resolutions",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-scripts": "^4.0.3",
"webpack": "^4.46.0",
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-error-overlay": "^6.0.9"
},
"private": true
}
Any help is appreciated
So after 18+ hours trying fixes and encountering the same errors...
I have done the following
1)Removed the project and re-installed it using yarn
2)downgraded react to 17.0.2
3)downgraded react-native to 0.68.2
4)downgraded expo to 45.0.0
5)Added the react-error-overlay to 6.0.9 in package.json
This is my package.json
{
"name": "bigApp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "^45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-native": "0.68.2",
"react-scripts": "5.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-error-overlay": "6.0.9"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"private": true
}
Still I have no idea how webpack(v5) is fine with outdated dependencies but nonetheless it works.
This might be useful to someone facing similar issues...
Other solutions are welcome.
I am trying to install a react native application using expo. I have tried all the updating packages and more from previous answers without any success.
It is however failing and giving me this error on the web interface: An unexpected error has occurred.
And on the console, it shows me this error message:
ReferenceError: process is not defined
at Module.RNiq (index-1b0e10d3020a016605d2.js:1:237007)
at l (webpack-e067438c4cf4ef2ef178.js:1:563)
at index-1b0e10d3020a016605d2.js:1:457536
at main-41e61ebd24edb78847da.js:1:19485
at main-41e61ebd24edb78847da.js:1:19653
ue # main-41e61ebd24edb78847da.js:1
My package.json is
{
"name": "my-app",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
error image
I was using expo-cli version 5.4.10 but on rolling back to expo-cli version 5.4.9 it worked. Find the various npm expo versions here
I am getting the following error on creating the navigation stack as follows:
Unable to resolve "./vendor/TransitionConfigs/CardStyleInterpolators" from "node_modules/react-navigation-stack/lib/module/index.js"
App.js:-
import React from "react";
import {createAppContainer,createSwitchNavigator} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {createBottomTabNavigator} from "react-navigation-tabs";
import AccountScreen from "./src/screens/AccountScreen";
import SigninScreen ...... ;
const switchNavigator=createSwitchNavigator({
loginFlow:createStackNavigator({
Signin:SigninScreen,
Signup:SignupScreen
}),
mainFlow:createBottomTabNavigator({
trackListFlow:createStackNavigator({
TrackList:TrackListScreen,
TrackDetails:TrackDetailsScreen
}),
TrackCreate:TrackCreateScreen,
Account:AccountScreen
})
});
export default createAppContainer(switchNavigator);
I am using the following dependency version:-
Package.json:-
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.4.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
While bundling I am getting the following error although I am using stable version of all the dependencies...
You need to clear your metro Cache.
Since you're using Expo, first stop Expo server. Then run:
expo start -c
If you're not, run:
react-native start --reset-cache
Problem:
I have created a react native application there I am using the react-navigation-tab module. But It causing an error which says this.
Unable to resolve "react-native-reanimated" from "node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js
This is my package.json file.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"expo-linear-gradient": "^7.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.8",
"react-native-elements": "^1.2.1",
"react-native-gesture-handler": "~1.3.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.8",
"react-navigation-stack": "^1.9.0",
"react-navigation-tabs": "^2.5.5"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
"private": true
}
I tried lot to find a solution to this problem on the internet but I was unable to do so. Can someone help me to solve this issue? Thank you.
You need to in add "react-native-reanimated" library also as described in react navigation site
Try this
yarn add react-native-reanimated
# or with npm
cd ios
pod install
I have initialized a new react-native app using expo-cli.
After installing few dependencies, I got this error on build:
Unable to resolve "./components/connect" from "node_modules/react-redux/lib/index.js"
Here is my package.json file.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"eslint-config-rallycoding": "^3.2.0",
"expo": "^32.0.0",
"firebase": "^5.10.0",
"lodash": "^4.17.11",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-communications": "^2.2.1",
"react-native-router-flux": "^4.0.6",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
I have been able to fix this issue by downgrading react-redux to version ^4.4.10