Не удалось отреагировать на собственное связывание: Ошибка: требуется Babel "^ 7.0.0-0", но загружен с "6.26.3" - PullRequest
Новая
       16

Не удалось отреагировать на собственное связывание: Ошибка: требуется Babel "^ 7.0.0-0", но загружен с "6.26.3"

0 голосов
/ 17 декабря 2018

Я получаю сообщение об ошибке при использовании Экспо в моем собственном приложении реакции.При импорте следующей строки кода.(Только часть моего кода, где я использую импорт 'expo') 

import {Permissions, ImagePicker} from 'expo';

Я получаю ошибку.Я весь день ищу решение.Я думаю, что это из-за версии React, которую я использую, обновляется?Я попробовал этот пост , но он не сработал и получил еще больше ошибок.Также удалил папку node_modules и переустановил ее, но, похоже, ничего не работает.

При установке yarn add babel-core@7.0.0-bridge.0 приложение упало (объекты недопустимы как React Child ". И в режиме отладки это также не работает.

Есть также некоторые ошибки проверки пряжи. При установке отсутствующих зависимостей я даже получаю больше ошибок.

связывание не удалось: Ошибка: требуется 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 ") at throwVersionError (E: \ stack \ Github \ turfMeister \ testProject \ node_modules @ babel \ plugin-offer-decorators \ node_modules @ babel \ helper-plugin-utils \ lib \ index.js: 65:11) на Обиject.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-offer-decorators \ 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 \formation \ file \ options \option-manager.js: 113: 13) в Function.normalisePlugin (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation \ file \ options \ option-manager.js: 146: 32)в E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation \ file \ options \ option-manager.js: 184: 30 в Array.map () в Function.normalisePlugins (E: \ stack\ Github \ turfMeister \ TestProject \ node_modules \ столпотворение-ядро \ Lib \ преобразование \ файл \ неавтоматическогоion \ option-manager.js: 158: 20) в OptionManager.mergeOptions (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation \ file \ options \ option-option.js: 234:36) в E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \formation \ file \ options \ option-manager.js: 265: 14 в E: \ stack \ Github \ turfMeister \ testProject \ node_modules\ babel-core \ lib \ translation \ file \ options \ option-manager.js: 323: 22 в Array.map () в OptionManager.resolvePresets (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \lib \ translation \ file \ options \ option-manager.js: 275: 20) в OptionManager.mergePresets (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \formation \ file \ options \ option-manager.js: 264: 10) в OptionManager.mergeOptions (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation \ file \ options \ option-manager.js: 249: 14) в OptionManager.init (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \преобразование \ file \ options \ option-manager.js: 368: 12) в File.initOptions (E: \ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ translation \ 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 \ Бабель-ядро \ Lib \ преобразование \ 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) в процессе.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 Ответ

0 голосов
/ 07 января 2019

После более полугода я обнаружил проблему.Каким-то образом я не использовал (правильную) Экспо !?Вот как я это исправил.Мое решение может быть довольно громоздким, я думаю, что есть более быстрое решение, но оно работает.

Вы можете проверить, использует ли ваше приложение expo, выполнив следующие действия: запуск пряжи.Если в командной строке есть , а не QR-код, вы не используете ( правильный ) Expo.

Как решить?

  1. установить npm create-Reaction-native-app
  2. Создать новый проект с помощью create-реагировать-native-app [название приложения]
    на шаге 2 у меня не получилось, потому что эта версия на самом деле создает комбинацию реакции-натива и экспо.и я использовал что-то еще, по-видимому,
    (Вы можете выбрать пример приложения с или без без реагирования-навигации. Этот выбор не имеет значения.)
  3. cd [имя приложения] и затем запуск пряжи.
    Убедитесь, что вы видите в командной строке QR-код.Иначе он не использует правильную выставку.

  4. Теперь я переписал свой старый проект в этот новый.(Вы также можете скопировать вновь созданные файлы в свой старый, но у меня возникли проблемы с этим, поскольку все виды выставочных зависимостей в моем старом проекте были неправильными.

  5. (не обязательно)Загрузите на целевое устройство приложение Expo ( android ). Приложение expo может открыть ваше приложение с помощью QR-кода (проверено только на android)

ЕслиВы знаете, как решить эту проблему быстрее / без копирования всего проекта в новый, я хотел бы услышать от вас.

...