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

[KiwiKilian]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

@rnmapbox/maps version

10.0.0-beta.56

Standalone component to reproduce

npx tsc --version 
Version 4.8.4

 npx tsc --noemit
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; } | undefined; style?: undefined; }>'.
  Type 'ComponentClass<any, any>' is not assignable to type 'HostComponent<{ reactStyle?: { [key: string]: StyleValue; } | undefined; style?: undefined; }>'.
    Type 'Component<any, any, any>' is not assignable to type 'Component<{ reactStyle?: { [key: string]: StyleValue; } | undefined; 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/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: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 =
          ~~~~~~~~~~~~~~~~~


Found 4 errors in 4 files.

Errors  Files
     1  node_modules/@rnmapbox/maps/javascript/components/Atmosphere.tsx:25
     1  node_modules/@rnmapbox/maps/javascript/components/MarkerView.tsx:149
     1  node_modules/@rnmapbox/maps/javascript/components/PointAnnotation.tsx:229
     1  node_modules/@rnmapbox/maps/javascript/components/ShapeSource.tsx:411

Observed behavior and steps to reproduce

I once again see TypeScript errors after I upgraded to Expo SDK 47 and Node 18. I yet didn't find the actual reason as tsconfig.json seems to stay the same aswell as my TypeScript version.

Expected behavior

No response

Notes / preliminary analysis

Is the /javascript directory actually meant to be shipped? Isn't the stuff in /lib enough?

Additional links and references

See also #2264 and #2333.

[mfazekas]

@KiwiKilian can you reproduce in a new expo project as well?!

Maybe we should be using the types key in package.json with something like this:

"types": "lib/typescript/index.d.ts",

Is the /javascript directory actually meant to be shipped? Isn't the stuff in /lib enough?

We're using the config suggested by react-native builder bob - https://github.com/callstack/react-native-builder-bob#manual-configuration

It's usually good to point to your source code with the react-native field to make debugging easier. Metro already supports compiling a lot of new syntaxes including JSX, Flow and TypeScript and it will use this field if present.

It's the same stuff used by react-native-reanimated and native-base for example
https://github.com/software-mansion/react-native-reanimated/blob/0d1cf52a5fb7ebdf5f6ab2d46a86e338473abe6e/package.json#L32
https://github.com/GeekyAnts/NativeBase/blob/master/package.json#L45

[KiwiKilian]

I might have the time to create a minimal example tomorrow. Maybe would helpful to have a Expo example after all.

[Andarius]

I have the same issue without using expo.
FYI, I created a project recently using react-native-builder-bob and here is the configuration

  "main": "lib/commonjs/index",
  "module": "lib/module/index",
  "types": "lib/typescript/index.d.ts",
  "react-native": "src/index",
  "source": "src/index",

[KiwiKilian]

Im puzzled, can't yet reproduce in a new Expo project... Might have to investigate further.

Which would be the correct main type file? Isn't it still /index.d.ts (has nearly all of the types) or really lib/typescript/index.d.ts?

[KiwiKilian]

@Andarius maybe you want to also try my fix in #2418 – simply change your version of @rnmapbox/maps in the package.json to github:trafficon/rnmapbox-maps#feature/require-native-component-type and check if the linting errors are also fixed for you.

Sadly I wasn't able to create a reproduction...

[Andarius]

Hey @KiwiKilian, thanks for the fix! It works perfectly!

[KiwiKilian]

Ok, then I hope to we get #2418 merged and the next beta should be fine to use again.