«Вам нужны соответствующие загрузчики», используя react native и expo. Приложение не компилируется в Интернете, но работает на android

Question

Я использую react native expo. Приложение отлично работает на android, но при запуске в Интернете выдает ошибку компиляции. Раньше он работал нормально, но я подозреваю, что это началось после установки какого-то нового пакета.

/ReactNativeFrontend/node_modules/@codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.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
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
| 
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49

Моя конфигурация babel

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Мой пакет. json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@codler/native-base": "^2.14.2",
    "@material-ui/core": "^4.11.0",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/datetimepicker": "^2.4.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/voice": "^1.1.6",
    "@risingstack/react-easy-state": "^6.3.0",
    "axios": "^0.19.2",
    "easy-peasy": "^3.3.1",
    "expo": "~38.0.8",
    "expo-camera": "^8.3.1",
    "expo-constants": "^9.1.1",
    "expo-font": "~8.2.1",
    "expo-gl": "^8.3.1",
    "expo-image-picker": "^8.3.0",
    "expo-permissions": "^9.0.1",
    "expo-pixi": "^1.2.0",
    "expo-speech": "~8.2.1",
    "expo-status-bar": "^1.0.2",
    "i18n-js": "^3.7.1",
    "lodash.memoize": "^4.1.2",
    "native-base": "^2.13.12",
    "proxy": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-instantsearch-native": "^6.7.0",
    "react-native-chatbot": "0.0.1-alpha.12",
    "react-native-datepicker": "^1.7.2",
    "react-native-dialogflow": "^3.2.2",
    "react-native-elements": "^2.0.4",
    "react-native-fade-in-view": "^1.1.0",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-localization": "^2.1.6",
    "react-native-localize": "^1.4.1",
    "react-native-no-flicker-image": "^1.0.2",
    "react-native-paper": "^4.0.1",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-signature-capture": "^0.4.10",
    "react-native-star-rating": "^1.1.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-voice": "^0.3.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "^2.9.0",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.11.0",
    "babel-preset-expo": "~8.1.0",
    "react-native": "^0.63.2"
  },
  "private": true,
  "rnpm": {
    "assets": "./assets/fonts"
  },
  "proxy": "http://localhost:19002"
}

Как добавить соответствующие загрузчики или определить пакет, вызывающий эту проблему.

Answer 1

У меня была точно такая же проблема, сегодня я нашел решение. Спасибо такому любезному пользователю на форумах expo.

post judipuak

1. Установите пакет react-native-keyboard-aware-scroll-view в ваши node_modules с помощью пряжи on npm
2. Перейдите к native base / dist / src / basi c и откройте Content. js
3. Найдите var _reactNativeKeyboardAwareScrollView=require('@codler/react-native-keyboard-aware-scroll-view')
4. Измените это на var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view') (удалите @codler)

Обновление: Вот более постоянное решение, любезно предоставленное patarapolw

I понизить две вещи и обновить одну в пакете. json

 {
  "dependencies": {
    "native-base": "~2.11",
    "react-native-web": "~0.11"
  },
  "resolutions": {
    "react-native-keyboard-aware-scroll-view": "^0.9.0"
  },
}

Answer 2

Это компонент Native Base, который вызывает проблему. В моем случае это Toast из Native Base.

Я понятия не имею, как правильно настроить webpack , и я не думаю, что Native Base поддерживает веб-конец через react-native-web. Поэтому я просто пишу новые страницы для Интернета без Native Base. то есть, не удалось полностью повторно использовать страницы RN в браузере.

В качестве альтернативы вы можете писать страницы с чистыми компонентами RN. Такой подход позволяет страницам работать как на веб-сайтах, так и на нативных.

PS: Однако, когда я в начале своего проекта, даже с использованием Native Base, проект мог без проблем работать в сети. Это случилось, когда я использовал Next. js в Expo.