React-Native 앱의 Babel에서 알 수 없는 옵션 오류가 발생했습니다.
저는 리액트 네이티브를 배우기 위해 타이프스크립트가 있는 리액트 네이티브 앱을 만들고 있습니다.expo start로 앱을 실행하고 에뮬레이터에서 실행하려고 하면 다음 오류가 발생합니다.
index.js: [BABEL] ......../index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options
사실 전에는 이런 오류가 없었습니다.설치하려고 했습니다.react-native-dotenv
패키지 및 수행 중 설치됨metro-react-native-babel-preset
이미 설치되었는지 여부도 잘 모르겠습니다.
내 소포.json은 다음과 같습니다.
{
"name": "mobile-app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@react-native-community/async-storage": "^1.12.0",
"@react-native-community/google-signin": "^4.0.3",
"@types/axios": "^0.14.0",
"axios": "^0.20.0",
"expo": "^38.0.10",
"react": "16.13.1",
"react-native": "0.62.2"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@react-native-community/eslint-config": "^1.1.0",
"@types/jest": "^25.2.3",
"@types/react-native": "^0.63.2",
"@types/react-native-dotenv": "^0.2.0",
"@types/react-test-renderer": "^16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^25.1.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"react-native-clean-project": "^3.4.0",
"react-native-dotenv": "^2.4.1",
"react-test-renderer": "16.13.1",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
babel.config.js :
module.exports = {
presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
};
index.js
/**
* @format
*/
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent('main', () => App);
이 문제는 다음과 관련이 있는 것으로 밝혀졌습니다.react-native-dotenv
설정.babel.config.js가 다음으로 변경됨:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
};
또한 가져오기 문을 다음에서 변경했습니다.import {VARIABLE} from "react-native-dotenv"
대상:import {VARIABLE} from "@env"
솔루션 크레딧:
https://github.com/facebook/react-native/issues/29314
솔루션:
https://github.com/goatandsheep/react-native-dotenv/wiki/Migration-Guide
저는 expo로 앱을 구축하다가 같은 문제로 끝났습니다.가져오기 이름을 변경하여 이 문제를 수정했습니다.'react-native-dotenv'
로.'@env'
그런 다음 내 babel.config.js를 로 변경했습니다.
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
"module:react-native-dotenv",
]
};
};
사용하지 않았습니다.module:metro-react-native-babel-preset
하지만 만약 당신이 그것을 사용했다면, 나는 당신이 babel.config.js를 변경할 필요가 있다고 생각합니다.
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"module:react-native-dotenv"
]
};
이러한 변경 후 터미널에서 다음 명령을 사용하여 엑스포의 캐시를 재설정합니다.내 것은 이 단계 이후에만 작동했습니다.
expo r -c
2022년(아래 버전 목록의 경우)에는 다음과 같은 것이 있습니다.babel.config.js
에 대한 항목이 하나만 있어야 합니다.react-native
프로젝트
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
그러나 다른 테스트 관련 설정이 올바른지 확인해야 합니다.예를 들어 프로젝트 루트에 다음과 같은 파일이 있어야 합니다.jest.config.js
다음과 같이 보여야 합니다.또는 다음에 이 설정을 추가할 수 있습니다.package.json
파일.
// jest.config.js
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: [
// 1. specific setup for react-native
'@testing-library/jest-native/extend-expect',
// 2. global setup & mocking for some services:
'./jest.setup.js',
// 3. mocking for more services:
'./__mocks__/react-native-firebase.js',
"./__mocks__/@react-native-community/google-signin.ts",
],
// 4. Exclusinons List:
transformIgnorePatterns: ["node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)"],
}
"react-native": "0.66.4"
"@testing-library/react-native": "^9.0.0"
"babel-core": "^7.0.0-bridge.0"
"babel-jest": "^27.4.6"
"jest": "^27.4.7"
"metro-react-native-babel-preset": "^0.66.2"
이것은 우리 팀이 React-Native를 0.63.1에서 0.67.3으로 업데이트했을 때 일어났고, 해결책은 node_modules 폴더를 삭제하고 다음을 수행하는 것이었습니다.yarn install
다시 한번. 왜 효과가 있었는지는 모르겠지만, 우리 팀원 모두에게 효과가 있었습니다(7명).
다른 사용자가 설치한 경우Reanimated
여전히 이 오류에 문제가 있습니다. 해당 플러그인은 에 마지막으로 나열되어야 합니다.babel.config.js
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 에 따르면 #babel-markets.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'module:react-native-dotenv',
'react-native-reanimated/plugin', // THIS HAS TO BE LISTED LAST
],
};
언급URL : https://stackoverflow.com/questions/64225453/unknown-option-error-from-babel-in-react-native-app
'programing' 카테고리의 다른 글
MongoDB의 JavaScript NoSQL 주입 방지 (0) | 2023.07.09 |
---|---|
파일 또는 어셈블리 Oracle을 로드할 수 없습니다.데이터 액세스 (0) | 2023.07.09 |
열의 마지막 행까지 수식 채우기 (0) | 2023.07.09 |
Ubuntu에서 sqlite3-ruby 설치 오류 (0) | 2023.07.09 |
SQL 조인 테이블 명명 규칙 (0) | 2023.07.09 |