反应原生捆绑失败：错误：需要 Babel“^7.0.0-0”，但加载了“6.26.3”答案

【问题标题】：react native bundling failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"反应原生捆绑失败：错误：需要 Babel“^7.0.0-0”，但加载了“6.26.3”
【发布时间】：2019-05-18 00:36:03
【问题描述】：

在我的 react 本机应用程序中使用 Expo 时出现错误。导入以下代码行时。（只有部分代码使用了 import 'expo'）

import {Permissions, ImagePicker} from 'expo';

我得到一个错误。我整天都在寻找解决方案。我认为是因为我使用的 React 版本更新了？我尝试了this post，但没有成功，而且出现了更多错误。还删除了 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”）在 throwVersionError (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:65:11) 在 Object.assertVersion (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:13:11) 在 _default (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\lib\index.js:35:7) 在 E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin-proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:19:12 在 Function.memoisePluginContainer (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13) 在 Function.normalisePlugin (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32) 在 E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30 在 Array.map() 在 Function.normalisePlugins (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) 在 OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) 在 E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14 在 E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22 在 Array.map() 在 OptionManager.resolvePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20) 在 OptionManager.mergePresets (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10) 在 OptionManager.mergeOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14) 在 OptionManager.init (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) 在 File.initOptions (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:212:65) 在新文件 (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\file\index.js:135:24) 在 Pipeline.transform (E:\stack\Github\turfMeister\testProject\node_modules\babel-core\lib\transformation\pipeline.js:46:16) 在 Object.transform (E:\stack\Github\turfMeister\testProject\node_modules\metro\src\transformer.js:135:5) 在 Object.transformCode [as transform] (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" 是一个可选的依赖项并且兼容性检查失败。从安装中排除它。错误“react-native#react@16.3.1”不满足“react@16.6.3”的找到匹配错误“expo#expo-react-native-adapter#react-native@^0.57.1”不满足“react-native@0.55.4”的找到匹配错误“expo#react-native-reanimated#react@16.0.0-alpha.6”不满足“react@16.6.3”的匹配错误“expo#react-native-reanimated#react-native@^0.44.1”不满足“react-native@0.55.4”的匹配警告 "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" 错误“babel-preset-expo#metro-react-native-babel-preset#@babel/core@*”不满足“@babel\core@7.0.0-rc.2”找到的匹配错误“@babel/plugin-proposal-decorators#@babel/helper-create-class-features-plugin##@babel/core@^7.0.0”不满足“@babel\core@7.0. 0-rc.2" error 发现 6 个错误。 info 访问https://yarnpkg.com/en/docs/cli/check 获取有关此命令的文档。

【问题讨论】：

标签： react-native babel-core

【解决方案1】：

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

您可以通过执行以下操作来检查您的应用是否使用 expo：yarn start。如果命令行中没有二维码，您不要使用（正确）Expo。

如何解决？

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

如果您知道如何更快地解决此问题/无需将整个项目复制到新项目中，我想听听您的意见。

【讨论】：