After spending a couple of hours trying to debug this issue, I thought I would write about the solution that worked for me. Here are some of the possible solutions I found on the web –
- Make sure 8081 port is free and not taken by any application. On Mac you can check this by running command
lsof -i :8081
. If any process is running then kill it –kill -9 <pid>
- Remove spaces from the folder path of the project
- Run
react-native upgrade
in the project folder
In my case the problem was #1. However simple lsof
command did not show any process. But sudo lsof -i :8081
did show the process. It turned out that McAfee agent was running on the same port. Killing the agent is not an option for me. So the next thing to do was find a way to change the port of Ract-Native packager.
Following steps worked for me –
- Opne node_modules/react-native/local-cli/server/server.js and change port 8081 to the port you want to run the packager on. In the version of React-Native I am using, it is in the following code –
module.exports = { name: 'start', func: server, description: 'starts the webserver', options: [{ command: '--port [number]', default: 8090, parse: (val: string) => Number(val), },
- Change references to port 8081 in following files –
- node_modules/react-native/Libraries/Core/Devtools/getDevServer.js
- node_modules/react-native/React/React.xcodeproj
- node_modules/react-native/React/ReactLegacy.xcodeproj
- node_modules/react-native/React/Base/RCTBundleURLProvider.m
If above changes do not fix the problem, you may want to try replacing all references to port 8081 in the files in node_modules/react-native folder.
Wish Facebook makes changing packaging port easier than the above process.
-Ram Kulkarni
Very Good Article