[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) #2264

mvniekerk · 2022-10-01T14:04:33Z

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

`@rnmapbox/maps` version

#main

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
 PointAnnotation,
 ShapeSource
} 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

It doesn't compile because the files aren't Typescript.

Expected behavior

It compiles

Notes / preliminary analysis

Provided Typescript files are not compiling

Additional links and references

None

The text was updated successfully, but these errors were encountered:

mvniekerk · 2022-10-01T14:10:16Z

Last compiling version was 10 beta 39

mfazekas · 2022-10-01T15:54:06Z

@mvniekerk can you please also add the error you're seeing

mfazekas · 2022-10-01T18:45:16Z

For me this compiles:

import { Geometry } from 'geojson';

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

Full sample:

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

const aLine: Geometry = {
  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>
    );
  }
}

ronickg · 2022-10-02T16:06:05Z

I get this error: SyntaxError: C:\Users\ronal\Documents\Programming\react-native\MobilizeReporting\node_modules@rnmapbox\maps\javascript\components\PointAnnotation.tsx: Unexpected token (122:43)

120 | */
121 | class PointAnnotation extends NativeBridgeComponent(

122 | React.PureComponent,
| ^
123 | NATIVE_MODULE_NAME,
124 | ) {
125 | static defaultProps = {

mvniekerk · 2022-10-02T16:07:49Z

Sorry for the late reply @mfazekas , but what @BubbleTrouble14 has commented here #2264 (comment)

mfazekas · 2022-10-02T19:54:08Z

@mvniekerk @BubbleTrouble14 and what is the command you're running?!

ronickg · 2022-10-02T20:04:50Z

I just start the app and get the error, after removing all imports from mapbox it works.

mvniekerk · 2022-10-02T20:07:22Z

If you open the TSX files in Intellij it even errors out there as well. It breaks at compiler level - the files aren't valid Typescript. Groete / Best regards Michael van Niekerk

…

________________________________ Van: Ronald Goedeke ***@***.***> Gestuur: Sunday, October 2, 2022 10:05:00 PM aan: rnmapbox/maps ***@***.***> Aa: Michael van Niekerk ***@***.***>; Mention ***@***.***> onderwerp: Re: [rnmapbox/maps] [Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) (Issue #2264) I just start the app and get the error, after removing all imports from mapbox it works. — Reply to this email directly, view it on GitHub<#2264 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAL7O74AECQULSXOTXKOG6TWBHTGZANCNFSM6AAAAAAQ2O2ZPU>. You are receiving this because you were mentioned.Message ID: ***@***.***>

mfazekas · 2022-10-03T16:07:20Z

Sorry not enough detail to reproduce

allthetime · 2022-10-04T16:38:42Z

@mfazekas

Having the same issue. I just upgraded my packages from an old mapbox-gl version where everything in my app was running fine. Now I get this error upon opening the app. I removed all Mapbox components but kept the import and am still getting the error.

SyntaxError: ....../app/node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx: Unexpected token (158:36)

  156 |  */
  157 | export class ShapeSource extends NativeBridgeComponent(
> 158 |   AbstractSource<Props, NativeProps>,
      |                                     ^
  159 |   NATIVE_MODULE_NAME,
  160 | ) {
  161 |   static NATIVE_ASSETS_KEY = 'assets';

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main

This is an error in library code, not my code.

mvniekerk · 2022-10-04T16:40:41Z

You have the files that is failing and you have tsc, why close the ticket @mfazekas?

ronickg · 2022-10-04T16:41:15Z

Yes exactly the same for me. I created whole new project from scratch to test if I can get it to work. Works fine. But still havent figured out where the difference is to my existing project to fix the problem. Deleted node modules, cleaned project, rebuilt...

ronickg · 2022-10-04T16:52:19Z

I'll give it a go, thx.

mfazekas · 2022-10-04T16:56:29Z

@BubbleTrouble14 maybe you have and old typescript version in your project, can you tell me which typescript are you using from the pacakge-lock or yarn.lock file?!

allthetime · 2022-10-04T17:01:19Z

@mfazekas what version should we be on for it to work?

My yarn.lock says

version "4.6.4"

ronickg · 2022-10-04T17:04:43Z

Found it. Says: "version": "4.6.4"

allthetime · 2022-10-04T17:38:45Z

@BubbleTrouble14 @mfazekas @mvniekerk

Updated to latest (4.8.4), same problem.

Removing type annotations from PointAnnotation and ShapeSource like this fixed it for me:

to

My app now runs.

This is obviously a temporary fix though, would like to figure out what's wrong. I'm on a slightly old RN version:

0.68.2

KiwiKilian · 2022-10-05T11:43:18Z

@allthetime did you check you are actually using 4.8.4 after your upgrade? Try running npx tsc --version. Our project uses [email protected], only if I downgrade to 4.6.4 I can reproduce you problem.

jrobber · 2022-10-25T21:08:00Z

@KiwiKilian I'm not who you referenced, but here is a log after updating from v8 to v10 of my app:

❯ pnpm tsc --version
Version 4.8.4
❯ pnpm tsc
node_modules/@rnmapbox/maps/javascript/components/AbstractLayer.tsx:51:3 - error TS7030: Not all code paths return a value.

51   getStyleTypeFormatter(styleType: string) {
     ~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/Atmosphere.tsx:25:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'HostComponent<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<{ reactStyle?: { [key: string]: StyleValue; }; style?: undefined; }, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

25 const RCTMGLAtmosphere: HostComponent<{
         ~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/Camera.tsx:237:9 - error TS6133: 'triggerKey' is declared but its value is never read.

237         triggerKey,
            ~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/MarkerView.tsx:149:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'HostComponent<NativeProps>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativeProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativeProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

149 const RCTMGLMarkerView: HostComponent<NativeProps> =
          ~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/PointAnnotation.tsx:229:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'NativePointAnnotation'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativePointAnnotationProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativePointAnnotationProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is missing the following properties from type 'Readonly<NativeMethods>': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.

229 const RCTMGLPointAnnotation: NativePointAnnotation =
          ~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:333:7 - error TS7030: Not all code paths return a value.

333       return;
          ~~~~~~~

node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:411:7 - error TS2322: Type 'ComponentType<any>' is not assignable to type 'NativeShapeSource'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<NativeProps>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<NativeProps, {}, any> & Readonly<NativeMethods>'.
      Type 'Component<any, any, any>' is not assignable to type 'Readonly<NativeMethods>'.

411 const RCTMGLShapeSource: NativeShapeSource =
          ~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/requestAndroidLocationPermissions.ts:1:1 - error TS6133: 'number' is declared but its value is never read.

1 import { number } from 'prop-types';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:140:6 - error TS6196: 'FillTranslateAnchorEnum' is declared but never used.

140 enum FillTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:146:6 - error TS6196: 'FillTranslateAnchorEnumValues' is declared but never used.

146 type FillTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:165:6 - error TS6196: 'LineTranslateAnchorEnum' is declared but never used.

165 enum LineTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:171:6 - error TS6196: 'LineTranslateAnchorEnumValues' is declared but never used.

171 type LineTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:354:6 - error TS6196: 'IconTranslateAnchorEnum' is declared but never used.

354 enum IconTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:360:6 - error TS6196: 'IconTranslateAnchorEnumValues' is declared but never used.

360 type IconTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:361:6 - error TS6196: 'TextTranslateAnchorEnum' is declared but never used.

361 enum TextTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:367:6 - error TS6196: 'TextTranslateAnchorEnumValues' is declared but never used.

367 type TextTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:368:6 - error TS6196: 'CircleTranslateAnchorEnum' is declared but never used.

368 enum CircleTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:374:6 - error TS6196: 'CircleTranslateAnchorEnumValues' is declared but never used.

374 type CircleTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:389:6 - error TS6196: 'FillExtrusionTranslateAnchorEnum' is declared but never used.

389 enum FillExtrusionTranslateAnchorEnum {
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:395:6 - error TS6196: 'FillExtrusionTranslateAnchorEnumValues' is declared but never used.

395 type FillExtrusionTranslateAnchorEnumValues = 'map' | 'viewport';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:3:3 - error TS6133: 'ImageResolvedAssetSource' is declared but its value is never read.

3   ImageResolvedAssetSource,
    ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:5:3 - error TS6133: 'ProcessedColorValue' is declared but its value is never read.

5   ProcessedColorValue,
    ~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:24:5 - error TS7030: Not all code paths return a value.

24     return;
       ~~~~~~~


Found 23 errors in 9 files.

Errors  Files
     1  node_modules/@rnmapbox/maps/javascript/components/AbstractLayer.tsx:51
     1  node_modules/@rnmapbox/maps/javascript/components/Atmosphere.tsx:25
     1  node_modules/@rnmapbox/maps/javascript/components/Camera.tsx:237
     1  node_modules/@rnmapbox/maps/javascript/components/MarkerView.tsx:149
     1  node_modules/@rnmapbox/maps/javascript/components/PointAnnotation.tsx:229
     2  node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:333
     1  node_modules/@rnmapbox/maps/javascript/requestAndroidLocationPermissions.ts:1
    12  node_modules/@rnmapbox/maps/javascript/utils/MapboxStyles.ts:140
     3  node_modules/@rnmapbox/maps/javascript/utils/StyleValue.ts:3

huszzsolt · 2022-12-23T13:00:08Z

We are getting the same error.

I wonder it is because we are on a newer react:
"react": "18.1.0",
( "react-native": "0.70.6",)

Problem is present in the latest: "@rnmapbox/maps": "v10.0.0-beta.61",

but works if I downgrade to "@rnmapbox/maps": "v10.0.0-beta.28"

allthetime · 2022-12-23T18:26:38Z

@huszzsolt as a short term fix I recommend self-patching and using patch-package

Remove the type annotation. There is one other file this will happen in once you fix PointAnnotation (I forget what it is)

simply remove <Props>

run npx patch-package

I was having this issue before, but am not anymore, but I'm not sure what I did. I'm using the latest version of rnmapbox/maps but I'm on a slightly older react-native 0.67.x

Also, I'm on "typescript": "^4.8.4"

Might want to check your typescript version.

chrisivo · 2023-01-05T06:44:55Z

Have managed to get @rnmapbox/[email protected] working past the Typescript errors without needing a patch. Had the correct Typescript version installed. What set alarm bells of was that that the IDE complained about errors when I made the code adjustments suggested by @allthetime, but Babel obviously couldn't translate the Typescript without the adjustments present - so something was out of sync.

Problem (I think) has been corrected by updating my @babel/core and @babel/runtime npm's to match those in the the package.json for this repo at present -

yarn upgrade @babel/[email protected]

After this, in my case, I also needed to install @babel/preset-env, as Babel reported missing required plugins on build (all present in present-env apparently).

yarn add @babel/preset-env --dev

Have different issues to deal with now, so not out the woods yet! But HTH.

/edit - best to make sure all versions of the above components are aligned, otherwise you'll get more TS compiler ball ache after deleting node_modules and reinstalling. I went with the following version numbers in the end:

    "@babel/core": "7.20.12",
    "@babel/preset-env": "7.20.2",
    "@babel/runtime": "7.20.7",

FYI the error I got second time around, resolved by fixing the version numbers, was:

error: node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx: /xxxxx/node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx: Unknown node type: "TSInstantiationExpression"

viswakarmalovekush · 2023-04-06T09:34:27Z

Hi @mfazekas what should I have to do in my case?

Stophface · 2023-05-06T09:05:07Z

@chrisivo I am freaking out here... I have been working on this for quite a while, but I cannot get it to work. I am getting the same error you mentioned

error: node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx: /xxxxx/node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx: Unknown node type: "TSInstantiationExpression"

But I cannot solve it. This are my @babel settings taken from mz projects package.json

    "@babel/core": "7.19.1",
    "@babel/plugin-proposal-decorators": "^7.17.9",
    "@babel/preset-env": "7.19.1",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "7.19.0",

This is the babel.config.js

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-typescript',
  ],
  plugins: [
    'react-native-reanimated/plugin',
    ['@babel/plugin-proposal-decorators', {legacy: true}],
  ],
};

and this is from the package.json of @rnmapbox/maps

    "@babel/core": "7.19.1",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-proposal-class-properties": "7.18.6",
    "@babel/runtime": "7.19.0",

Do you have a hint why I am still seeing this error?

RuzenDev · 2023-09-26T22:09:58Z

Me too , am having similar error but in my case its, VectorSource.tsx.

error: node_modules/@rnmapbox/maps/src/components/VectorSource.tsx: /Users/node_modules/@rnmapbox/maps/src/components/VectorSource.tsx: Unknown node type: "TSInstantiationExpression"

RuzenDev · 2023-09-28T10:13:39Z

@Stophface HI!, Did you solve it?

KiwiKilian mentioned this issue Oct 3, 2022

[Bug]: TS errors from AbstractLayer and NativeBridgeComponent #2266

Closed

mfazekas closed this as completed Oct 3, 2022

YousefED mentioned this issue Oct 26, 2022

[Bug]: Typescript errors are getting shipped #2333

Closed

KiwiKilian mentioned this issue Nov 9, 2022

[Bug]: TypeScript Linting Errors occuring again with Expo SDK 47 #2391

Closed

mfazekas mentioned this issue Apr 6, 2023

Not able to migrate form mapboxGL to rnmapbox V10 #2778

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) #2264

[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) #2264

mvniekerk commented Oct 1, 2022

mvniekerk commented Oct 1, 2022

mfazekas commented Oct 1, 2022 •

edited

Loading

mfazekas commented Oct 1, 2022

ronickg commented Oct 2, 2022

mvniekerk commented Oct 2, 2022

mfazekas commented Oct 2, 2022

ronickg commented Oct 2, 2022

mvniekerk commented Oct 2, 2022 via email

mfazekas commented Oct 3, 2022

allthetime commented Oct 4, 2022 •

edited

Loading

mvniekerk commented Oct 4, 2022

ronickg commented Oct 4, 2022

ronickg commented Oct 4, 2022

mfazekas commented Oct 4, 2022

allthetime commented Oct 4, 2022 •

edited

Loading

ronickg commented Oct 4, 2022

allthetime commented Oct 4, 2022 •

edited

Loading

KiwiKilian commented Oct 5, 2022

jrobber commented Oct 25, 2022

huszzsolt commented Dec 23, 2022 •

edited

Loading

allthetime commented Dec 23, 2022

chrisivo commented Jan 5, 2023 •

edited

Loading

viswakarmalovekush commented Apr 6, 2023

Stophface commented May 6, 2023

RuzenDev commented Sep 26, 2023

RuzenDev commented Sep 28, 2023

[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) #2264

[Bug]: Typescript conversions fails to compile (ShapeSource, PointAnnotation) #2264

Comments

mvniekerk commented Oct 1, 2022

Mapbox Implementation

Mapbox Version

Platform

@rnmapbox/maps version

Standalone component to reproduce

Observed behavior and steps to reproduce

Expected behavior

Notes / preliminary analysis

Additional links and references

mvniekerk commented Oct 1, 2022

mfazekas commented Oct 1, 2022 • edited Loading

mfazekas commented Oct 1, 2022

ronickg commented Oct 2, 2022

mvniekerk commented Oct 2, 2022

mfazekas commented Oct 2, 2022

ronickg commented Oct 2, 2022

mvniekerk commented Oct 2, 2022 via email

mfazekas commented Oct 3, 2022

allthetime commented Oct 4, 2022 • edited Loading

mvniekerk commented Oct 4, 2022

ronickg commented Oct 4, 2022

ronickg commented Oct 4, 2022

mfazekas commented Oct 4, 2022

allthetime commented Oct 4, 2022 • edited Loading

ronickg commented Oct 4, 2022

allthetime commented Oct 4, 2022 • edited Loading

KiwiKilian commented Oct 5, 2022

jrobber commented Oct 25, 2022

huszzsolt commented Dec 23, 2022 • edited Loading

allthetime commented Dec 23, 2022

chrisivo commented Jan 5, 2023 • edited Loading

viswakarmalovekush commented Apr 6, 2023

Stophface commented May 6, 2023

RuzenDev commented Sep 26, 2023

RuzenDev commented Sep 28, 2023

`@rnmapbox/maps` version

mfazekas commented Oct 1, 2022 •

edited

Loading

allthetime commented Oct 4, 2022 •

edited

Loading

allthetime commented Oct 4, 2022 •

edited

Loading

allthetime commented Oct 4, 2022 •

edited

Loading

huszzsolt commented Dec 23, 2022 •

edited

Loading

chrisivo commented Jan 5, 2023 •

edited

Loading