Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
EdwardDrapkin opened this issue Jan 30, 2024 · 18 comments
Open

Comments

@EdwardDrapkin
Copy link

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
Copy link

WookieFPV commented Feb 15, 2024

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
Copy link

hr100d commented Feb 20, 2024

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:

SCR-20240220-ijbx

@Tickaren
Copy link

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

@crutchcorn
Copy link
Contributor

This PR should solve these problems:

#1466

@hristo87
Copy link

hristo87 commented Apr 3, 2024

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

@marcusnunes89
Copy link

Any updates?

@mVitoros
Copy link

are there any updates on this one?

@Lakston
Copy link

Lakston commented May 24, 2024

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

@Splanis
Copy link

Splanis commented Jun 11, 2024

any updates?

@tr3v3r
Copy link

tr3v3r commented Jun 20, 2024

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
Copy link

mbalazy commented Jun 21, 2024

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
Copy link

tibbe commented Aug 28, 2024

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)

@LaGregance
Copy link

Same error using the last reactotron-react-native version (5.1.9). Using require instead of import works.

@khallmark
Copy link

khallmark commented Oct 27, 2024

@twerth @jamonholmgren @markrickert This issue has been open for ten months and people still have to use a workaround. Can y'all have someone over at InfiniteRed take a look at this issue?

Duplicated by #1483, #1420 and a direct callout in the React Native main repo here.

@crutchcorn opened PR #1466 to fix it. I would fix your docs CI build if I knew what the issue was. @Bardiamist opened issue #1420 which has a patch file that fixes it. The react-native issue tells you the root cause. There is also a suboptimal workaround the community is using.

With Flipper gone, the community is relying on Reactotron. The developer experience should work with the officially supported react-native typescript configuration.

Being used by the community doesn't obligate you to implement everything we want or deeply investigate every issue. There is source code. We have a debugger. We can fork your code or implement pull requests if we really want to.

What we can't do is merge fixes to the basic package configuration into the main package. That's something only your team can do. That is your responsibility.

Multiple people have fixes for this issue. This seems like an easy win for community trust.

Please help us by getting a new version out this week with the fixes in place.

Thank you

joshuayoes pushed a commit that referenced this issue Oct 29, 2024
## Please verify the following:

- [x] `yarn build-and-test:local` passes
- [x] I have added tests for any new features, if relevant
- [x] `README.md` (or relevant documentation) has been updated with your
changes

## Describe your PR

This PR enables strict mode for the `reactotron-core-client` codebase to
fix issues documented here:

#1430
@joshuayoes
Copy link
Contributor

Sorry this took so long, we have merged @crutchcorn PR and now those changes are released in [email protected]!

@swizes
Copy link

swizes commented Oct 30, 2024

@joshuayoes when can we get the newest react-native package, which uses the latest core-client package?

@jamonholmgren
Copy link
Member

Hey folks, we ran into a CI issue on Ignite, which means we might be breaking your apps too, so we're going to look at potentially re-releasing as a breaking 3.0.0 change for reactotron-core-client.

Error details here
    app/devtools/ReactotronConfig.ts:33:27 - error TS2344: Type 'ReactotronReactNative' does not satisfy the constraint 'ReactotronCore'.
      Types of property 'configure' are incompatible.
        Type '(options: import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/node_modules/reactotron-core-client/dist/types/src/client-options\").ClientOptions<import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/dist/types/src/reactotron-react-nativ...' is not assignable to type '(options: import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-core-client/dist/types/src/client-options\").ClientOptions<import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/dist/types/src/reactotron-react-native\").ReactotronReactNative>) => import...'.
          Types of parameters 'options' and 'options' are incompatible.
            Type 'import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-core-client/dist/types/src/client-options\").ClientOptions<import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/dist/types/src/reactotron-react-native\").ReactotronReactNative>' is not assignable to type 'import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/node_modules/reactotron-core-client/dist/types/src/client-options\").ClientOptions<import(\"/tmp/ignite-84d6508f2b984ce9efd7462fd4ce438f/Foo/node_modules/reactotron-react-native/dist/types/src/reactotron-react-native\").Reacto...'.
              Types of property 'createSocket' are incompatible.
                Type '((path: string) => WebSocket) | ((path: string) => NodeWebSocket) | null | undefined' is not assignable to type '((path: string) => WebSocket) | ((path: string) => NodeWebSocket) | undefined'.
                  Type 'null' is not assignable to type '((path: string) => WebSocket) | ((path: string) => NodeWebSocket) | undefined'.

    33 reactotron.use(mmkvPlugin<ReactotronReactNative>({ storage }))

@khallmark
Copy link

@joshuayoes when can we get the newest react-native package, which uses the latest core-client package?

If you're using yarn, you can set the resolution field to use that version of core-client.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests