React Native : how to configure webpack, which loader should I add?

My React Native app contains a Video component from ReactXP library. My app doesn't contain a lot of code, there is only 3 important files -> App.tsx which contains a VideoContainer component (VideoContainer.tsx) and VideoContainer contains a VideoComponent (VideoComponent.tsx). My VideoComponent returns the RX.Video component.

Here is my problem, when I try to start my app on web with "npm run start:web" I get the following error :

ERROR in ./Video/VideoContainer.tsx 5:28Module parse failed: Unexpected token (5:28)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| import {VideoProps} from "./VideoPropsInterface"|> export const VideoContainer : React.FC<VideoProps> = ( {id, src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>i ｢wdm｣: Failed to compile.No type errors found

So I check on internet what is a loader because I'm a beginner in webpack and it exists different loaders such as file-loader, url-loader, ts-loader, etc ...But I don't know which one I need to add in my project, I try different loaders but no one seems to work.

Here is my initial code :

App.tsx

import React, { ReactElement } from 'react';import RX from 'reactxp';import {VideoContainer} from "../Video/VideoContainer";const _styles = {  main: RX.Styles.createViewStyle({    justifyContent: 'center',    alignItems: 'center',    flex: 1,  }),  title: RX.Styles.createTextStyle({    fontWeight: 'bold',    fontSize: 36,    textAlign: 'center',  }),  label: RX.Styles.createTextStyle({    marginTop: 10,    textAlign: 'center',    fontSize: 16,  }),  name: RX.Styles.createTextStyle({    fontWeight: 'bold',    fontSize: 36,    color: '#42B74F',  }),  links: RX.Styles.createViewStyle({    justifyContent: 'center',    flexDirection: 'row',    alignItems: 'center',    marginTop: 10,  }),  link: RX.Styles.createLinkStyle({    marginRight: 5,    marginLeft: 5,    color: '#0070E0',  }),};export default class App extends RX.Component {  constructor(props : any ){    super(props);  }  public render(): ReactElement<RX.View> {    return (<RX.View style={ _styles.main }><VideoContainer id="videoPlayer" src={"http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"}></VideoContainer><RX.View><RX.Text style={ _styles.title }>Welcome to <RX.Text style={ _styles.name }>ReactXP</RX.Text></RX.Text><RX.Text style={ _styles.label }>To get started, edit /src/App.tsx</RX.Text></RX.View><RX.View style={ _styles.links }><RX.Link url={ 'https://github.com/Microsoft/reactxp' } style={ _styles.link }>GitHub</RX.Link><RX.Link url={ 'https://microsoft.github.io/reactxp' } style={ _styles.link }>Docs</RX.Link><RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/samples' } style={ _styles.link }>Samples</RX.Link><RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/extensions' } style={ _styles.link }>Extensions</RX.Link></RX.View></RX.View>    );  }}

VideoContainer.tsx

import {VideoComponent} from "./VideoComponent"import React from "react"import {VideoProps} from "./VideoPropsInterface"export const VideoContainer : React.FC<VideoProps> = ( {id, src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>

VideoComponent.tsx

import React from 'react';import { View } from "react-native";import Video from 'reactxp-video'import {VideoProps} from "./VideoPropsInterface"export const VideoComponent: React.FC<VideoProps>= ( {id, src} : VideoProps) => {    return(<View nativeID={id}><Video source={src} /></View>    )}

Considered solution

I modified my VideoContainer.tsx code to check if the problem comes from typing with typescript. So I just take off the React.FC type of my VideoComponent constant.Here is the new code :

import {VideoComponent} from "./VideoComponent"import React from "react"import {VideoProps} from "./VideoPropsInterface"export const VideoContainer = ( {id, src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>

Now I got the same error but location changes:

ERROR in ./Video/VideoContainer.tsx 5:42Module parse failed: Unexpected token (5:42)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| import {VideoProps} from "./VideoPropsInterface"|> export const VideoContainer = ( {id, src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>i ｢wdm｣: Failed to compile.

Now it's unexpected token (5:42) and it corresponds to the second type VideoProps. So I think there is a problem with typescript, I think I need to add the ts-loader but once added, nothing change.

But I don't fully understand how webpack works. I try to create a webpack.config.js inside my web folder, and also isnide the web/webpack folder and in root directory but nothing changes.

Here is the content of my webpack.config.js :

const path = require('path');module.exports = {  entry: './src/index.ts',  module: {    rules: [      {        test: /\.tsx?$/,        use: 'ts-loader',        exclude: /node_modules/,      },    ],  },  resolve: {    extensions: [ '.tsx', '.ts', '.js' ],  },  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist'),  },};

Here is my package.json :

{"name": "winversion","private": true,"main": "index.js","version": "0.0.1","scripts": {"rn-cli": "node scripts/react-native.js","start:android": "npm run rn-cli -- run-android","start:windows": "npm run rn-cli -- run-windows","start:ios": "npm run rn-cli -- run-ios","start:web": "cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development","start:rn-dev-server": "npm run rn-cli -- start --reset-cache","build:web": "cross-env platform=web webpack --config=web/webpack/prod.js --progress --colors --mode=production","test": "jest -c jest/jest.config.js","test:watch": "npm run test -- --watch","test:debug": "node --inspect-brk node_modules/.bin/jest -c jest/jest.config.js --runInBand","build:types": "tsc --emitDeclarationOnly","type-check": "tsc --noEmit","type-check:watch": "npm run type-check -- -w","lint": "eslint --config .eslintrc --ext .ts,.tsx src"  },"devDependencies": {"@babel/core": "7.10.2","@babel/plugin-proposal-decorators": "7.10.1","@babel/preset-env": "7.10.2","@babel/preset-react": "^7.12.1","@react-native-community/cli": "1.11.2","@types/enzyme": "3.10.5","@types/jest": "25.2.3","@types/react": "^16.9.52","@types/react-native": "^0.63.25","@typescript-eslint/eslint-plugin": "3.2.0","@typescript-eslint/parser": "3.2.0","babel-loader": "8.1.0","compression-webpack-plugin": "4.0.0","cross-env": "7.0.2","enzyme": "3.11.0","enzyme-adapter-react-16": "1.15.2","enzyme-to-json": "3.5.0","eslint": "6.1.0","eslint-loader": "4.0.2","eslint-plugin-jest": "23.13.2","eslint-plugin-react": "7.20.0","eslint-plugin-reactxp": "0.1.10","fork-ts-checker-webpack-plugin": "4.1.6","html-webpack-plugin": "^4.3.0","jest": "26.0.1","metro-react-native-babel-preset": "0.59.0","react-dom": "^16.13.1","react-native-typescript-transformer": "^1.2.13","react-native-web": "^0.14.1","rnpm-plugin-windows": "0.6.1","ts-loader": "^8.0.5","typescript": "^3.9.5","url-loader": "^4.1.1","webpack": "^4.43.0","webpack-cli": "^3.3.11","webpack-dev-server": "^3.11.0","webpack-merge": "4.2.2"  },"dependencies": {"@types/react-native-video": "^5.0.3","babel-preset-es2015": "^6.24.1","oneplayerjs": "file:oneplayerjs-1.1.0.tgz","react": "16.13.1","react-native": "^0.59.10","react-native-video": "^5.1.0-alpha8","react-native-windows": "0.59.0-rc.3","reactxp": "2.0.0","reactxp-video": "^2.0.0"  }}

What is wrong with my code ?

Thanks for reading :)