Expo SDK 44 升級錯誤 - App.js: [BABEL]: Unexpected token '.'

Question

我最近將我的應用程序從 SDK 40 升級到 SDK 44 並遇到了這個錯誤 App.js: [BABEL]: Unexpected token '.' （處理時：/Users/user/path/to/project/node_modules/babel-preset-expo/index.js）

錯誤堆棧跟蹤：

App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
        ...(options?.jsxRuntime !== 'classic' && {
                    ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at loadCjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:85:18)
    at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:57:16)

這是我的 babel.config.js：

return {
    presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
    plugins: [
        ['inline-dotenv'],
        ['.....']
    ]
}

這是我的 package.json：

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject",
        "test": "jest"
    },
    "jest": {
        "preset": "jest-expo"
    },
    "dependencies": {
        "@babel/plugin-transform-react-jsx": "^7.16.5",
        "@react-native-async-storage/async-storage": "~1.15.0",
        "@react-native-community/art": "^1.2.0",
        "@react-native-community/datetimepicker": "4.0.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/netinfo": "7.1.3",
        "@react-native-community/push-notification-ios": "^1.2.2",
        "@react-native-community/slider": "4.1.12",
        "@react-navigation/native": "^5.1.4",
        "aws-amplify": "^3.3.1",
        "aws-amplify-react-native": "^4.2.6",
        "axios": "^0.19.2",
        "expo": "^44.0.0",
        "expo-app-loading": "~1.3.0",
        "expo-barcode-scanner": "~11.2.0",
        "expo-camera": "~12.1.0",
        "expo-constants": "~13.0.0",
        "expo-font": "~10.0.4",
        "expo-linking": "~3.0.0",
        "expo-mail-composer": "~11.1.0",
        "expo-notifications": "~0.14.0",
        "expo-permissions": "~13.1.0",
        "expo-secure-store": "~11.1.0",
        "expo-sqlite": "~10.1.0",
        "expo-updates": "~0.11.2",
        "expo-web-browser": "~10.1.0",
        "file-saver": "^2.0.2",
        "jsbarcode": "^3.11.3",
        "link": "^0.1.5",
        "metro-config": "^0.64.0",
        "npm": "^8.3.0",
        "qs": "^6.9.4",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
        "react-native-barcode-expo": "^1.1.1",
        "react-native-elements": "^3.2.0",
        "react-native-fs": "^2.16.6",
        "react-native-gesture-handler": "~2.1.0",
        "react-native-modal": "^11.5.6",
        "react-native-modal-datetime-picker": "^8.6.0",
        "react-native-paper": "^3.10.1",
        "react-native-push-notification": "^3.5.2",
        "react-native-reanimated": "~2.3.1",
        "react-native-router-flux": "^4.2.0",
        "react-native-safe-area-context": "3.3.2",
        "react-native-screens": "~3.10.1",
        "react-native-snap-carousel": "^3.9.1",
        "react-native-svg": "12.1.1",
        "react-native-web": "0.17.1",
        "react-navigation-animated-switch": "^0.6.4",
        "react-navigation-drawer": "^2.4.11",
        "react-navigation-header-buttons": "^3.0.5",
        "react-router-dom": "^6.0.0-alpha.3",
        "yarn": "^1.22.17"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.9.2",
        "@react-native-community/eslint-config": "^0.0.7",
        "babel-jest": "^25.1.0",
        "babel-plugin-inline-dotenv": "^1.6.0",
        "babel-preset-expo": "9.0.1",
        "eslint": "^6.8.0",
        "expo-cli": "^5.0.2",
        "jest": "^26.6.3",
        "jest-expo": "^44.0.0",
        "metro-react-native-babel-preset": "^0.66.2",
        "react-test-renderer": "^16.13.1"
    },
    "private": true
}

任何幫助將不勝感激。

Answer 1

你能給你的嗎

• package.json
• 節點版本

我認為這是因為 babel 問題/您的節點版本，因為它無法轉換可選鏈接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

也許嘗試使用最新的 LTS 節點版本？ 因為據我所知，最新的 LTS 節點版本已經支持可選鏈

Answer 2

據我所知，Expo SDK 44 仍處於測試階段。

錯誤堆棧跟蹤讀取更新的語法（在這種情況下是可選的鏈接運算符？。）沒有被 Babel 轉譯，這會導致失敗。

只需降級到穩定的 SDK 43 即可解決所有問題。

PS：這個錯誤已經被beta測試人員報告給Expo。

Answer 3

只是讓您知道，當您使用 Node 12 時，這是babel-preset-expo中的一個錯誤。

node12 不支持可選鏈接，可以很容易地用額外的檢查替換

https://github.com/expo/expo/pull/15545

Answer 4

降級到 SDK 43.0.0 對我來說效果很好：

expo update 43.0.0

Answer 5

如果您使用 expo v44，您必須將babel-preset-expo開發依賴更新到 v9.0.2：

"babel-preset-expo": "9.0.2",