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

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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 26 (5 by maintainers)

Most upvoted comments

@BubbleTrouble14 @mfazekas @mvniekerk

Updated to latest (4.8.4), same problem.

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

Screen Shot 2022-10-04 at 10 37 20 AM

to

Screen Shot 2022-10-04 at 10 37 23 AM

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

+3
allthetime on Oct 4, 2022

@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
+2
jrobber on Oct 25, 2022

@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?

+1
Stophface on May 6, 2023

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

+1
KiwiKilian on Oct 5, 2022

@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.

+1
allthetime on Oct 4, 2022
Read more comments on GitHub
← maps: [Bug]: `onPress` not working on Touchable Child component of MarkerView [iOS]
maps: [Bug]: UserLocation doesn't work with other GeoLocation Services (Android) →