Unable to resolve module even it existed ReactNative - react-native

I'm using React-native to develop a mobile app and got the below issue.
error: Error: Unable to resolve module ../../globals/styles/appColor from .../src/containers/LoginScreen/style.ts:
None of these files exist:
* src/globals/styles/appColor(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* src/globals/styles/appColor/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
1 | import { StyleSheet } from "react-native";
> 2 | import AppColor from "../../globals/styles/appColor";
This is my Code:
style.ts
appColor.ts
I'm using **RN 0.67.3**
my code still work properly before, but now I'm getting this error,
I don't have any clue to solve this issue.
Any help or suggestions will be appreciated.

Related

Expo Error for Web Version: ./node_modules/metro-runtime/src/modules/HMRClient.js 31:13

I've been trying to get the web version of my expo react native app to work but get the following Error message when I try running it:
./node_modules/metro-runtime/src/modules/HMRClient.js 31:13
Module parse failed: Unexpected token (31:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class HMRClient extends EventEmitter {
> _isEnabled = false;
| _pendingUpdate = null;
| _queue = [];
I spent a while doing research online and found a lot of other questions that addressed loader issues but could not figure out how solve this problem (possibly because I had trouble understanding their solutions).
(Maybe this is the same issue? If so I'm not sure I understand how to resolve my issue using this answer).
Is there something that I can put in my webpack.config.js that can resolve this issue?

Unable to resolve module ./Transitioning with react-native-reanimated

React native reanimated throws exception after installing it as a part of react navigation installation.
Unable to resolve module ./Transitioning from C:\Users\mohit.bhasin\Desktop\TribuneTrustt\node_modules\react-native-reanimated\src\Animated.js:
None of these files exist:
* node_modules\react-native-reanimated\src\Transitioning(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
* node_modules\react-native-reanimated\src\Transitioning\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
> 1 | import { Image, ScrollView, Text, View } from 'react-native';
2 | import createAnimatedComponent from './createAnimatedComponent';
Anyone knows what's wrong?
I faced the exact same issue today. Turned out cleaning cache fixes it. Here is what I've tried:
npx react-native start --reset-cache
I know the question is poorly written, but I hope it will save someone's 15 minutes.

Unable to resolve module `../../screens/AuthScreen` from `src\screens\Welcome\Welcome.js`

I'm new at react-native and try to build an app. When I run my code I'm getting this error:
As you can see the path, my code is correct. I don't understand why I'm getting this error, can anyone help?
import AuthScreen from '../AuthScreen/AuthScreen';

react-native-progress-webview Unable to resolve module

I found this project interesting at the NPM,
https://www.npmjs.com/package/react-native-progress-webview
however I followed the instruction, it shows the following error:
error: bundling failed: Error: Unable to resolve module `react-native-progess-webview` from `mycomponent.js`: Module `react-native-progess-webview` does not exist in the Haste module map
I already installed 'react-native-webview' and it works fine, however react-native-progess-webview seems not able to be imported.
I am just simply importing the library like this:
import ProgressWebView from "react-native-progess-webview";
How to solve?
I found that it is a typo in the tutorial, in the tutorial it is:
import ProgressWebView from "react-native-progess-webview";
but the correct one is:
import ProgressWebView from "react-native-progress-webview";
There is an "r" in the "progress".

How to resolve ESLint error unable to resolve path to module 'react-native'

New to react native and trying to setup ESLint in my project. I am getting this specific error:
Unable to resolve path to module 'react-native'. (import/no-unresolved)
I searched on SO and found similar threads, but nothing seems to work. I tried cleaning the npm cache as well.
import { AppRegistry } from 'react-native';
There is a red underline on my index.js file in the project root (using Atom editor) and under the word react in the above code snippet.
As per the react native guide
AppRegistry should be required early in the require sequence to make
sure the JS execution environment is setup before other modules are
required.
If you are struggling with es-lint configuration and guess that it's showing false error then you can add .eslinrc file at the root of the project and configure eslint rule as required. I suggest airbnb standard, this guide show full setup here