1

我的 React Native 应用程序包含来自 ReactXP 库的视频组件。我的应用程序不包含很多代码，只有 3 个重要文件 -> App.tsx 包含一个 VideoContainer 组件 (VideoContainer.tsx) 和 VideoContainer 包含一个 VideoComponent (VideoComponent.tsx)。我的 VideoComponent 返回 RX.Video 组件。

这是我的问题，当我尝试使用“npm run start:web”在 Web 上启动我的应用程序时，出现以下错误：

ERROR in ./Video/VideoContainer.tsx 5:28
Module 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

所以我在网上查了一下什么是加载器，因为我是 webpack 的初学者，它存在不同的加载器，如文件加载器、url-loader、ts-loader 等......但我不知道我需要哪个添加到我的项目中，我尝试了不同的加载器，但似乎没有一个可以工作。

这是我的初始代码：

应用程序.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>

视频组件.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>
        
    )
}

考虑的解决方案

我修改了我的 VideoContainer.tsx 代码以检查问题是否来自打字稿。所以我只是去掉了我的 VideoComponent 常量的 React.FC 类型。这是新代码：

import {VideoComponent} from "./VideoComponent"
import React from "react"
import {VideoProps} from "./VideoPropsInterface"

export const VideoContainer = ( {id, src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>

现在我得到了同样的错误，但位置发生了变化：

ERROR in ./Video/VideoContainer.tsx 5:42
Module 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.

现在它是意外标记（5:42），它对应于第二种类型的 VideoProps。所以我认为打字稿有问题，我想我需要添加 ts-loader 但是一旦添加，什么都没有改变。

但我并不完全理解 webpack 是如何工作的。我尝试在我的 web 文件夹中创建一个 webpack.config.js，并且还在 web/webpack 文件夹和根目录中，但没有任何变化。

这是我的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'),
  },
};

这是我的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"
  }
}

我的代码有什么问题？

谢谢阅读 ：）

4

0 回答 0