React Native Expo App breaks on "There are multiple modules with names that only differ in casing."

Viewed 22

My react native expo app broke after I changed the casing of the folder, It worked locally but it broke when I connected it via CD with Netlify, one of the folders had to be capitalized for netlify to compile the project, I wanted to have consistent casing so I have capitalized all of them, and Netlify complained about other folders instead. So I did git revert and after that in git the folders were lowercased but on my machine they were still uppercased. So I have lowercased them manually and i get the warnings below. It sais eg. CommonUI is uppercased and its not.

WARNING
10:43
./components/CommonUI/LabelledSlider.tsx
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/CommonUI/LabelledSlider.tsx
    Used by 12 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/Forms/ReviewsForm/ReviewModal.tsx
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/LabelledSlider.tsx
    Used by 2 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/index.ts
WARNING
10:43
./components/CommonUI/LinkButton.tsx
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/CommonUI/LinkButton.tsx
    Used by 4 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/Forms/NewsletterSignup.tsx
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/LinkButton.tsx
    Used by 2 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/index.ts
WARNING
10:43
./components/CommonUI/StarRating.tsx
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/CommonUI/StarRating.tsx
    Used by 4 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/Forms/ReviewsForm/ReviewModal.tsx
* /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/StarRating.tsx
    Used by 4 module(s), i. e.
    /Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js??ref--5-oneOf-2!/Users/seven/Dev/Test-Reminder/components/commonUI/index.ts

all folders are lowercased. It compiles on the web, but not on the IOS simulator where I get

Unable to resolve module ../components/Forms from /Users/seven/Dev/Test-Reminder/Screens/Login.tsx: 

None of these files exist:
  * components/Forms(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
  * components/Forms/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
  2 | import { View, StyleSheet } from "react-native";
  3 | import { StackScreenProps } from "@react-navigation/stack";
> 4 | import { LoginForm } from "../components/Forms";
    |                            ^
  5 | import { COLORS } from "../constants/ui";
  6 | import type { RootStackParamList, LoginData } from "../components/util";
  7 | import Constants from "expo-constants";

ABI44_0_0RCTFatal
__37-[ABI44_0_0RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

how can I force it to refresh the paths? Or is it because I use exports via index files? Thanks

0 Answers
Related