Babel can't transpile the TypeScript syntax in react-native core's js file (using webpack)?

I got a mobile app that was written in react-native, now I want to run this app on web browser (maybe as an electron app later) so I use react-native-web and webpack to help compile the same code base. However I got an error when I try to run my webpack:

ERROR in ./node_modules/react-native/Libraries/Core/Devtools/parseErrorStack.js 13:12
Module parse failed: Unexpected token (13:12)
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
| 'use strict';
|
> import type {StackFrame} from '../NativeExceptionsManager';
| import type {HermesParsedStack} from './parseHermesStack';
|

I reckon because although parseErrorStack.js is a js but it has the syntax of TypeScript. That's why Babel can't not transpile this file. I can't change the file extension, I was so desperate that I even added typescript-loader but it just did not work (quite expected that though). Here is my webpack.config.js file:

var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const appDirectory = path.resolve(__dirname, '../');

const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src')
  ],

  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: [
        'module:metro-react-native-babel-preset',
      //  '@babel/preset-env',
      //  '@babel/preset-react',
      ],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web'],
    },
  },
};



// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

// Needed for react-native-vector-icons
const fontLoaderConfiguration = {
  test: /\.ttf$/,
  loader: 'url-loader',
  include: path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
};

module.exports = {
  entry: [
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      fontLoaderConfiguration,
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      path: path.resolve(appDirectory, 'dist', 'index.html'),
      template: path.resolve(appDirectory, 'web', 'index.html'),
      title: 'Test APP',
    })
  ],

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx'],
    fallback: {
      os: require.resolve('os-browserify/browser'),
      https: require.resolve('https-browserify'),
      crypto: require.resolve('crypto-browserify'),
      path: require.resolve('path-browserify'),
      http: require.resolve('stream-http'),
      stream: false,
      fs: false,
      child_process: false,
    },
  },
  devtool: 'eval',
  devServer: {
    hot: true,
  },
};

What can I try next?