Localhost:8080 showing blank page with react-native-web

i followed a tutorial for adding web support to a react native app. using react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page. even though it works just fine on the emulator.i get no error in the console.

this is the tutorial i followed:

as shown in the tutorial, i was hoping to see my simple react native code result both on the emulator and the webpage.

ps. my project is TypeScript based

this is my App.web.ts

   import {AppRegistry} from 'react-native'import {name as appName} from './app.json'import App from './App'AppRegistry.registerComponent(appName, () => App)AppRegistry.runApplication(appName, {  initialProps: {},  rootTag: document.getElementById('app-root'),})

my package.json:

{"name": "reactnativewebapp","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint .","web":"cd web && webpack-dev-server"  },"dependencies": {"react": "17.0.2","react-dom": "^18.0.0","react-native": "0.68.0","react-native-web": "^0.17.7"  },"devDependencies": {"@babel/core": "^7.12.9","@babel/runtime": "^7.12.5","@react-native-community/eslint-config": "^2.0.0","@types/react": "^17.0.43","@types/react-native": "^0.67.3","babel-jest": "^26.6.3","eslint": "^7.32.0","html-webpack-plugin": "^5.5.0","jest": "^26.6.3","metro-react-native-babel-preset": "^0.67.0","react-native-typescript-transformer": "^1.2.13","react-test-renderer": "17.0.2","ts-loader": "^9.2.8","typescript": "^4.6.3","webpack": "^5.70.0","webpack-cli": "^4.9.2","webpack-dev-server": "^4.7.4"  },"jest": {"preset": "react-native"  }}

and my index.js from which App.js should be rendered:

/** * @format */import {AppRegistry} from 'react-native';import App from './App';import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App);