Bunch of TS errors from reactotron-core-client in a fresh project

[EdwardDrapkin]

tsconfig:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "src",
    "rootDir": ".",
    "strict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "pretty": true,
    "allowImportingTsExtensions": false,
    "allowJs": false,
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "useUnknownInCatchVariables": true,
    "noEmit": true,
    "module": "ES2022",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
  },
  "exclude": [
    "node_modules/**/*",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js",
    "eslint.config.js",
    "config/**/*"
  ]
}

Include location:

import Reactotron from 'reactotron-react-native';

export const reactotron = Reactotron.configure({
  name: 'Mobile',
}) // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect(); // let's connect!

tsc output:

/node_modules/.bin/tsc
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: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:176:3 - error TS2322: Type 'null' is not assignable to type 'WebSocket'.

176   socket: WebSocket = null
      ~~~~~~

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) => WebSocket) | 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:300:28 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'BufferLike'.
  Type 'undefined' is not assignable to type 'BufferLike'.

300           this.socket.send(h)
                               ~

node_modules/reactotron-core-client/src/reactotron-core-client.ts:355:27 - error TS2774: This condition will always return true since this function is always defined. Did you mean to call it instead?

355     if ("on" in socket && socket.on) {
                              ~~~~~~~~~

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:37:20 - error TS7006: Parameter 'source' implicitly has an 'any' type.

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

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

38   const stack = []
           ~~~~~

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

39   const keys = []
           ~~~~

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

47   function serializer(replacer) {
                         ~~~~~~~~

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

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

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

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

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

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

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

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

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

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

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

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

node_modules/reactotron-core-client/src/stopwatch.ts:14:32 - error TS6133: 'started' is declared but its value is never read.

14 const defaultPerformanceNow = (started?: number) => Date.now()
                                  ~~~~~~~

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)) {
                         ~~~~~~~~~


Found 49 errors in 5 files.

Errors  Files
     3  node_modules/reactotron-core-client/src/plugins/benchmark.ts:10
    25  node_modules/reactotron-core-client/src/reactotron-core-client.ts:104
    10  node_modules/reactotron-core-client/src/serialize.ts:37
     7  node_modules/reactotron-core-client/src/stopwatch.ts:14
     4  node_modules/reactotron-core-client/src/validate.ts:8
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[WookieFPV]

The reason is that react-native is using the untranspiled typescript files from node_modules/reactotron-core-client/src/.
That way you get every ts error from that code.

A workaround from user side is to use the transpiled js & .d.ts files, that way ts can ignore those error:

diff --git a/node_modules/reactotron-core-client/package.json b/node_modules/reactotron-core-client/package.json
index 92c5d75..a19bd44 100644
--- a/node_modules/reactotron-core-client/package.json
+++ b/node_modules/reactotron-core-client/package.json
@@ -19,7 +19,7 @@
   "react-native": "src/index.ts",
   "exports": {
     "import": "./dist/index.esm.js",
-    "react-native": "./src/index.ts",
+    "react-native": "./dist/index.js",
     "types": "./dist/types/src/index.d.ts",
     "default": "./dist/index.js"
   },

(this is for RN73, if you are on older version you have to change the other "react-native" entry)

[hr100d]

Jest is failing with the tests and i believe its due to the same issue. The suggestion of @WookieFPV haven't solved it for me:

[Tickaren]

I have the same problem and the solutions above is not working... Any update?

[crutchcorn]

This PR should solve these problems:

#1466

[hristo87]

Well, once you merge it, i will let you know :)

[marcusnunes89]

Any updates?

[mVitoros]

are there any updates on this one?

[Lakston]

just had this problem happen today as I tried reactotron for the forst time, uninstalling for now.

[Splanis]

any updates?

[tr3v3r]

As a temp solution I changed from import to require and TS stops checking the package:

before

import Reactotron, { networking } from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'

after

const { reactotronRedux } = require('reactotron-redux')

const Reactotron = require('reactotron-react-native').default
const { networking } = require('reactotron-react-native')

[mbalazy]

As a temp solution I changed from import to require and TS stops checking the package:

before

import Reactotron, { networking } from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'

after

const { reactotronRedux } = require('reactotron-redux')

const Reactotron = require('reactotron-react-native').default
const { networking } = require('reactotron-react-native')

it helped, thanks!

[tibbe]

As a temp solution I changed from import to require and TS stops checking the package:

before

import Reactotron, { networking } from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'

after

const { reactotronRedux } = require('reactotron-redux')

const Reactotron = require('reactotron-react-native').default
const { networking } = require('reactotron-react-native')

In my case this unfortunately doesn't work (at least in a Jest test):

import reactotron from "./reactotron-react-native"
^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | // https://github.com/infinitered/reactotron/issues/1483
      3 | // https://github.com/infinitered/reactotron/issues/1430#issuecomment-2180872830
    > 4 | const Reactotron = require('reactotron-react-native').default;
        |                                                              ^
      5 | const {networking} = require('reactotron-react-native');
      6 |
      7 | Reactotron.configure({}).use(networking()).useReactNative().connect();

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (ReactotronConfig.js:4:62)
      at Object.require (App.tsx:6:3)
      at Object.require (App.test.tsx:14:1)