react native bundling failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

Question

在我的 React Native 应用程序中使用 Expo 时出现错误。在导入下面这行代码的时候。（只有我使用导入的部分代码 'expo'）

import {Permissions, ImagePicker} from 'expo';

我收到一个错误。我整天都在寻找解决方案。我认为是因为我使用的 React 版本更新了吗？我尝试了，但它没有用，而且出现了更多错误。还删除了 node_modules 文件夹并重新安装，但似乎没有任何效果。

安装 yarn add babel-core@7.0.0-bridge.0 应用程序崩溃（对象作为 React Child 无效）。在调试模式下它也不起作用。

还有一些纱线检查错误。安装缺少的依赖项时，我什至会遇到更多错误。

bundling failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "E:\stack\Github\turfMeister\testProject\node_modules\babel-preset-expo\index.js") at throwVersionError (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:65:11) at Object.assertVersion (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:13:11) at _default (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\lib\index.js:35:7) at E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:19:12 at Function.memoisePluginContainer (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13) at Function.normalisePlugin (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32) at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30 at Array.map () at Function.normalisePlugins (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14 at E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22 at Array.map () at OptionManager.resolvePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20) at OptionManager.mergePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10) at OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14) at OptionManager.init (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:212:65) at new File (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:135:24) at Pipeline.transform (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at Object.transform (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\transformer.js:135:5) at Object.transformCode [as transform] (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\JSTransformer\worker\index.js:253:15) at execMethod (E:\stack\Github\turfMeister\testProject\node_modules\jest-worker\build\child.js:92:29) at 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"
  }
}

纱线检查说

yarn check v1.9.2 info fsevents@1.2.4: The platform "win32" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. error "react-native#react@16.3.1" doesn't satisfy found match of "react@16.6.3" error "expo#expo-react-native-adapter#react-native@^0.57.1" doesn't satisfy found match of "react-native@0.55.4" error "expo#react-native-reanimated#react@16.0.0-alpha.6" doesn't satisfy found match of "react@16.6.3" error "expo#react-native-reanimated#react-native@^0.44.1" doesn't satisfy found match of "react-native@0.55.4" warning "jest-cli#jest-message-util#@babel/code-frame@^7.0.0-beta.35" could be deduped from "7.0.0-rc.2" to "@babel\code-frame@7.0.0-rc.2" error "babel-preset-expo#metro-react-native-babel-preset#@babel/core@*" doesn't satisfy found match of "@babel\core@7.0.0-rc.2" error "@babel/plugin-proposal-decorators#@babel/helper-create-class-features-plugin##@babel/core@^7.0.0" doesn't satisfy found match of "@babel\core@7.0.0-rc.2" error Found 6 errors. info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

Answer 1

折腾了半个多月才发现问题所在。不知何故我实际上没有使用（正确的）世博会！？这是我修复它的方法。我的解决方案可能有些麻烦，我认为有一个更快的解决方案，但它有效。

You can check if your app uses expo by doing the following: yarn start. If in the command line there is not an QR code, you dont use (the correct) Expo.

如何解决？

安装 npm create-react-native-app
通过 create-react-native-app [应用名称] 创建一个新项目
在第 2 步，我出了问题，因为这个版本实际上创建了 react-native 和 Expo 的组合。我显然用了别的东西
（您可以选择带或不带 react-navigation 的示例应用程序。这个选择无关紧要。）
cd [应用名称] 然后 yarn start.
确保您在命令行中看到二维码。否则它不使用正确的 expo。
我现在将我的旧项目复制到这个新项目中。（你也可以将新制作的文件复制到你的旧文件中，但我这样做时遇到了问题，因为我旧项目中的所有类型的 expo 依赖项都错了。
（非强制）在目标设备上下载 Expo 应用程序 (android)。 expo 应用程序可以使用二维码打开您的应用程序。（只用 android 测试过）

如果你知道如何解决这个问题faster/without将整个项目复制到一个新项目，我想听听你的意见。