<Expo,React> Native Error: Invariant Violation: "main" has not been registered, ReferenceError: Property 'user' doesn't exist, js engine: hermes
NBYK210118 opened this issue · 1 comments
I'm experiencing two problems at the same time. I'm using on React Native and Expo go. This error suddenly occurred while working as usual with React Native. I don't remember exactly what step it was, but it seems to have started to occur after I created a hook called useProductFetch for useState variables or functions declared inside a functional component. To solve this problem, I created a new project folder, moved the files, and reinstalled the dependencies. But I've been getting this error repeatedly, and I've been looking for a way to fix this for about two days. And to solve the error "Invariant Violation: "main" has not been registered", i checked my "name" in app.json and package.json. there were not any problems. Here is my codes.
{
"name": "frontend",
"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/vector-icons": "^14.0.0",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@reduxjs/toolkit": "^2.2.3",
"axios": "^1.6.8",
"expo": "~50.0.14",
"expo-checkbox": "~2.7.0",
"expo-image-picker": "~14.7.1",
"expo-linear-gradient": "~12.7.2",
"expo-location": "~16.5.5",
"expo-media-library": "~15.9.2",
"expo-radio-button": "^1.0.8",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "~2.14.0",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~3.6.2",
"react-redux": "^9.1.1"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}
This is the part where a custom hook was used in the aforementioned component.
import { useProductFetch } from './useProductFetch';
import { primary_gray } from '../../styles/common/colors';
import { TouchMenu } from './touch_menu';
import { CreateReview } from './CreateReview';
import { AntDesign } from '@expo/vector-icons';
export const ProductDetail = () => {
const {
currentPage,
currentProduct,
handleHeart,
handleHorizontalScroll,
heart,
isUsers,
token,
user,
borderWidths,
handlePress,
activeMenu,
navigation,
} = useProductFetch();
//...
...//
}
And the custom hook code:
export const useProductFetch = () => {
const [heart, setHeart] = useState({});
const { selectedProductId, currentProduct } = useSelector((state) => state.products);
const [isUsers, setIsUsers] = useState(false);
const dispatch = useDispatch();
const navigation = useNavigation();
const { user, token } = useSelector((state) => state.userAuth);
const [currentPage, setCurrentPage] = useState(0);
const [activeMenu, setActiveMenu] = useState(0);
const borderWidths = [...Array(3)].map(() => useSharedValue(0));
const { width } = Dimensions.get('window');
const handleHorizontalScroll = (event) => {
const contentOffsetX = event.nativeEvent.contentOffset.x;
const currentPageIndex = Math.round(contentOffsetX / width);
setCurrentPage(currentPageIndex);
};
const fetchDetail = useCallback(() => {
if (selectedProductId) {
try {
dispatch(findProduct({ product_id: selectedProductId }));
if (token) {
ProductApi.isUsersProduct(token, selectedProductId).then((response) => {
setIsUsers(response.data);
});
}
} catch (error) {
if (error.response) {
switch (error.response.status) {
case 400:
case 500:
navigation.navigate('Home');
}
}
}
}
}, [selectedProductId]);
useEffect(() => {
borderWidths[activeMenu].value = withTiming(3, { duration: 500 });
}, []);
const handlePress = (index) => {
setActiveMenu(index);
borderWidths[index].value = withTiming(3, { duration: 500 });
};
useEffect(() => {
fetchDetail();
}, [fetchDetail]);
useEffect(() => {
if (currentProduct) {
if (token && user) {
if (currentProduct.likedBy.length > 0) {
const isLiked = currentProduct.likedBy.some((val) => val.userId === user.id);
setHeart((prevHeart) => ({
...prevHeart,
[currentProduct.id]: isLiked,
}));
} else
setHeart((prevHeart) => ({
...prevHeart,
[currentProduct.id]: false,
}));
}
}
}, [currentProduct]);
const handleHeart = () => {
if (token && user && currentProduct) {
setHeart((prevState) => ({ ...prevState, [currentProduct.id]: !heart[currentProduct.id] }));
const data = { [currentProduct.id]: !heart[currentProduct.id] };
try {
dispatch(updateProductLike({ token, likes: data }));
} catch (error) {
if (error.response) {
switch (error.response.status) {
case 400:
case 401:
case 500:
navigation.navigate('Home');
}
}
}
} else {
alert('로그인이 필요합니다');
navigation.navigate('Login');
return;
}
};
return {
currentProduct,
currentPage,
handleHeart,
handleHorizontalScroll,
heart,
isUsers,
handlePress,
borderWidths,
activeMenu,
navigation,
user,
token,
};
};
If there are no problems with the above code, I would guess that there may be a compatibility issue with the installed dependencies.
Here is my repositories.
This error doesn't sound like it has anything to do with Redux.