Open donpinkus opened 5 years ago
Any update on this? I've tried everything and can't figure this out
I have the same problem!
Has anyone solved this problem?
To fix the error, make sure "packagerPort": 19001 is on the same port with "devToolsPort": 19001 on your packager-info.json in .expo folder (expo only)
However, while this fixed the error, the dev tools themselves don't get populated with the state
same issue
I also have the same issue.
I'm having the same issue with regular React web app. My store is pretty basic at the moment, I'm just using a combindeReducers call with a couple of reducers. Did not setup any middlewares yet so I'm trying to use this extension running the default export from the package itself instead of relying on the { composeWithDevTools }.
EDIT: I installed the Redux DevTools extension for Chrome and I came here to set everything up, but I just realized that this was not the right place. After switching to the redux-devtools-extension page I followed the instructions and and successfully linked my app with the extension, now everything is fine. My bad 😅
I found a solution for this problem. I will report it as follows:
Step 1 - Verify installed packages:
Step 2 - Verify if the source code file that uses "devTools" contains: const enhance = composeWithDevTools({ realtime: true, host: 'localhost', port: 8000 });
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));
Step 3 - In Android Emulator settings, verify:
Step 4 - In the Remote DevTools (Chrome extension):
Step 5 - In terminal, in the project directory, run:
$ emulator -avd
I hope these steps help you. Any doubts, feel free to contact me.
I found a solution for this problem. I will report it as follows:
Step 1 - Verify installed packages:
- remote-redux-devtools
- remotedev-server
- remotedev
- react-devtools
Step 2 - Verify if the source code file that uses "devTools" contains: const enhance = composeWithDevTools({ realtime: true, host: 'localhost', port: 8000 });
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));
Step 3 - In Android Emulator settings, verify:
- DEBUG JS REMOTELY: let it disabled
- In "DEV SETTINGS" -> "Debug server host & port device": let empty
Step 4 - In the Remote DevTools (Chrome extension):
- Click in "SETTINGS" button
- check "use custom (local) server" and fill with the fields --> Hostname: localhost e Port: 8000
Step 5 - In terminal, in the project directory, run: $ emulator -avd
//// or start emulator using Android Studio $ react-native start --reset-cache $ remotedev --hostname=localhost --port=8000 $ adb reverse tcp:8000 tcp:8000 $ adb reverse tcp:8081 tcp:8081 $ react-native run-android I hope these steps help you. Any doubts, feel free to contact me.
unbelievable :+1: It's working. You're amazing man.
@rickshido @ghasemikasra39 , Is this different for Expo? Also, what to do if running a real device?
Hi @rgomezp I am not sure if these steps are the same for Expo. If you are running in a real device, you need change:
const enhance = composeWithDevTools({
realtime: true,
host: '
And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000).
I hope it help you.
Hi @rgomezp I am not sure if these steps are the same for Expo. If you are running in a real device, you need change:
const enhance = composeWithDevTools({ realtime: true, host: '
', port: 8000 }); const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk))); And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000).
I hope it help you.
where i can find "Dev setting -> Debug server host & port" ?
I found a solution for this problem. I will report it as follows:
Step 1 - Verify installed packages:
- remote-redux-devtools
- remotedev-server
- remotedev
- react-devtools
Step 2 - Verify if the source code file that uses "devTools" contains: const enhance = composeWithDevTools({ realtime: true, host: 'localhost', port: 8000 });
const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk)));
Step 3 - In Android Emulator settings, verify:
- DEBUG JS REMOTELY: let it disabled
- In "DEV SETTINGS" -> "Debug server host & port device": let empty
Step 4 - In the Remote DevTools (Chrome extension):
- Click in "SETTINGS" button
- check "use custom (local) server" and fill with the fields --> Hostname: localhost e Port: 8000
Step 5 - In terminal, in the project directory, run: $ emulator -avd
//// or start emulator using Android Studio $ react-native start --reset-cache $ remotedev --hostname=localhost --port=8000 $ adb reverse tcp:8000 tcp:8000 $ adb reverse tcp:8081 tcp:8081 $ react-native run-android I hope these steps help you. Any doubts, feel free to contact me.
It's working. You're amazing bro @rickshido.
Hi @rgomezp I am not sure if these steps are the same for Expo. If you are running in a real device, you need change: const enhance = composeWithDevTools({ realtime: true, host: '
', port: 8000 }); const store = createStore(rootReducer, enhance(applyMiddleware(reduxThunk))); And, in your Real Device, open the App and go to Dev Settings → Debug server host & port for device. Set your PC_IP_ADDRESS and the port of the (e.g. 10.0.1.1:8000). I hope it help you. where i can find "Dev setting -> Debug server host & port" ?
shake your device, you would find a pop-up menu, click settings from it then Debug server host & port
I'm using the most basic setup to debug a web-based regular React app.
When I open my app, I get this error flooding the console: