search

infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://docs.infinite.red/reactotron/
MIT License
14.69k stars 935 forks source link

Compiling JS failed: 803620:268:')' expected at end of parenthesized expression Buffer size 35514497 starts with: 766172205f5f42554e444c455f535441 #1452

Closed buschco closed 3 months ago

buschco commented 3 months ago

Describe the bug

in a bare react-native app version 0.73.5 with hermes on an iOS Simulator I cannot get reactotron to connect. Is hermes supported or am I trying something that will never work? 😄 

Compiling JS failed: 803620:268:')' expected at end of parenthesized expression Buffer size 35514497 starts with: 766172205f5f42554e444c455f535441

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

Reactotron version

Version 3.7.0 (3.7.0.3020)

morganick commented 3 months ago

Hey @buschco, thanks for your patience. So far I have not been able to replicate your issue. I've created a bare app with Ignite and was able to connect it to Reactotron without issue.

I also upgraded the example application inside of this repo (#1460) to see if it had something to do with a newer version of React Native, but that also works as expected.

Hermes is supported as it is the default for RN. (https://reactnative.dev/docs/hermes)

I'm going to close this for now, but if you have additional information or a way for me to replicate the issue, please reopen and we'll take another look.

buschco commented 3 months ago

I also was not able to reproduce it with a new created project.

However without hermes I faced another issue that could be a potential typescript version mismatch. Your packages state that typescript is no dependency, however for react-native you point your entry to a .ts file https://github.com/infinitered/reactotron/blob/master/lib/reactotron-react-native/package.json#L23C5-L23C38. You use satisfies often across your codebase which means, projects without typescript or with a typescript Version below 4.9.x wont be able to run. I fixed this by patching all package.jsons entry points:

diff --git a/node_modules/reactotron-react-native/package.json b/node_modules/reactotron-react-native/package.json
index 1fbbfdd..69bb92a 100644
--- a/node_modules/reactotron-react-native/package.json
+++ b/node_modules/reactotron-react-native/package.json
@@ -16,11 +16,11 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/types/src/index.d.ts",
-  "react-native": "src/index.ts",
+  "react-native": "./dist/index.js",
   "exports": {
     "import": "./dist/index.esm.js",
     "types": "./dist/types/src/index.d.ts",
-    "react-native": "./src/index.ts",
+  "react-native": "./dist/index.js",
     "default": "./dist/index.js"
   },
   "scripts": {

Note: if you use patch-package to perform this patch you will need to run it with --exclude 'nothing'. For reactotron-react-native it would be:

yarn patch-package  --exclude 'nothing' reactotron-react-native`

Is there a reason why you point to a .ts file instead to the transpiled js files?

rajeevCs commented 2 months ago

i am also facing the similar issues, i have a n existing react native , i am tried to install reactotron in this ,i followed all the instructions

alejandro25262 commented 2 months ago

same issue my ReactotronConfig.js import AsyncStorage from '@react-native-async-storage/async-storage'; import Reactotron from 'reactotron-react-native';

Reactotron.setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from react-native or @react-native-community/async-storage depending on where you get it from .configure() // controls connection & communication settings .useReactNative() // add all built-in react native plugins .connect(); // let's connect!

in my index.js i have if (DEV) { import('./ReactotronConfig') .then(() => console.log('Reactotron Configured hola')) .catch(error => console.log('test', error)); }

always enters in catch error: Exception in HostFunction: Compiling JS failed: 125331:268:')' expected at end of parenthesized expression Buffer size 5932182 starts with: 5f5f642866756e6374696f6e2028676c and has protection mode(s): rw-p

chetstone commented 1 month ago

I just thought I'd try out reactotron on an existing project. I'm getting this error on an android hermes app:

Exception in HostFunction: Compiling JS failed: 150:268:')' expected at end of parenthesized expression Buffer size 10001 starts with: 5f5f642866756e6374696f6e2028676c]

Oddly, it still fails even if I try to disable reactotron by changing line 1 of index.js to:

if (false) {
  require('./ReactotronConfig');
}

to fix the error I have to comment out or remove the require completely!

I tried @bushco hack but it didn't help.

My RN info:

''' info Fetching system and libraries information... System: OS: macOS 14.3.1 CPU: (8) arm64 Apple M1 Pro Memory: 126.92 MB / 16.00 GB Shell: version: 3.2.57 path: /bin/bash Binaries: Node: version: 20.11.1 path: ~/.nodenv/versions/20.11.1/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 10.2.4 path: ~/.nodenv/versions/20.11.1/bin/npm Watchman: version: 2022.11.28.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/chet/.rbenv/shims/pod SDKs: iOS SDK: Platforms:

'''

jbrodriguez commented 1 month ago

i'm getting a similar error as above Exception in HostFunction: Compiling JS failed: 150:268:')' expected at end of parenthesized expression Buffer size 10001 starts with: 5f5f642866756e6374696f6e2028676c]

only the line:column changes

this is on 0.73.8 install

Gabsys commented 4 weeks ago

Getting similar error of Compiling JS Failed, running on existing project with React Native version of 0.71.13. Using latest version of reactotron-react-native - v5.1.7

Gabsys commented 4 weeks ago

I also was not able to reproduce it with a new created project.

However without hermes I faced another issue that could be a potential typescript version mismatch. Your packages state that typescript is no dependency, however for react-native you point your entry to a .ts file https://github.com/infinitered/reactotron/blob/master/lib/reactotron-react-native/package.json#L23C5-L23C38. You use satisfies often across your codebase which means, projects without typescript or with a typescript Version below 4.9.x wont be able to run. I fixed this by patching all package.jsons entry points:

diff --git a/node_modules/reactotron-react-native/package.json b/node_modules/reactotron-react-native/package.json
index 1fbbfdd..69bb92a 100644
--- a/node_modules/reactotron-react-native/package.json
+++ b/node_modules/reactotron-react-native/package.json
@@ -16,11 +16,11 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/types/src/index.d.ts",
-  "react-native": "src/index.ts",
+  "react-native": "./dist/index.js",
   "exports": {
     "import": "./dist/index.esm.js",
     "types": "./dist/types/src/index.d.ts",
-    "react-native": "./src/index.ts",
+  "react-native": "./dist/index.js",
     "default": "./dist/index.js"
   },
   "scripts": {

Note: if you use patch-package to perform this patch you will need to run it with --exclude 'nothing'. For reactotron-react-native it would be:

yarn patch-package  --exclude 'nothing' reactotron-react-native`

Is there a reason why you point to a .ts file instead to the transpiled js files?

Managed to workaround the error by doing the above to reactotron-core-client package as well. Also realised it is prolly something wrong on my metro, couldn't compile satisfies keyword even though I am already on Typescript v5