[Bug]: Typescript errors from node_modules/@rnmapbox

Shevchenko-Oleksii commented 1 year ago

Mapbox Implementation

Mapbox

Mapbox Version

10

Platform

iOS, Android

`@rnmapbox/maps` version

10.0.0-rc.0

`react-native` version

0.66.5

`typescript` version

4.7.4

Standalone component to reproduce

Import any component from '@rnmapbox'

import MapboxGL from '@rnmapbox/maps'

const App = () => {
...
useEffect(() => {
    MapboxGL.setAccessToken(Config.MAPBOX_ACCESS_TOKEN ?? '')
}, [])
...
}

Observed behavior and steps to reproduce

I've been upgrading mapbox from 8.0 to 10.0, which went fine, but now gives such typescript errors, excluding node_modules and using tsc with --skipLibCheck option doesn't help

On precommit hook we execute yarn tsc which fails with such errors:

node_modules/@rnmapbox/maps/src/components/HeadingIndicator.tsx:3:25 - error TS2307: Cannot find module '../assets/heading.png' or its corresponding type declarations.

3 import headingIcon from '../assets/heading.png';
                          ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/Light.tsx:41:38 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'AllLayerStyleProps | undefined'.

41           reactStyle: transformStyle(_props.style),
                                        ~~~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/MapView.tsx:13:26 - error TS7016: Could not find a declaration file for module 'debounce'. '/Users/oleksiishevchenko/dev/yalantis/maker-app/node_modules/debounce/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'debounce';`

13 import { debounce } from 'debounce';
                            ~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/MapView.tsx:340:36 - error TS2304: Cannot find name 'Location'.

340   onUserLocationUpdate?: (feature: Location) => void;
                                       ~~~~~~~~

node_modules/@rnmapbox/maps/src/components/NativeBridgeComponent.tsx:92:23 - error TS2352: Conversion of type '(value: ReturnType | PromiseLike<ReturnType>) => void' to type '(args: NativeArg) => void' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Types of parameters 'value' and 'args' are incompatible.
    Type 'NativeArg' is not comparable to type 'ReturnType | PromiseLike<ReturnType>'.
      Type 'NativeArg[]' is not comparable to type 'ReturnType | PromiseLike<ReturnType>'.
        Type 'NativeArg[]' is not comparable to type 'ReturnType'.
          'ReturnType' could be instantiated with an arbitrary type which could be unrelated to 'NativeArg[]'.

92             resolver: resolve as (args: NativeArg) => void,
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

26 const RCTMGLNativeUserLocation: HostComponent<Props> =
         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/Terrain.tsx:53: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>'.

53 const RCTMGLTerrain: HostComponent<NativeProps> =
         ~~~~~~~~~~~~~

Found 7 errors in 6 files.

Errors  Files
     1  node_modules/@rnmapbox/maps/src/components/HeadingIndicator.tsx:3
     1  node_modules/@rnmapbox/maps/src/components/Light.tsx:41
     2  node_modules/@rnmapbox/maps/src/components/MapView.tsx:13
     1  node_modules/@rnmapbox/maps/src/components/NativeBridgeComponent.tsx:92
     1  node_modules/@rnmapbox/maps/src/components/NativeUserLocation.tsx:26
     1  node_modules/@rnmapbox/maps/src/components/Terrain.tsx:53
error Command failed with exit code 2.

my tsconfig with some workarounds i've tried:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2019"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@assets": ["./src/assets"],
      "src": ["./src"],
      "@helium/crypto": ["./node_modules/@helium/crypto-react-native"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "node_modules/@rnmapbox",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Expected behavior

No typescript errors thrown from node_modules.

Notes / preliminary analysis

No response

Additional links and references

No response

mfazekas commented 1 year ago

@Shevchenko-Oleksii we're using typescript 4.9.5, can you try to upgrade to 4.8.4 or later?

Shevchenko-Oleksii commented 1 year ago

@mfazekas Thanks for such quick response, i've tried both 4.8.4 and 4.9.5, i'm getting quite less errors, but still they appear

node_modules/@rnmapbox/maps/src/components/HeadingIndicator.tsx:3:25 - error TS2307: Cannot find module '../assets/heading.png' or its corresponding type declarations.

3 import headingIcon from '../assets/heading.png';
                          ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/MapView.tsx:13:26 - error TS7016: Could not find a declaration file for module 'debounce'. '/Users/oleksiishevchenko/dev/yalantis/maker-app/node_modules/debounce/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'debounce';`

13 import { debounce } from 'debounce';
                            ~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/MapView.tsx:340:36 - error TS2304: Cannot find name 'Location'.

340   onUserLocationUpdate?: (feature: Location) => void;
                                       ~~~~~~~~

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

26 const RCTMGLNativeUserLocation: HostComponent<Props> =
         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@rnmapbox/maps/src/components/Terrain.tsx:53: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>'.

53 const RCTMGLTerrain: HostComponent<NativeProps> =
         ~~~~~~~~~~~~~

Found 5 errors in 4 files.

Errors  Files
     1  node_modules/@rnmapbox/maps/src/components/HeadingIndicator.tsx:3
     2  node_modules/@rnmapbox/maps/src/components/MapView.tsx:13
     1  node_modules/@rnmapbox/maps/src/components/NativeUserLocation.tsx:26
     1  node_modules/@rnmapbox/maps/src/components/Terrain.tsx:53
error Command failed with exit code 2.

mfazekas commented 1 year ago

@Shevchenko-Oleksii I don't really understand what's going on there.

I've created an empty rn project like this added a MapView compopnent, and ran tsc with default, and your config file, both ran just fine.

Also none of them checked node_modules/@rnmapbox/maps/src as we have our typescript definition files at node_modules/@rnmapbox/maps/lib/typescript

So if I added some ts errors to node_modules/@rnmapbox/maps/src/components/MapView.tsx none of them was complained.

npx react-native init rnrnmapboxts --version 0.71
yarn add @rnmapbox/maps
tsc --noEmit

Please try to reproduce the issue in a new project. If you can please submit instructions, if you can't please compare the project with your setup.

Shevchenko-Oleksii commented 1 year ago

@mfazekas Since i wasn't able to reproduce it on clean project as well, I have resolved that error by clearing yarn.lock, i guess that's where the conflicts were, thanks for your help.

rnmapbox / maps