Проблема конфигурации React-Native-Web: Не удалось скомпилировать "элементы управления react-native-media"

ProgramBox

Проблема конфигурации React-Native-Web: Не удалось скомпилировать «элементы управления react-native-media»

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#react-native #compiler-errors #react-native-web

Вопрос:

Я пытаюсь преобразовать проект для react-native-web, который создан в react-native. Поэтому я начал добавлять 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 для Интернета и 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

Ответ №1:

Многие собственные пакеты react не переносятся в es6 и включают в себя вещи, несовместимые с Интернетом. Иногда необходимо проанализировать их с помощью babel, прежде чем они появятся в Интернете.

если вы запустите эту выставку, она создаст для вас конфигурацию веб-пакета

 expo customize:web

затем вы можете добавить модули в загрузчик babel, например:

 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

Метки: Проблема конфигурации React-Native-Web: Не удалось скомпилировать «элементы управления react-native-media»

Вопрос:

Ответ №1:

Вам также может понравиться

Синтаксическая ошибка: Невозможно использовать инструкцию import вне модуля при тестировании с использованием библиотеки jest и react-тестирования

Как TCP — соединение может быть закрыто удаленным устройством во время TcpListener AcceptSocket?

Пользователь с предварительной аутентификацией в Java EE / JBoss КАК 6