[Bug]: SyntaxError with file in node_module Unexpected token, expected "," (4:7), ...

MinhOmega commented 1 year ago

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

`@rnmapbox/maps` version

10.0.0-beta.57 and older

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

No response

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

OS: Macbook pro M1 2021 React native: 0.68.2 NOTE: Our app still use JS code and function component. Please help here and feel free to request anything help reslove this issues.

sonnguyensnap commented 1 year ago

Yes, I am also facing the same problem, can anyone help me?

KiwiKilian commented 1 year ago

Do I understand right, your own Code is Vanilla JS, no TypeScript?

If this occurs with TypeScrip try updating to the newest version.

MinhOmega commented 1 year ago

Hi @KiwiKilian , My ower app was react-native with javascript and upgrade to version 0.68.2. Not implement TypeScript. So when i integrate and run react-native run-ios and show that error. Even install typescript, it still error. This is our package.json

{
  "name": "nineten",
  "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 .",
    "android:jetify": "npx jetify",
    "android:clean": "cd android && ./gradlew clean && cd ..",
    "android:build-release-apk": "cd android && ./gradlew assembleRelease && open app/build/outputs/apk/release"
  },
  "dependencies": {
    "@apollo/client": "^3.7.0",
    "@invertase/react-native-apple-authentication": "^2.1.2",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-community/voice": "^1.1.9",
    "@react-native-firebase/app": "^16.4.3",
    "@react-native-firebase/dynamic-links": "^16.4.3",
    "@react-native-google-signin/google-signin": "^8.0.0",
    "@react-native-picker/picker": "^1.16.3",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "@reduxjs/toolkit": "^1.8.5",
    "color": "^3.1.3",
    "deprecated-react-native-prop-types": "^2.3.0",
    "graphql": "^16.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "native-base": "2.15.2",
    "postinstall-postinstall": "^2.1.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-android-location-services-dialog-box": "^2.8.2",
    "react-native-animatable": "^1.3.3",
    "react-native-collapsible": "^1.6.0",
    "react-native-device-info": "^8.0.1",
    "react-native-fast-image": "^8.3.4",
    "react-native-fbsdk-next": "^4.2.0",
    "react-native-floating-label-input": "1.2.8",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-picker": "^3.6.0",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "^0.29.4",
    "react-native-modal": "^11.10.0",
    "react-native-modal-datetime-picker": "^10.0.0",
    "react-native-pager-view": "5.3.4",
    "react-native-payments": "^0.8.4",
    "react-native-permissions": "^3.2.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "^2.10.0",
    "react-native-render-html": "^5.1.0",
    "react-native-restart": "^0.0.22",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.17.0",
    "react-native-select-dropdown": "^1.4.0",
    "react-native-size-matters": "^0.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.1.1",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.6.0-rc.3",
    "react-native-tab-view": "^3.2.1",
    "react-native-text-input-mask": "^3.1.4",
    "react-native-version-check": "^3.4.3",
    "react-native-video": "5.2.1",
    "react-native-video-controls": "^2.8.1",
    "react-native-webview": "10.1.1",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "rn-fetch-blob": "^0.12.0",
    "rn-placeholder": "^3.0.3",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "6.0.2",
    "eslint-plugin-prettier": "2.1.2",
    "eslint-plugin-react": "7.1.0",
    "eslint-plugin-react-native": "3.0.1",
    "flow-bin": "0.52.0",
    "flow-typed": "^2.5.1",
    "husky": "0.14.3",
    "jest": "^26.6.3",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

KiwiKilian commented 1 year ago

Could you setup a minimal reproduction repository? That would help with testing and finding the problems in the new setup...

MinhOmega commented 1 year ago

I do this step same as docs:

Set up the account and get key pk.xxx and sk.xxx to prepare install lib.
I upadte podfile same as mention in this link.
run yarn add @rnmapbox/maps#main && cd ios && pod install --repo-update && cd .. or yarn add @rnmapbox/maps#main && cd ios && pod install && cd .. then react-native run-ios --simulator iPhone\ 14\ Pro\ Max and success but when run in simulator it return error as i send screenshot above.

This is podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

# platform :ios, '13.0'
$RNMapboxMapsImpl = 'mapbox'

if $RNMapboxMapsImpl == 'mapbox'
  platform :ios, '13.0'
else
  platform :ios, '12.4'
end

if $RNMapboxMapsImpl == 'maplibre'
  $RNMapboxMapsSwiftPackageManager = {
    url: "https://github.com/maplibre/maplibre-gl-native-distribution",
    requirement: {
      kind: "upToNextMajorVersion",
      minimumVersion: "5.12.1"
    },
    product_name: "Mapbox"
  }
end

target 'xxx' do
  ... some code pod here
  pre_install do |installer|
    $RNMapboxMaps.pre_install(installer)
  end

  post_install do |installer|
    $RNMapboxMaps.post_install(installer)
  end

  ... some code pod here

end

target 'xxx2' do
  ... some code pod here
end

i use that lib for integrate AWS map to react native. Thanks

KiwiKilian commented 1 year ago

As mentioned before, optimal would be a minimal reproducable example (complete RN setup, just without your secrets...) in a repository, which can be cloned and the error is reproducable.

xotahal commented 1 year ago

I have a few problems with typescript as well.

1. Using const enum

In my tsconfig is "isolatedModules": true which is not compatible with const enums. See: https://www.typescriptlang.org/tsconfig#references-to-const-enum-members. I don't know what is a reason of using const enum in the codebase, but we should maybe consider removing that. https://github.com/rnmapbox/maps/blob/e7121889255463f4dfeb01dc1cd43b8d0f622a6f/javascript/components/Camera.tsx#L17

2. Using inline types

~~These inline types (such as import { type Something } from ‘somewhere’) seem to be not supported by RN metro yet.~~

~~You can see babel add support in this version - 7.16.0 Released: ESLint 8 and TypeScript 4.5 · Babel. But the latest metro is on 7.14 (metro/package.json at v0.73.4 · facebook/metro · GitHub)~~

~~At least I am not getting babel version higher than 7.16.~~

~~If I change imports to import type { Something } from ‘.... it works fine. I also managed to solve it by adding @babel/core: ^7.x.x to resolutions in pacakge.json.~~

~~If anyone knows how I can solve this on my end, let me know please :)~~

I had version of babel set to 7.12.9 (not ^7.12.9). Updated to ^7.x.x and not getting this issue anymore. Check you babel/core versions. (yarn why @babel/core) Lot of packages getting different versions. I ran yarn dedupe to get them aligned.

3. This one React.PureComponent,

~~I am getting this one as well. But not sure why yet.~~

This was also gone after babel/core package fix. After yarn dedupe

mfazekas commented 1 year ago

I have a few problems with typescript as well.

1. Using const enum

In my tsconfig is "isolatedModules": true which is not compatible with const enums. See: https://www.typescriptlang.org/tsconfig#references-to-const-enum-members. I don't know what is a reason of using const enum in the codebase, but we should maybe consider removing that.

https://github.com/rnmapbox/maps/blob/e7121889255463f4dfeb01dc1cd43b8d0f622a6f/javascript/components/Camera.tsx#L17

Thanks for looking into it. I don't think that const enum is a must have for us. Pls submit a PR.

xotahal commented 1 year ago

Here you have it 👍 Thanks for maintaining this repo 🙏 https://github.com/rnmapbox/maps/pull/2438

mfazekas commented 1 year ago

Closing, as my understanding is that recent version of babel should fix this issue. Let me know if it isn't.

MinhOmega commented 1 year ago

Hi @xotahal , Thanks for your support here, but when i change package babel/core without ^ and it show new error @@. I think it related to version RN i have upgrade. From 0.64.2 to 0.68.2.

xotahal commented 1 year ago

Try to change it to ^7.x.x. And make sure you getting all versions higher than 7.16. You can check this by running yarn why @babel/core. Many packages fetches the @babel/core. Also run yarn dedupe to get rid of versions you don't need. Hope it helps ;)

MinhOmega commented 1 year ago

Hi @xotahal , Thanks for support me. I have downgrade to version "@react-native-mapbox-gl/maps": "^8.5.0", and it working now @@.

veb-ioki commented 1 year ago

Chiming in, as we were facing similar SyntaxErrors when bundling for iOS and Android with the following babel > 7x-x.x dependencies and babel.config:

package.json

    "@rnmapbox/maps": "10.0.0-beta.59",
    ...
    "react-native": "0.68.5", 
    ...
    "@babel/core": "7.12.9",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/runtime": "7.12.5",
    ...
  "metro-react-native-babel-preset": "0.67.0",
   ...

presets in babel.config:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  ...
};

Error examples:

What was evidently missing was to add @babel/preset-typescript to the dependencies and to the presets in babel.config as done in the rn-mapbox/example with this commit:

Our presets in babel.config now:

module.exports = {
  presets: [
    '@babel/preset-typescript',
    'module:metro-react-native-babel-preset',
  ],
  ...
};

And the relevant package.json (other versions also as in rn-mapbox/example):

    "@rnmapbox/maps": "10.0.0-beta.59",
    ...
    "react-native": "0.68.5", 
    ...
    "@babel/core": "7.19.1",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/preset-typescript": "^7.12.17",
    "@babel/runtime": "7.12.5",
    ...
    "metro-react-native-babel-preset": "0.71.1",
   ...

✅ no more SyntaxErrors, the app now compiles on iOS and Android

rnmapbox / maps