javascript - React-Native-App(Expo) 中的 Babel 选项错误
问题描述
使用“expo start”启动模拟器时，出现以下错误：
[BABEL] /Users/user/Documents/projects/ProArea/nanny-tribe/src/index.native.js：未知选项：.name。查看https://babeljs.io/docs/en/babel-core/#options了解有关选项的更多信息。
更新软件包后出现错误，因为项目已过时。我尝试将导入从“react-native-dotenv”更改为“@env”，但它不起作用。
我的 package.json 如下：
{
"name": "nanny-tribe",
"version": "1.0.40",
"private": true,
"main": "./src/index.native.js",
"license": "UNLICENSED",
"engines": {
"node": ">= 8.12.0"
},
"scripts": {
"start": "node index.js",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app eject",
"native-start": "rndebugger-open --open && expo-cli start --lan -c",
"native-eject": "react-native-scripts eject",
"native-storybook": "concurrently --kill-others-on-fail -raw\"yarn native-
start\" \"storybook start -p 7007\"",
"android": "expo-cli android",
"ios": "expo start --ios",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"dev": "HTTPS=true concurrently --kill-others-on-fail --raw \"nodemon --watch\"
\"FORCE_COLOR=true react-app-rewired start | cat\"",
"api": "nodemon --watch",
"sequelize": "dotenv sequelize",
"sequelize-cli": "^5.3.0",
"heroku-postbuild": "npx sequelize-cli db:migrate",
"prestorybook": "rnstl",
"lint": "eslint .",
"expo-build": "expo build:ios",
"upload": "dotenv -- expo upload:ios --latest",
"upload:android": "expo upload:android --key ./api-8146341486491315803-445540- 97418dee0cde.json"
},
"dependencies": {
"@babel/core": "~7.15.5",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/preset-env": "^7.15.4",
"@babel/preset-react": "^7.14.5",
"@expo/vector-icons": "^12.0.5",
"aws-sdk": "^2.983.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.1.0",
"babel-loader": "8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-react-native-web": "^0.17.1",
"babel-polyfill": "^6.26.0",
"babel-preset-expo": "8.4.1",
"body-parser": "^1.19.0",
"change-case": "^4.1.2",
"connected-react-router": "6.9.1",
"core-js": "^3.17.2",
"eslint-plugin-jest": "^24.4.0",
"expo-av": "~9.2.3",
"expo-constants": "~11.0.2",
"expo-facebook": "~11.3.1",
"expo-file-system": "~11.1.3",
"expo-font": "~9.2.1",
"expo-image-picker": "~10.2.3",
"expo-linear-gradient": "~9.2.0",
"expo-permissions": "~12.1.1",
"expo-secure-store": "~10.2.0",
"expo-server-sdk": "^3.6.0",
"expo-web-browser": "~9.2.0",
"express": "^4.17.1",
"faker":"Marak/faker.js#d3ce6f1a2a9359574e7f31f14d4901648047c45a",
"file-loader": "^6.2.0",
"form-data": "^4.0.0",
"geolib": "^3.3.1",
"history": "^5.0.1",
"http-proxy-middleware": "^2.0.1",
"igniculus": "^1.5.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"luxon": "^2.0.2",
"metro-react-native-babel-preset": "^0.66.2",
"morgan": "^1.10.0",
"multer": "^1.4.3",
"native-base": "^3.1.0",
"node-fetch": "^3.0.0",
"passport": "^0.4.1",
"passport-custom": "^1.1.1",
"passport-facebook-token": "^4.0.0",
"passport-http-bearer": "^1.0.1",
"passport-jwt": "^4.0.0",
"passport-oauth": "^1.0.0",
"pg": "^8.7.1",
"prop-types": "^15.7.2",
"qs": "^6.10.1",
"react": "17.0.2",
"react-app-rewired": "^2.1.8",
"react-art": "^17.0.2",
"react-burger-menu": "^3.0.6",
"react-dom": "17.0.2",
"react-facebook-login": "^4.1.1",
"react-native": "0.65.1",
"react-native-animatable": "^1.3.3",
"react-native-app-link": "^1.0.1",
"react-native-calendars": "^1.1266.0",
"react-native-confetti": "^0.1.0",
"react-native-confirmation-code-field": "^7.1.0",
"react-native-dotenv": "^3.2.0",
"react-native-dropdownalert": "^4.3.0",
"react-native-elements": "^3.4.2",
"react-native-facebook-login": "^1.6.2",
"react-native-gesture-handler": "~1.10.3",
"react-native-gifted-chat": "^0.16.3",
"react-native-global-props": "^1.1.5",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-masked-text": "^1.13.0",
"react-native-modal-datetime-picker": "^11.0.0",
"react-native-progress-bar-animated": "^1.0.6",
"react-native-progress-circle": "^2.1.0",
"react-native-safe-area-context": "3.2.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "3.4.0",
"react-native-sectioned-multi-select": "^0.8.1",
"react-native-side-menu": "^1.1.3",
"react-native-style-tachyons": "^4.2.0",
"react-native-svg": "^12.1.1",
"react-native-svg-image": "^2.0.1",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "~0.17.1",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1",
"react-redux": "7.2.5",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-router-native": "^5.2.1",
"react-router-navigation": "^2.0.0-alpha.10",
"react-scripts": "^4.0.3",
"react-test-renderer": "^17.0.2",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"schedule": "0.5.0",
"sequelize": "^6.6.5",
"sequelize-cli": "^6.2.0",
"storybook": "^6.3.8",
"stripe": "^8.174.0",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5",
"uglifyjs-webpack-plugin": "^2.2.0",
"uuid": "^8.3.2"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
},
"config": {
"react-native-storybook-loader": {
"searchDir": [
"./src"
],
"pattern": "**/story.native.js",
"outputFile": "./storybook/storyLoader.js"
}
},
"proxy": "https://localhost:8080",
"devDependencies": {
"@babel/preset-flow": "^7.14.5",
"@storybook/addon-actions": "^6.3.8",
"@storybook/addon-links": "^6.3.8",
"@storybook/addon-storysource": "^6.3.8",
"@storybook/addon-viewport": "^6.3.8",
"@storybook/addons": "^6.3.8",
"@storybook/react": "^6.3.8",
"@storybook/react-native": "^5.3.25",
"concurrently": "^6.2.1",
"customize-cra": "^1.0.0",
"dotenv": "^10.0.0",
"dotenv-cli": "^4.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"expo": "^42.0.3",
"gh-pages": "^3.2.3",
"nodemon": "^2.0.12",
"react-native-debugger-open": "^0.3.25",
"react-native-storybook-loader": "^2.0.4"
}
}
babel.config.js ：
const path = require('path');
module.exports = {
include: [
path.resolve('src'),
path.resolve('.storybook'),
path.resolve('node_modules/native-base-shoutem-theme'),
path.resolve('node_modules/react-native-easy-grid'),
path.resolve('node_modules/react-native-drawer'),
path.resolve('node_modules/react-native-vector-icons'),
path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('node_modules/react-native-calendars'),
path.resolve('node_modules/react-native-gifted-chat'),
path.resolve('node_modules/react-native-parsed-text'),
path.resolve('node_modules/react-native-lightbox'),
path.resolve('node_modules/react-native-video'),
path.resolve('node_modules/@expo/react-native-action-sheet'),
path.resolve('node_modules/native-base/node_modules/react-native-vector-icons'),
path.resolve('node_modules/react-native-sectioned-multi-select')
],
plugins: [
'react-native-web',
'@babel/plugin-syntax-object-rest-spread',
['@babel/plugin-proposal-class-properties', { 'loose': false }]
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
],
presets: [
[
'@babel/env',
'module:metro-react-native-babel-preset',
{
targets: {
browsers: ['> 1%', 'last 2 versions']
},
modules: 'commonjs'
}
],
'@babel/preset-flow',
'@babel/preset-react'
]
};
解决方案
推荐阅读
- python - 交互式 matplotlib 在控制台中有效，但在脚本中无效
- json - Extracting a list of dicts for a Pandas column
- java - 如果测试用例在 testNG 中失败，如何运行类
- unity3d - Stats 和 Frame Debugger 计数中的不同批次数（统计中为 222，调试器中为 55）
- java - 以正则表达式拆分文本文件并创建数组
- tensorflow - TFlite 解释器在为量化模型分配张量时引发 RuntimeError。涉及 scale_diff 和 output_scale 的断言失败
- android - Android 上的 Android 蓝牙交叉传输密钥派生支持
- ios - IOS 以低帧率运行我的 Unity 项目
- powershell - Connect-AzureAD 不适用于 Powershell 核心
- r - 如何将一个数据框列中的 N 个值交换为 N 的任何值和任何 n（行）？