ОШИБКА: модуль не найден и модуль разбора не удалось: неожиданный токен с Webpack

Question

Я пытаюсь создать веб-приложение React с помощью response-native-we, используя несколько простых методов построения представлений и компонентов. когда я пытаюсь собрать с веб-пакетом, он выдает некоторые ошибки ::

ERROR in ./node_modules/react-navigation-stack/lib/module/views/StackView/StackViewLayout.js
Module not found: Error: Can't resolve 'react-native-screens' in ...

ERROR in ./node_modules/react-native-gesture-handler/touchables/TouchableOpacity.js 10:22
Module parse failed: Unexpected token (10:22)
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
|  */
| export default class TouchableOpacity extends Component {
>   static defaultProps = {
|     ...GenericTouchable.defaultProps,
|     activeOpacity: 0.2,...

ERROR in ./node_modules/react-native-gesture-handler/Swipeable.js 14:7
Module parse failed: Unexpected token (14:7)...
| const DRAG_TOSS = 0.05;
| 
> export type PropType = {
|   children: any,...

ERROR in ./node_modules/@react-navigation/native/dist/Scrollables.js 23:53
Module parse failed: Unexpected token (23:53)...
|     return {
|       ...props,
>       refreshControl: props.refreshControl == null ? <RefreshControl refreshing={props.refreshing} onRefresh={onRefresh} progressViewOffset={props.progressViewOffset} /> : props.refreshControl
|     };...

ERROR in ./node_modules/@react-navigation/native/dist/withOrientation.js 24:28
Module parse failed: Unexpected token (24:28)...
|     }
| 
>     handleOrientationChange = ({ window }) => {
|       const isLandscape = isOrientationLandscape(window);...

ERROR in ./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js 33:11
Module parse failed: Unexpected token (33:11)...
|     } = this.props;
| 
>     return <View style={styles.container} collapsable={false} removeClippedSubviews={Platform.OS === 'android' ? removeClippedSubviews : !isFocused && removeClippedSubviews}>...

ERROR in ./node_modules/react-native-gesture-handler/GestureComponents.js 54:8
Module parse failed: Unexpected token (54:8)...
|       const ScrollView = this.ScrollView;
|       MEMOIZED.FlatList = React.forwardRef((props, ref) => (
>         <ReactNative.FlatList
|           ref={ref}...

ERROR in ./node_modules/react-native-gesture-handler/touchables/TouchableWithoutFeedback.js 5:2
Module parse failed: Unexpected token (5:2)...
| const TouchableWithoutFeedback = React.forwardRef((props, ref) => (
>   <GenericTouchable ref={ref} {...props} />...

ERROR in ./node_modules/@react-navigation/native/dist/createAppContainer.js 64:9
Module parse failed: Unexpected token (64:9)...
| export default function createNavigationContainer(Component) {
|   class NavigationContainer extends React.Component {
>     subs = null;...

webpack.config.js:

var path = require('path');

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + '/web/index.web.js',
  output: {
    path: __dirname + "/web/public",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./web/public",
    historyApiFallback: true,
    inline: true
  } ,
  module: {
    rules: [
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'file-loader'
        }
      },
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: false,
            plugins: [
               '@babel/plugin-transform-runtime'
            ]
          }
        },
        exclude: /node_modules/,   
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: [ '.web.js', '.js' ]
  }
}

index.web.js:

import { AppRegistry } from 'react-native';
import App from '../App';
import {name as appName} from '../app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.runApplication(appName, {
  initialProps: {},
  rootTag: document.getElementById('react-app')
});

Я пытался добавить react-native-screens, не работает

пытался добавить npm update acorn --depth 20, не работает

Я знаю, что слишком много ошибок LOL

Я уже успешно запаковал веб-сайт с аналогичным webpack.config.js, но без React-naive. когда я изменил значение entry: на React-native, это произошло

Я новичок в реагировании, понятия не имею. У кого-нибудь есть предложения?