Expo SDK 44 升级错误 - App.js: [BABEL]: Unexpected token '.'

Question

I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)

Error Stack Trace:

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)

Here is my babel.config.js:

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

Here is my 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
}

Any help will be greatly appreciated.

Answer 1

can you give your

• package.json
• node version

I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining

Answer 2

From what I can see, Expo SDK 44 is still in beta.

The Error Stack Trace reads that newer syntax (in this case the optional chaining operator?.) isn't being transpiled by Babel which causes the failure.

Simply downgrading to the stable SDK 43 should solve all issues.

PS: This error has been reported to Expo already by the beta testers.

Answer 3

Just to let you know, it's a bug in babel-preset-expo when you are using Node 12.

Optional chainning is not supported in node12 and can be easily replaced with extra checks

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

Answer 4

Downgrading to SDK 43.0.0 worked fine for me:

expo update 43.0.0

Answer 5

If you use expo v44 you have to update babel-preset-expo dev dependency to v9.0.2:

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