时间戳

首页 > 解决方案 > React-Native-Web 配置问题：无法编译“react-native-media-controls”

react-native - React-Native-Web 配置问题：无法编译“react-native-media-controls”

问题描述

我正在尝试将一个项目转换为在 react-native 中创建的 react-native-web。所以我开始按照文档添加 react-native-web。当我在 Expo 启动后在浏览器中启动它时（使用这个命令 - EXPO_WEB_DEBUG=true expo build:web）它给了我一些库的错误。

Like below errors

Failed to compile.

./node_modules/react-native-media-controls/dist/react-native-media-controls.esm.js

Cannot find module: './assets/ic_fullscreen.png'. Make sure this package is installed.

You can install this package by running: yarn add ./assets/ic_fullscreen.png.



Failed to compile.

./node_modules/@react-native-community/progress-view/js/index.js

Cannot find module: './ProgressView'. Make sure this package is installed.

You can install this package by running: yarn add ./ProgressView.

所以我的问题是 - 有没有办法使用 2 个不同的库 1 个用于 Web 和 1 个用于移动平台？如果是，我们如何做到这一点？任何人都可以指导我吗？

更新 -

我关注了另一篇文章，现在我收到了这些错误

ERROR in ./node_modules/@react-native-community/masked-view/js/MaskedView.js 16:14
Module parse failed: Unexpected token (16:14)
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
| const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');
| 
> import { type MaskedViewProps } from './MaskedViewTypes';
| 
| /**
 @ ./node_modules/@react-native-community/masked-view/index.js 1:0-41 3:15-25
 @ ./node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js 1:1702-1748
 @ ./src/Screens/TestScreens/AnalysisScreens/LeaderBoardScreens/TestResultScreen.tsx 1:1235-1279
 @ ./src/Navigation/HomeNavigator.tsx 1:844-929
 @ ./src/Navigation/RootNavigator.tsx 1:920-946
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/@react-native-community/progress-view/js/index.js 3:0-55
Module not found: Error: Can't resolve './ProgressView' in '/Users/sysquare/Desktop/pariksha-native-app-web/node_modules/@react-native-community/progress-view/js'
 @ ./node_modules/react-native-pdf/index.js 1:1413-1461
 @ ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
 @ ./src/Navigation/RootNavigator.tsx 1:1358-1393
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/@sentry/react-native/dist/js/touchevents.js 74:16
Module parse failed: Unexpected token (74:16)
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
|      */
|     render() {
>         return (<View style={touchEventStyles.wrapperView} 
|         // eslint-disable-next-line @typescript-eslint/no-explicit-any
|         onTouchStart={this._onTouchStart}>
 @ ./node_modules/@sentry/react-native/dist/js/index.js 14:0-75 14:0-75 14:0-75
 @ ./src/App.tsx 1:763-794
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native-webview/lib/WebView.js 7:36
Module parse failed: Unexpected token (7:36)
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
| // implementation which is produced by Expo SDK 37.0.0.1 implementation, with
| // similar interface than the native ones have.
> var WebView = function () { return (<View style={{
|     alignSelf: 'flex-start',
|     borderColor: 'rgb(255, 0, 0)',
 @ ./node_modules/react-native-webview/index.js 1:0-36 3:0-19 4:15-22
 @ ./src/Screens/WebView/TermsAndCondition.tsx 1:469-500
 @ ./src/Navigation/RootNavigator.tsx 1:1628-1675
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js 15:19
Module parse failed: Unexpected token (15:19)
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
| const MessageQueue = require('./MessageQueue');
| 
> const BatchedBridge: MessageQueue = new MessageQueue();
| 
| // Wire up the batched bridge on the global object so that we can call into it.
 @ ./src/NativeComponents/MathView/index.tsx 1:999-1060
 @ ./src/Screens/TestScreens/TestView.tsx 1:455-497
 @ ./src/Screens/TestScreens/TestScreen.tsx 1:3229-3250
 @ ./src/Navigation/HomeNavigator.tsx 1:1184-1228
 @ ./src/Navigation/RootNavigator.tsx 1:920-946
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js 19:47
Module parse failed: Unexpected token (19:47)
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
|  * View component and renders its children.
|  */
> class UnimplementedView extends React.Component<$FlowFixMeProps> {
|   render(): React.Node {
|     // Workaround require cycle from requireNativeComponent
 @ ./node_modules/@react-native-community/progress-bar-android/js/RNCProgressBarAndroid.js 11:0-98
 @ ./node_modules/@react-native-community/progress-bar-android/js/index.js 1:0-63 1:0-63
 @ ./node_modules/react-native-pdf/index.js 1:1339-1394
 @ ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
 @ ./src/Navigation/RootNavigator.tsx 1:1358-1393
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native/Libraries/Core/Devtools/getDevServer.js 13:23
Module parse failed: Unexpected token (13:23)
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 NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
| 
> let _cachedDevServerURL: ?string;
| let _cachedFullBundleURL: ?string;
| const FALLBACK = 'http://localhost:8081/';
 @ ./node_modules/@sentry/react-native/dist/js/integrations/debugsymbolicator.js 84:31-91
 @ ./node_modules/@sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
 @ ./node_modules/@sentry/react-native/dist/js/index.js 8:0-47 35:0-47
 @ ./src/App.tsx 1:763-794
 @ ./index.web.js 1:240-260

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';
| 
 @ ./node_modules/@sentry/react-native/dist/js/integrations/debugsymbolicator.js 24:36-99
 @ ./node_modules/@sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
 @ ./node_modules/@sentry/react-native/dist/js/index.js 8:0-47 35:0-47
 @ ./src/App.tsx 1:763-794
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js 15:12
Module parse failed: Unexpected token (15: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
| const getDevServer = require('./getDevServer');
| 
> import type {StackFrame} from '../NativeExceptionsManager';
| 
| export type CodeFrame = $ReadOnly<{
 @ ./node_modules/@sentry/react-native/dist/js/integrations/debugsymbolicator.js 48:46-115
 @ ./node_modules/@sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
 @ ./node_modules/@sentry/react-native/dist/js/index.js 8:0-47 35:0-47
 @ ./src/App.tsx 1:763-794
 @ ./index.web.js 1:240-260

ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js 19:12
Module parse failed: Unexpected token (19: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
| const {pickScale} = require('./AssetUtils');
| 
> import type {ResolvedAssetSource} from './AssetSourceResolver';
| 
| let _customSourceTransformer, _serverURL, _scriptURL;
 @ ./src/NativeComponents/VideoPlayer/Video1.js 1:1877-1935
 @ ./src/Components/Video/VideoPlayer.tsx 1:1062-1114
 @ ./src/Screens/VideoPlayer/VideoPlayer.tsx 1:1452-1497
 @ ./src/Navigation/RootNavigator.tsx 1:676-721
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./storybook/stories/Button/Button.stories.tsx 8:5
Module parse failed: Unexpected token (8:5)
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 Button from '../../../src/DesignComponents/ButtonGroup/Button';
| 
> type Props = ButtonPropTypes;
| export const button: Props = {
|   active: false,
 @ ./storybook/stories/index.js 1:0-33
 @ ./storybook/index.js 13:2-22
 @ ./src/StoryBookDeviceUI.tsx 1:263-286
 @ ./src/Navigation/HomeNavigator.tsx 1:1253-1284
 @ ./src/Navigation/RootNavigator.tsx 1:920-946
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

ERROR in ./storybook/stories/Welcome/Welcome.stories.js 6:55
Module parse failed: Unexpected token (6:55)
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 Welcome from '.';
| 
> storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
| 
 @ ./storybook/stories/index.js 2:0-35
 @ ./storybook/index.js 13:2-22
 @ ./src/StoryBookDeviceUI.tsx 1:263-286
 @ ./src/Navigation/HomeNavigator.tsx 1:1253-1284
 @ ./src/Navigation/RootNavigator.tsx 1:920-946
 @ ./src/App.tsx 1:453-490
 @ ./index.web.js 1:240-260

1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.52.0 compiled with 12 errors in 7213 ms

标签： react-nativecompiler-errorsreact-native-web

解决方案

许多 React Native 包没有被转译成 es6，并且包含了与 web 不兼容的东西。有时需要在它们在网络上运行之前用 babel 解析它们。

如果你运行这个 expo 将为你生成一个 webpack 配置

expo customize:web

然后你可以将模块添加到 babel loader，例如：

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          // Add package names here to ensure they are transpiled
          "@react-native-community/masked-view",
        ],
      },
    },
    argv
  );
  return config;
};

您可能会注意到这是一种“危险”的方法，因此请谨慎使用。

此配置选项的文档在这里https://github.com/expo/expo-cli/blob/master/packages/webpack-config/README.md

推荐阅读