Не удалось отреагировать на собственное связывание: Ошибка: требуется Babel "^7.0.0-0", но загружен с "6.26.3"
Я получаю сообщение об ошибке при использовании Экспо в моем приложении. При импорте следующей строки кода. (Только часть моего кода, где я использую импорт "Экспо")
import {Permissions, ImagePicker} from 'expo';
Я получаю ошибку. Я весь день ищу решение. Я думаю, что это из-за версии React, которую я использую, обновляется? Я попробовал этот пост, но он не сработал и получил еще больше ошибок. Также удалил папку node_modules и переустановил ее, но, похоже, ничего не работает.
При установке yarn add babel-core@7.0.0-bridge.0 приложение упало (объекты недопустимы в качестве дочернего элемента React ". И в режиме отладки это также не работает.
Есть также некоторые ошибки проверки пряжи. При установке недостающих зависимостей я даже получаю больше ошибок.
сбой связывания: Ошибка: требуется Babel "^7.0.0-0", но был загружен с "6.26.3". Если вы уверены, что у вас есть совместимая версия @ babel / core, вероятно, что-то в процессе сборки загружает неправильную версию. Изучите трассировку стека этой ошибки, чтобы найти первую запись, в которой не упоминается "@babel/core" или "babel-core", чтобы увидеть, что вызывает Babel. (При обработке предустановки: "E:\stack\Github\turfMeister\testProject\node_modules\babel-preset-expo\index.js") в throwVersionError (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin- Предложение-декораторы \node_modules@babel\helper-plugin-utils\lib\index.js:65:11) в Object.assertVersion (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-offer-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:13:11) в _default (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-предложение-декораторы \lib\index.js:35:7) в E: \ stack \ Github \ turfMeister \ testProject \ node_modules @ babel \ plugin-offer-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:19:12 в Function.memoisePluginContainer (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\ преобразование \ файл \options\option-manager.js:113:13) в Function.normalisePlugin (E:\stack\Github\turfMeister\testProject\node_modules\ столпотворение-ядро \ Lib \ преобразование \ файл \ параметры \ опции -manager.js:146:32) в E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \formation\file\options\option-manager.js:184:30 в Array.map () в Function.normalisePlugins (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\translation\file\options\option-manager.js:158:20) в OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\translation\file\options\option-manager.js:234:36) в E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ преобразование \ файл \ опции \option-manager.js:265:14 в E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \formation \ file \ options \ option-option.js:323:22 в Array.map () в OptionManager.resolvePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\formation\file\options\option-manager.js:275:20) в OptionManager.mergePresets (Е: \ стек \ Github \ turfMeister \ TestProject \ node_modules \ Бабель-ядро \ Lib \ преобразование \ ц le\options\option-manager.js:264:10) в OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\translation \ file \ options \ option-option.js:249:14) в OptionManager.init (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\translation\file\options\option-manager.js:368:12) в File.initOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\formation\file\index.js:212:65) в новом файле (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation\file\index.js:135:24) в Pipeline.transform (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\translation\pipeline.js:46:16) в Object.transform (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\transformer.js:135:5) в Object.transformCode [как преобразование] (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\JSTransformer\worker\index.js:253:15) в execMethod (E:\stack\Github\turfMeister\testProject\node_modules\jest-worker\build\child.js:92:29) в process.on (E:\stack\Github\turfMeister\testProject\node_modules\jest-worker\build\child.js:42:7)
весь компонент:
import React, {Component} from "react";
import {
View, Text, StyleSheet, Button, Image,TouchableOpacity,Alert
} from "react-native";
import {Avatar, Divider, Header} from "react-native-elements";
import {auth, database} from "../config/config";
import {Permissions, ImagePicker} from 'expo'; //enabling this line gives an error
class GlobalAccount extends Component {
constructor(props) {
super(props);
this.state = {
user_code: "Chen",
user_object: null,
user_avatar: null,
user_first_name: null,
user_last_name: null,
user_email: null,
imageID: this.uniqueId(),
};
alert(this.uniqueId());
this.findNewImage();
}
s4 = () => {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
};
uniqueId = () => {
return this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4() + "-"
+ this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4();
};
_checkPermissiosn = async () => {
const { statusCamera } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({cameraPermission: statusCamera});
const { statusCameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
this.setState({cameraPermission: statusCameraRoll});
};
findNewImage = async () => {
this._checkPermissiosn();
};
/**
* Testing purpose only.
*/
alertElement(){
Alert.alert(
"Change your profile photo?",
"",
[
{text: "no"},
{text: "yes"}
]
)
}
/**
* Before mounting the scene, load the data
*/
componentWillMount(){
this.loadDataFromDatabase();
}
/**
* When pressed, logout the user.
*/
signUserOut = () => {
var that = this;
auth.signOut()
.then(console.log("user is signed out"))
.catch((error) => console.log("error occured while signing user out: ", error));
that.setState({
loggedin: false
})
};
/**
* Download the data from the server.
* Only data corresponding to the user.
*/
loadDataFromDatabase = () => {
this.setState({
refresh: true,
groups: [],
});
var that = this;
// exampleUser must be the user who is logged in.
database.ref('Users').child(this.state.user_code).once("value")
.then(function (snapshot) {
const exists = (snapshot.val() !== null);
if (exists) {
var user_object = snapshot.val();
console.log("user_object is : " , user_object.avatar);
console.log("user name is " + user_object.firstName);
that.setState({
user_object: user_object,
user_avatar: user_object.avatar,
user_first_name: user_object.firstName,
user_last_name: user_object.lastName,
user_email: user_object.email,
});
}
}).catch(error => console.log(error));
};
/**
* Render the 'my account' page.
* @returns {*the account page.*}
*/
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.imageView}
onLongPress={()=>{this.alertElement()}}
>
<Image style={styles.image}
source={({uri: this.state.user_avatar})}
/>
</TouchableOpacity>
<View>
<Text> Username: {this.state.user_first_name} {this.state.user_code} </Text>
<Text> Email: {this.state.user_email} </Text>
<Text>City: </Text>
</View>
<View>
<Button
title={"Logout"}
onPress={() => this.signUserOut()}
/>
</View>
</View>
);
}
}
//TODO move this to the styleSheet package.
export default GlobalAccount;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
imageView :{
height:100,
width:100,
},
image: {
flex:1,
}
});
Файл Package.json
{
"name": "testProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "^31.0.6",
"expo-font": "^1.0.0",
"firebase": "^5.0.3",
"react": "^16.4.1",
"react-native": "0.55.4",
"react-native-action-button": "^2.8.4",
"react-native-elements": "^0.19.1",
"react-native-navigation": "^1.1.483",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.0.2410"
},
"devDependencies": {
"@expo/vector-icons": "^8.0.0",
"babel-jest": "23.4.2",
"babel-preset-react-native": "4.0.0",
"jest": "23.4.2",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
проверка пряжи говорит
проверка пряжи v1.9.2 info fsevents@1.2.4: платформа "win32" несовместима с этим модулем. info "fsevents@1.2.4" является необязательной зависимостью и неудачной проверкой совместимости. Исключая это из установки. ошибка "response-native#react@16.3.1" не удовлетворяет найденному совпадению с "response@16.6.3" ошибка "expo#expo-react-native-adapter#react-native@^0.57.1" не соответствует удовлетворяет найденному совпадению ошибки "response-native@0.55.4"expo#react-native-reanimated#react@16.0.0-alpha.6"не удовлетворяет найденному совпадению экспозиции"response@16.6.3" error " #react-native-reanimated#react-native@^0.44.1"не удовлетворяет найденному соответствию"response-native@0.55.4" warning "jest-cli#jest-message-util#@babel/code-frame@^7.0.0-beta.35"может быть переведен из"7.0.0-rc.2"в"@babel\code-frame@7.0.0-rc.2" error "babel-preset-expo#metro-response-native-babel-preset#@babel/core@*"не удовлетворяет найденному совпадению ошибки"@babel\core@7.0.0-rc.2"@babel/plugin-offer-decorators#@babel/ Плагин helper-create-class-features-plugin##@babel/core@^7.0.0"не удовлетворяет найденному совпадению ошибки"@babel\core@7.0.0-rc.2". Обнаружено 6 ошибок. info Посетите https://yarnpkg.com/en/docs/cli/check для получения документации об этой команде.
1 ответ
После более чем полугода я обнаружил проблему. Каким-то образом я не использовал (правильную) Экспо!? Вот как я это исправил. Мое решение может быть довольно громоздким, я думаю, что есть более быстрое решение, но оно работает.
Вы можете проверить, использует ли ваше приложение expo, выполнив следующие действия: запуск пряжи. Если в командной строке нет QR-кода, вы не используете (правильный) Expo.
Как решить?
- установить npm создать-реагировать-нативное приложение
- Создайте новый проект с помощью create-реакции-native-app [название приложения]
на шаге 2 это пошло не так со мной, потому что эта версия на самом деле создает комбинацию реагировать-родной и Экспо. и я использовал что-то еще, по-видимому,
(Вы можете выбрать пример приложения с или не без реагирующей навигации. Этот выбор не имеет значения.) - CD [название приложения], а затем начать пряжу.
Убедитесь, что вы видите в командной строке QR-код. Иначе он не использует правильную выставку. Теперь я переписал свой старый проект в этот новый. (Вы также можете скопировать только что созданные файлы в свой старый, но у меня возникли проблемы с этим, поскольку все виды выставочных зависимостей в моем старом проекте были неправильными.
(не обязательно) Скачать на целевом устройстве приложение Expo ( android). Приложение expo может открыть ваше приложение с QR-кодом. (проверял только с андроидом)
Если вы знаете, как решить эту проблему быстрее / без копирования всего проекта в новый, я хотел бы услышать от вас.