“您需要适当的加载程序",使用react native和expo.应用无法在网络上编译,但可以在android上运行 [英] "You require appropriate loaders", Using react native and expo. App fails to compile on the web, but runs on android
问题描述
我正在使用react native expo.该应用程序在android上可以正常运行,但是在网络上运行时会出现编译错误.以前它工作正常,但我怀疑这是在安装一些新软件包后开始的.
I'm using react native expo. The app works fine on android, but when run on the web gets a compilation error. It was working fine in before, but I suspect this started after installing some new package.
/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'],
};
};
我的package.json
My package.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"
}
如何添加适当的加载程序,或识别导致此问题的软件包.
How to add appropriate loaders, or identify the package causing this issue.
推荐答案
我遇到了同样的问题,今天我找到了解决方案.感谢世博论坛上的此类用户.
I had this exact same issue, I found a solution today. Thanks to this kind user on the expo forums.
- 使用npm上的yarn将
react-native-keyboard-aware-scroll-view
软件包安装到您的node_modules中 - 导航到本地base/dist/src/basic并打开Content.js
- 找到
var _reactNativeKeyboardAwareScrollView = require('@ codler/react-native-keyboard-aware-scroll-view')
- 将此更改为
var _reactNativeKeyboardAwareScrollView = require('react-native-keyboard-aware-scroll-view')
(删除@codler
)
- Install the
react-native-keyboard-aware-scroll-view
package into your node_modules with yarn on npm - Navigate to native base/dist/src/basic and open Content.js
- Find
var _reactNativeKeyboardAwareScrollView=require('@codler/react-native-keyboard-aware-scroll-view')
- Change this to
var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view')
(remove the@codler
)
更新:这是一个更永久的解决方案由 patarapolw
Update: Here's a more permanent solution courtesy of patarapolw
我在package.json中降级了两件事,并升级了一件事
I downgrade two things, and upgrade one thing, in package.json
{
"dependencies": {
"native-base": "~2.11",
"react-native-web": "~0.11"
},
"resolutions": {
"react-native-keyboard-aware-scroll-view": "^0.9.0"
},
}
这篇关于“您需要适当的加载程序",使用react native和expo.应用无法在网络上编译,但可以在android上运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!