Unexpected token punc «;», expected punc «,» Error after adding and installing package

[niklas-braun]

Report

Plugin Version

6.8.0

On what Platform are you having the issue?

React-Native 0.63.3 with react 16.13.1

What did you do?

I ran npm install react-native-appsfyler and afterwards cd ios && pod install.

After Pods were installed I ran mkdir -p sourcemaps && react-native bundle --reset-cache --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ios --sourcemap-output ./sourcemaps/sourcemap.ios.js --sourcemap-sources-root ./

What did you expect to happen?

Installation completed successfully. I expected the App to create a bundle for iOS and android correctly. Before installation of AppsFlyer the bundle was created successfully without any error.

What happened instead?

Instead of creating iOS / Android Bundle the react-native bundle process catches following error:

Error: Unexpected token punc «;», expected punc «,» in file app/views/LoggedIn/WorkoutFeedbackView/WorkoutFeedbackStep1View.tsx at 208:27
    at /Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:430:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:75:24)
    at _next (/Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:95:9)
    at /Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:100:7
    at new Promise (<anonymous>)
    at /Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:92:12
    at JsTransformer._minifyCode (/Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:437:7)
    at /Users/niklasbraun/Documents/GitHub/heapster/mobile-app/node_modules/metro/src/JSTransformer/worker.js:367:33

Please provide any other relevant information.

See my package.json:

    "@invertase/react-native-apple-authentication": "^2.1.0",
    "@linderasdk/react-native-lindera-sdk": "^0.6.0",
    "@notifee/react-native": "^0.15.2",
    "@react-native-async-storage/async-storage": "^1.15.0",
    "@react-native-community/datetimepicker": "^3.0.9",
    "@react-native-community/netinfo": "^5.9.10",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-firebase/analytics": "^10.5.1",
    "@react-native-firebase/app": "^10.5.0",
    "@react-native-firebase/crashlytics": "^10.5.1",
    "@react-native-firebase/in-app-messaging": "^10.5.1",
    "@react-native-firebase/messaging": "^10.5.1",
    "@react-native-firebase/remote-config": "^10.5.1",
    "@react-native-picker/picker": "^1.9.10",
    "amazon-cognito-identity-js": "^4.5.7",
    "aws-amplify": "^3.3.14",
    "email-validator": "^2.0.4",
    "hex-to-rgba": "^2.0.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "lottie-ios": "3.1.8",
    "lottie-react-native": "^4.0.2",
    "m3u8-parser": "^4.5.0",
    "metro-config": "^0.72.1",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-content-loader": "^5.1.4",
    "react-native": "0.63.4",
    "react-native-adapty": "^1.3.13",
    "react-native-adjust": "^4.29.4",
    "react-native-appsflyer": "^6.8.0",
    "react-native-cache": "^2.0.1",
    "react-native-circular-progress": "^1.3.7",
    "react-native-config": "^1.4.2",
    "react-native-device-info": "^8.0.1",
    "react-native-elements": "^3.2.0",
    "react-native-exception-handler": "^2.10.9",
    "react-native-fbsdk": "^3.0.0",
    "react-native-fs": "^2.17.0",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-hyperlink": "0.0.19",
    "react-native-iap": "^6.2.0",
    "react-native-image-crop-picker": "^0.36.0",
    "react-native-image-marker": "^0.6.1",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^2.0.2",
    "react-native-modal": "^12.0.0",
    "react-native-navigation": "^7.22.3",
    "react-native-offline": "^5.8.0",
    "react-native-orientation-locker": "^1.2.0",
    "react-native-permissions": "^3.0.1",
    "react-native-rate": "^1.2.4",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-share": "^6.2.0",
    "react-native-simple-crypto": "^0.2.15",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-url-polyfill": "^1.2.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-version-check": "^3.4.2",
    "react-native-video": "^5.1.1",
    "react-native-webview": "^11.2.3",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "remote-redux-devtools": "^0.5.16",
    "rollbar-react-native": "^0.9.1",
    "semver": "^5.7.0",
    "uuid": "^3.4.0",
    "victory-native": "^35.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/runtime": "^7.13.7",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.168",
    "@types/react": "^17.0.2",
    "@types/react-native": "^0.63.50",
    "@types/react-native-fbsdk": "^3.0.0",
    "@types/react-native-keep-awake": "^2.0.2",
    "@types/react-native-share": "^3.3.1",
    "@types/react-native-snap-carousel": "^3.8.2",
    "@types/react-native-video": "^5.0.4",
    "@types/react-redux": "^7.1.16",
    "@types/react-test-renderer": "^17.0.1",
    "@types/redux-logger": "^3.0.8",
    "@types/remote-redux-devtools": "^0.5.4",
    "@types/uuid": "^8.3.0",
    "@typescript-eslint/eslint-plugin": "^4.15.2",
    "@typescript-eslint/parser": "^4.15.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "colors": "^1.4.0",
    "eslint": "^7.20.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "graceful-fs": "^4.2.6",
    "jetifier": "^1.6.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "npm-run-all": "^4.1.5",
    "prompts": "^2.4.0",
    "react-dom": "^16.9.0",
    "react-native-schemes-manager": "^2.0.0",
    "typescript": "^4.2.2"
  },```

[amit-kremer93]

Hi, it looks like its more related to metro-react-native-babel-preset dependency in your project. try to update it or to configure it differently

[niklas-braun]

Hi, it looks like its more related to metro-react-native-babel-preset dependency in your project. try to update it or to configure it differently

@amit-kremer93 already done but not working with newest version of metro-react-native-babel-preset. Also tried with the metro-react-native-babel-preset version of the example project. Also the example project does not compile

[github-actions[bot]]

👋 Hi @niklas-braun and Thank you for reaching out to us. In order for us to provide optimal support, please submit a ticket to our support team at [email protected]. When submitting the ticket, please specify:

• ✅ your AppsFlyer sign-up (account) email
• ✅ app ID
• ✅ production steps
• ✅ logs
• ✅ code snippets
• ✅ and any additional relevant information.