@react-native/typescript-config causes type check error for dependencies

[zcmgyu]

Description

1. Background: I recently migrated my react-native project from version 0.72.4 to 0.74.0.
2. Tsconfig Update: As part of the migration, I changed the tsconfig extends property from @tsconfig/react-native/tsconfig.json to @react-native/typescript-config/tsconfig.json.
3. Type Check Error: Upon running yarn tsc --noEmit, I encountered type check errors related to the reactotron-mst library.
4. Observation: Interestingly, when I disabled "customConditions": ["react-native"] in my tsconfig.json, all the errors disappeared.

Steps to reproduce

1. Run yarn install
2. Run yarn tsc --noEmit
3. Check the type check error
4. Enable "customConditions": null in tsconfig.json
5. Run yarn tsc --noEmit
6. All error disappered

React Native Version

0.73.7

Affected Platforms

Build - MacOS

Output of npx react-native info

System:
  OS: macOS 14.3
  CPU: (11) arm64 Apple M3 Pro
  Memory: 83.73 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.6.1
    path: ~/.nvm/versions/node/v21.6.1/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v21.6.1/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v21.6.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/hc794/.gem/ruby/3.3.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.2
    path: /opt/homebrew/opt/openjdk/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/hc794/.rubies/ruby-3.3.0/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.7
    wanted: 0.73.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

node_modules/reactotron-core-client/src/client-options.ts:2:27 - error TS7016: Could not find a declaration file for module 'ws'. '/Users/hc794/Documents/WorkingSpace/Arrangility/research/reproducer-type-check/ReproducerApp/node_modules/ws/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ws` if it exists or add a new declaration (.d.ts) file containing `declare module 'ws';`

2 import NodeWebSocket from "ws"
                            ~~~~

node_modules/reactotron-core-client/src/plugins/benchmark.ts:10:11 - error TS7034: Variable 'steps' implicitly has type 'any[]' in some locations where its type cannot be determined.

10     const steps = []
             ~~~~~

node_modules/reactotron-core-client/src/plugins/benchmark.ts:13:54 - error TS7005: Variable 'steps' implicitly has an 'any[]' type.

13       const previousTime = steps.length === 0 ? 0 : (steps[steps.length - 1] as any).time
                                                        ~~~~~

node_modules/reactotron-core-client/src/plugins/benchmark.ts:20:52 - error TS7005: Variable 'steps' implicitly has an 'any[]' type.

20       reactotron.send("benchmark.report", { title, steps })
                                                      ~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:1:23 - error TS7016: Could not find a declaration file for module 'ws'. '/Users/hc794/Documents/WorkingSpace/Arrangility/research/reproducer-type-check/ReproducerApp/node_modules/ws/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ws` if it exists or add a new declaration (.d.ts) file containing `declare module 'ws';`

1 import WebSocket from "ws"
                        ~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:104:55 - error TS2344: Type 'CustomCommandArg[] | undefined' does not satisfy the constraint 'CustomCommandArg[]'.
  Type 'undefined' is not assignable to type 'CustomCommandArg[]'.

104   onCustomCommand: <Args extends CustomCommandArg[] = CustomCommand["args"]>(
                                                          ~~~~~~~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:166:3 - error TS2416: Property 'options' in type 'ReactotronImpl' is not assignable to the same property in base type 'ReactotronCore'.
  Type 'ClientOptions<ReactotronCore>' is not assignable to type 'ClientOptions<this>'.
    Type 'this' is not assignable to type 'ReactotronCore'.
      Type 'ReactotronImpl' is not assignable to type 'ReactotronCore'.
        Types of property 'plugins' are incompatible.
          Type 'Plugin<this>[]' is not assignable to type 'Plugin<ReactotronCore>[]'.
            Type 'Plugin<this>' is not assignable to type 'Plugin<ReactotronCore>'.
              Type 'ReactotronCore' is not assignable to type 'this'.
                'this' could be instantiated with an arbitrary type which could be unrelated to 'ReactotronCore'.

166   options: ClientOptions<ReactotronCore>
      ~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:166:3 - error TS2564: Property 'options' has no initializer and is not definitely assigned in the constructor.

166   options: ClientOptions<ReactotronCore>
      ~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:224:9 - error TS2322: Type 'null' is not assignable to type '((path: string) => WebSocket) | ((path: string) => NodeWebSocket) | undefined'.

224         createSocket: null,
            ~~~~~~~~~~~~

  node_modules/reactotron-core-client/src/client-options.ts:16:3
    16   createSocket?: ((path: string) => BrowserWebSocket) | ((path: string) => NodeWebSocket)
         ~~~~~~~~~~~~
    The expected type comes from property 'createSocket' which is declared here on type 'ClientOptions<ReactotronCore>'

node_modules/reactotron-core-client/src/reactotron-core-client.ts:243:52 - error TS2345: Argument of type 'PluginCreator<ReactotronCore>' is not assignable to parameter of type 'PluginCreator<this>'.
  Type 'this' is not assignable to type 'ReactotronCore'.

243       this.options.plugins.forEach((p) => this.use(p))
                                                       ~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:246:58 - error TS2344: Type 'PluginCreator<this>[] | undefined' does not satisfy the constraint 'PluginCreator<this>[]'.
  Type 'undefined' is not assignable to type 'PluginCreator<this>[]'.

246     return this as this & InferFeaturesFromPlugins<this, ClientOptions<this>["plugins"]>
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:273:20 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

273     const socket = createSocket(`${protocol}://${host}:${port}`)
                       ~~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:273:20 - error TS18048: 'createSocket' is possibly 'undefined'.

273     const socket = createSocket(`${protocol}://${host}:${port}`)
                       ~~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:285:26 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

285       getClientIdPromise(name).then((clientId) => {
                             ~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:367:27 - error TS7006: Parameter 'evt' implicitly has an 'any' type.

367       socket.onmessage = (evt) => onMessage(evt.data)
                              ~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:464:33 - error TS18048: 'plugin.features' is possibly 'undefined'.

464         const featureFunction = plugin.features[key]
                                    ~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:477:9 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ReactotronImpl'.
  No index signature with a parameter of type 'string' was found on type 'ReactotronImpl'.

477         this[key] = featureFunction
            ~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:503:7 - error TS2322: Type '(() => void) | undefined' is not assignable to type '() => void'.
  Type 'undefined' is not assignable to type '() => void'.

503       handler = optHandler
          ~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:508:7 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

508       title = config.title
          ~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:509:7 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

509       description = config.description
          ~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:510:7 - error TS2322: Type 'CustomCommandArg[] | undefined' is not assignable to type 'CustomCommandArg[]'.
  Type 'undefined' is not assignable to type 'CustomCommandArg[]'.

510       args = config.args
          ~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:537:9 - error TS2454: Variable 'args' is used before being assigned.

537     if (args) {
            ~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:538:13 - error TS7034: Variable 'argNames' implicitly has type 'any[]' in some locations where its type cannot be determined.

538       const argNames = []
                ~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:545:13 - error TS7005: Variable 'argNames' implicitly has an 'any[]' type.

545         if (argNames.indexOf(arg.name) > -1) {
                ~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:560:7 - error TS2454: Variable 'title' is used before being assigned.

560       title,
          ~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:561:7 - error TS2454: Variable 'description' is used before being assigned.

561       description,
          ~~~~~~~~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:562:7 - error TS2454: Variable 'args' is used before being assigned.

562       args,
          ~~~~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:595:27 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'ClientOptions<ReactotronImpl>'.

595   return client.configure(options as unknown) as unknown as Client
                              ~~~~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/serialize.ts:52:20 - error TS7006: Parameter 'source' implicitly has an 'any' type.

52 function serialize(source, proxyHack = false) {
                      ~~~~~~

node_modules/reactotron-core-client/src/serialize.ts:53:9 - error TS7034: Variable 'stack' implicitly has type 'any[]' in some locations where its type cannot be determined.

53   const stack = []
           ~~~~~

node_modules/reactotron-core-client/src/serialize.ts:54:9 - error TS7034: Variable 'keys' implicitly has type 'any[]' in some locations where its type cannot be determined.

54   const keys = []
           ~~~~

node_modules/reactotron-core-client/src/serialize.ts:62:23 - error TS7006: Parameter 'replacer' implicitly has an 'any' type.

62   function serializer(replacer) {
                         ~~~~~~~~

node_modules/reactotron-core-client/src/serialize.ts:63:33 - error TS7006: Parameter 'key' implicitly has an 'any' type.

63     return function (this: any, key, value) {
                                   ~~~

node_modules/reactotron-core-client/src/serialize.ts:63:38 - error TS7006: Parameter 'value' implicitly has an 'any' type.

63     return function (this: any, key, value) {
                                        ~~~~~

node_modules/reactotron-core-client/src/serialize.ts:105:25 - error TS7005: Variable 'stack' implicitly has an 'any[]' type.

105         const thisPos = stack.indexOf(this)
                            ~~~~~

node_modules/reactotron-core-client/src/serialize.ts:106:20 - error TS7005: Variable 'stack' implicitly has an 'any[]' type.

106         ~thisPos ? stack.splice(thisPos + 1) : stack.push(this)
                       ~~~~~

node_modules/reactotron-core-client/src/serialize.ts:107:20 - error TS7005: Variable 'keys' implicitly has an 'any[]' type.

107         ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key)
                       ~~~~

node_modules/reactotron-core-client/src/serialize.ts:108:14 - error TS7005: Variable 'stack' implicitly has an 'any[]' type.

108         if (~stack.indexOf(value)) value = CIRCULAR
                 ~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:18:10 - error TS2304: Cannot find name 'window'.

18   typeof window !== "undefined" &&
            ~~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:19:3 - error TS2304: Cannot find name 'window'.

19   window &&
     ~~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:20:4 - error TS2304: Cannot find name 'window'.

20   (window.performance || (window as any).msPerformance || (window as any).webkitPerformance)
      ~~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:20:27 - error TS2304: Cannot find name 'window'.

20   (window.performance || (window as any).msPerformance || (window as any).webkitPerformance)
                             ~~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:20:60 - error TS2304: Cannot find name 'window'.

20   (window.performance || (window as any).msPerformance || (window as any).webkitPerformance)
                                                              ~~~~~~

node_modules/reactotron-core-client/src/stopwatch.ts:30:24 - error TS7053: Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Number'.
  Property '1' does not exist on type 'Number'.

30   delta = (started) => performanceNow(started)[1] / 1000000
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/validate.ts:8:48 - error TS2322: Type 'string | boolean' is not assignable to type 'boolean'.
  Type 'string' is not assignable to type 'boolean'.

8 const isHostValid = (host: string): boolean => typeof host === "string" && host && host !== ""
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/reactotron-core-client/src/validate.ts:24:20 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

24   if (!isHostValid(host)) {
                      ~~~~

node_modules/reactotron-core-client/src/validate.ts:28:20 - error TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

28   if (!isPortValid(port)) {
                      ~~~~

node_modules/reactotron-core-client/src/validate.ts:32:23 - error TS2345: Argument of type '((command: any) => void) | undefined' is not assignable to parameter of type '(cmd: string) => any'.
  Type 'undefined' is not assignable to type '(cmd: string) => any'.

32   if (!onCommandValid(onCommand)) {
                         ~~~~~~~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:53:8 - error TS7016: Could not find a declaration file for module 'ramda'. '/Users/hc794/Documents/WorkingSpace/Arrangility/research/reproducer-type-check/ReproducerApp/node_modules/ramda/es/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ramda` if it exists or add a new declaration (.d.ts) file containing `declare module 'ramda';`

53 } from "ramda"
          ~~~~~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:85:15 - error TS18047: 'value' is possibly 'null'.

85     "name" in value &&
                 ~~~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:143:5 - error TS2775: Assertions require every name in the call target to be declared with an explicit type annotation.

143     assertHasStateResponsePlugin(reactotron)
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/reactotron-core-client/src/plugins/state-responses.ts:63:14
    63 export const assertHasStateResponsePlugin = (
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'assertHasStateResponsePlugin' needs an explicit type annotation.

node_modules/reactotron-mst/src/reactotron-mst.ts:395:13 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'string'.

395             null,
                ~~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:396:30 - error TS7006: Parameter 's' implicitly has an 'any' type.

396             keys(state).map((s) => s.toString())
                                 ~

node_modules/reactotron-mst/src/reactotron-mst.ts:421:38 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'string'.

421           client.stateValuesResponse(null, state)
                                         ~~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:444:20 - error TS7006: Parameter 'key' implicitly has an 'any' type.

444               map((key) => `${keyMinusWildcard}.${key}`)
                       ~~~

node_modules/reactotron-mst/src/reactotron-mst.ts:480:23 - error TS7053: Element implicitly has an 'any' type because expression of type 'CommandTypeKey' can't be used to index type '{ "state.backup.request": (command: Command<"state.backup.request", StateBackupRequestPayload>) => void; "state.restore.request": (command: Command<"state.restore.request", StateRestoreRequestPayload>) => void; "state.action.dispatch": (command: Command<...>) => void; "state.values.subscribe": (command: Command<...>...'.
  Property 'api.response' does not exist on type '{ "state.backup.request": (command: Command<"state.backup.request", StateBackupRequestPayload>) => void; "state.restore.request": (command: Command<"state.restore.request", StateRestoreRequestPayload>) => void; "state.action.dispatch": (command: Command<...>) => void; "state.values.subscribe": (command: Command<...>...'.

480       const handler = COMMAND_MAP[command && command.type]
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 56 errors in 7 files.

Errors  Files
     1  node_modules/reactotron-core-client/src/client-options.ts:2
     3  node_modules/reactotron-core-client/src/plugins/benchmark.ts:10
    24  node_modules/reactotron-core-client/src/reactotron-core-client.ts:1
    10  node_modules/reactotron-core-client/src/serialize.ts:52
     6  node_modules/reactotron-core-client/src/stopwatch.ts:18
     4  node_modules/reactotron-core-client/src/validate.ts:8
     8  node_modules/reactotron-mst/src/reactotron-mst.ts:53
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproducer

https://github.com/zcmgyu/reproducer-type-check/

Screenshots and Videos

No response

[NickGerleman]

reactotron-core-client is publishing a "react-native" export field for React Native to resolve that does not correctly typecheck. @zcmgyu please create an issue in that repo. https://github.com/infinitered/reactotron/issues