with expo after Web Bundling complete , showing blank page - reactjs

Question

i followed a tutorial for adding web support using to a expo project **. using typescript, react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page after Web Bundling complete.
Started Metro Bundler
Web Bundling complete
even though it works just fine on the emulator. i get no error in the console.
package.json:
{
"name": "imibonano",
"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",
"test": "jest --watchAll",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web",
"commit": "node scripts/github.js"
},
"dependencies": {
"#expo-google-fonts/poppins": "^0.2.2",
"#expo/webpack-config": "^0.16.24",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/slider": "4.2.1",
"#react-native-firebase/app": "^14.2.3",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-bottom-tabs": "^5.3.15",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"dotenv": "^14.2.0",
"expo": "~45.0.0",
"expo-app-loading": "^2.0.0",
"expo-cli": "^5.4.8",
"expo-font": "~10.1.0",
"expo-google-app-auth": "^8.1.7",
"expo-linear-gradient": "~11.3.0",
"expo-modules-core": "~0.9.2",
"expo-splash-screen": "^0.15.1",
"expo-status-bar": "~1.3.0",
"firebase": "^9.6.4",
"jest": "^28.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-custom-swiper": "^1.0.16",
"react-native-flipper": "^0.146.1",
"react-native-gesture-handler": " ~2.2.1",
"react-native-pager-view": "5.4.15",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "0.17.7",
"react-native-web-swiper": "^2.2.2",
"react-query": "^3.39.1",
"react-query-native-devtools": "^4.0.0",
"react-redux": "^8.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.66.13",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"private": true
}
app.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import NavigationStack from "./navigation/NavigationStack";
import Providers from "./navigation/index";
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import AppLoading from 'expo-app-loading';
import { AuthProvider } from "./navigation/AuthProvider";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import AppNavigation from './navigation';
import {
useFonts,
// Poppins_100Thin,
// Poppins_100Thin_Italic,
// Poppins_200ExtraLight,
// Poppins_200ExtraLight_Italic,
// Poppins_300Light,
// Poppins_300Light_Italic,
Poppins_400Regular,
// Poppins_400Regular_Italic,
Poppins_500Medium,
// Poppins_500Medium_Italic,
Poppins_600SemiBold,
// Poppins_600SemiBold_Italic,
// Poppins_700Bold,
// Poppins_700Bold_Italic,
// Poppins_800ExtraBold,
// Poppins_800ExtraBold_Italic,
// Poppins_900Black,
// Poppins_900Black_Italic
} from '#expo-google-fonts/poppins';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [loaded] = useFonts({
title: require('./assets/fonts/klarissa.regular.ttf'),
Poppins_400Regular,
Poppins_600SemiBold,
Poppins_500Medium
});
if (!isLoadingComplete || !loaded) {
return <AppLoading />;
} else {
return <Providers />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0a0a0a",
alignItems: "center",
justifyContent: "center",
}
})
index.js:
import React from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import { AuthProvider } from "./AuthProvider";
import NavigationStack from "./NavigationStack";
export default function Providers() {
return (
<AuthProvider>
<SafeAreaView style={styles.container}>
<NavigationStack />
</SafeAreaView>
</AuthProvider>
);
}