In my package.json I have:
...
"devDependencies": {
...
"react-devtools": "^4.14.0",
...
},
"resolutions": {
"react-devtools-core": "4.14.0"
}
when i try to run yarn it shows something like this
warning Resolution field "react-devtools-core#4.14.0" is incompatible with requested version "react-devtools-core#4.25.0"
in the warning, I want to know where version #4.25.0 is coming from
I even removed every reference of react-devtools-core and react-devtools from yarn.lock, remove the node_modules folder and run yarn again, but still the same.
and when the app runs this is what is shows in React Native Debugger
it says Devtools 4.25.0-....
So where is the 4.25.0 coming from?
I do know how to resolve the overall issue, but I just want to understand the reason for the above happening.
Your react native debugger comes with dev tools 4.25.0. You just need to put the same version in your resolution and it should be fine.
When I try to debug my app with React Native Debugger I got that error: "
error from react native debugger
then I do that instruction. install react devtool, and nothin happen.
I think, maybe, I have some error when installing the package, so I run react devtools and see that current version 4.23.0
react-devtools version
so anybody have any idea how I can fix that problem?
I "npm install"ed 'react-devtools' and 'react-devtools-core' and set them to the same version
"react-devtools": "~4.14.0",
"react-devtools-core": "~4.14.0",
and re-installed everything by deleting package-lock.json and node_modules
then ran npm install and it worked
I think the problem was those packages not being the same version
If anyone else is seeing this dialog:
Here is the solution which worked for me on M1 Mac:
Uninstall the homebrew version of react-native-debugger and install the react-native-debugger_0.11.7.dmg binary.
More info here
I tried to sync both versions by doing the fresh global and local install.
But after a long time, the local combination and resolutions for the version worked for me.
I added the following in packege.json as dev depedencies.
"react-devtools": "~4.24.5",
"react-devtools-core": "~4.24.5"
And
"resolutions": {
"react-native/react-devtools-core": "4.24.0"
},
Restarted the env, opened yarn react-devtools, and then opened dev menu and select inspect options and it got connected to dev tools and I was able to inspect my UI components in devtools.
I created a new project with react-native init .
I am using react-native with the following:"react": "16.13.1","react-native": "0.63.2".
When i am trying to run the app with react-native run-android command it shows build successful in the terminal but nothing appears in my metro bundler(I am attaching the image of it) and my emulator shows the 'Unable to load script' issue.
Unable to load script
If I press 'R' to reload the app in node(bundler) it says there is no device attached to it but my emulator is running. I encountered the same problem with personal device also.
metro bundler not running
I also tried by creating the assets folder in android/app/src/main/assets and run the below command:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res.
With this only once the app gets displayed on the emulator and when I make changes in the App.js file and save it there is no change in the emulator.
If I reload the error "Could not connect to the development server" pops up.
could not connect to development server
Even tried the adb reverse and changing 'dev' options to local host and port 8081, but it was not useful. (If there is any specific path where I should try the above steps please mention).
What is that I have done wrong?
Can anyone help please.
P.S.: I am using a windows 10 machine.
Thank you.
"react-native": "0.64.1",
I used other solution but I've resolved this issue in other way.
I resolved it by changing bundleInDebug: true, in project.ext.react in android > app > build.gradle.
project.ext.react = [
bundleInDebug: true,
enableHermes: ***,
]
I am also facing this issue and I try the below method to fix the issue.
for start the npm server use npx react-native start
in another tab npx react-native run-android for run the application.
Many devs have different environment setup and this complicates the solution.
I'm working on Windows with WSL2. Initially, I followed this react-native setup guide with no problems but later encountered this error, not sure why.
After many hours of searching and trying most of the answers from this duplicate question, among others, I had no luck.
Eventually, all I had to do from WSL2 was pass the host option to react-native start in order to connect to the adb server running on Windows.
yarn start --host 127.0.0.1
# or npx react-native start --host 127.0.0.1
I got this issue, I solved with close the app form emulator or if you use android or iphone device you can uninstall the app.
start again npm server use npx react-native start
reinstall app use npx react-native run-android
I have a react app created by create-react-app. After running npm start (the start script is present in package.json as "start": "react-scripts start") the console says Starting the development server as usual and fires up the browser. But after this both the console and the browser do absolutely nothing indefinitely. No error or output. It simply does nothing.
I have something similar happening to me.
I have a react project that I want to convert to Typescript and I started as you noted with the "create-react-app", added all my files and hoped for the best - but got stuck like you on the “Starting the development server” message.
I have an 8GB Ram with Windows 10 and once I used the default "npm start" for the first time I've seen the node process uses a lot of memory - So I tried to give it more and at the same time I tired to change the port react uses.
Added this to the start script in package.json:
"scripts": {
"start": "PORT=3001 react-scripts --max_old_space_size=8128 start",
...
}
Closed all my chrome browsers (they take pretty much memory)
And gave it around 1 minute to run
After 1 minute it started working and from that point it just starts quickly and not uses as much memory and not depended on the port I choose
In my case - I guess the first time you run "npm start" on the React Typescript project it probably index the files (or does something similar - I'm not sure and probably need to read about it - I'm new to typescript) which take a lot of memory.
In your case - It might be something similar
Hope it helps :)
First time you run the command it takes about 5 minutes before the page loads.
Check these two points
Run npm install command before you start the server.
Then if it is still not running, please try the second command
Remove the node modules and run npm install once again.
If these two points didn't work, please provide a screenshot for further analysis.
I created my react app by create-react-app too.
I've tried all the method mentioned above. But it didn't work for me.
Then I accidentally found out if you have unused import or any unused statements. You will stuck.
My react version is 17.0.1.
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the following steps:
1. npm install
2. npm run build
3. npm start
Hope will works for you.
the same problem as i met; npm start but got stuck like you on the “Starting the development server” message.
after i trying the following ways but didn't worked:
npm install
npm run build
npm start
it seems not the version matter.
finally, i recheck my code, and found the mistake that's the cause of development server fail to start:
useEffect()
this is the hook incorrect using, maybe i forgot to finish it; then i fixed it, and npm run start, it worked, server started successfully.
This is my react version:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
My node version is 12.18.1, and it didn't work.
I try to change the version to 14.15.0, and then run success.
For me, the problem was the name of the parent directory. For some reason it choked on "#" when I tried to install into a directory named "#TEMP". Switched to another directory with success.
This has previously worked on my old MBP i9, I'm now on a MBP M1 Monterey 12.2.1.
FWIW, I restarted my macbook, changed nothing and everything worked again 🤦♂️🤣
Finally solved this. For me the issue lay in my webpack configuration. I had a webpack alias in there whose alias name was the same as the name of my npm package.
i.e.
My package.json had the following at top.
"name": "#mycompany/react-common-components"
Within my webpack.config.js I had
alias: {
'#mycompany/react-common-components': path.resolve(__dirname, '../src/components')
},
Once I changed the webpack alias to the following everything worked fine
alias: {
'react-common-components': path.resolve(__dirname, '../src/components')
},
I believe you may have some issues with Node and npm.
I would recommend checking the versions first - you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine, and update if needed. It could worth trying to reinstall node.
Checking into node logs could provide some clues on your issue (more information on how to log here)
I was also having the same issue. Try installing a previous version of react-scripts.
npm install react-scripts#2.1.8
Hope this helps!
had the same issue,
I had to build it first
npm build
then
npm start
I was running react on my Mac and had to give permission for the terminal to interact with chrome before it worked.
For me the issue was that I had .css files.
I renamed my css files to .scss and it works.
For some reason create-react-app chokes on CSS files for me.
Weird.
My team also faced this same issue but we managed to solve it.
Run npm install to update packages
then run npm audit fix to fix vulnerabilities
Finally close all browser tab to free up RAM. I have seen node processes take a significant amount of memory.
Run npm start and the development server spins up within a minute or two.
NOTE
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the steps given above.
I ran into this issue. In my case, there was an .eslintcache file that had incorrect information in it, and was causing an issue. Simply deleting the file solved it for me.
For me, it was because of using StrictMode, the server starts, but the app keeps loading for a long period.
This is my case.
In my react app project I configured eslint with
https://github.com/prettier/eslint-plugin-prettier
After removing minimized source file(in my case, mapbox-gl.js) from the source tree, everything works.
Here are tow points checked:
Remove package.lock and node_modules, re-install: npm i.
Check the node version. Maybe you currently use version is 12.0.0, but this project limited 14.0.0.
I had similar issue. I just opened chrome to check if it's actually running on there (chrome is my default browser for vs code) and npm could then run the next step after that. So try opening the browser if you're stuck on "starting dev...."
This is not so much an answer as how to fix the problem in all cases since I think there are likely multiple things that affect this.
Following the ticket here https://github.com/facebook/create-react-app/issues/12090 allowed me to track down the issue to being something to do with the chunks within the bundles having the same file name.
I was getting timeouts on yarn install and after that worked, getting stuck on Starting development server... which it never did before on this computer.
It may have to do that I am not in the USA, so I set my VPN to Los Angeles and deleted the yarn lock file and the node_modules directory, re-ran yarn install and ran yarn start and everything worked!
this error can occur because of multiple reasons , my particular case (as shown in the picture attached) occurred abruptly when I was installing splide and styled-components probably because of some vulnerabilities
My error was resolved by running
npm audit fix --force
Under OS X, Node 10.7.0.
I created the electron-forge app with:
electron-forge init app-name --template=react
Some version info:
"electron-forge": "^5.2.2",
"react": "^16.4.2",
"electron-prebuilt-compile": "2.0.7",
"electron-compile": "^6.4.3",
I can provide other version info if necessary.
The only things I changed from the stock electron-forge build was the React version (I'm using material-ui 1.5.1). It works fine under electron-forge start, it's only the built one that fails.
My initial assumption was that the text/jsx script in the default index.html wasn't working; I replaced it with the transpiled code, same issue. My next assumption is the Node version, which would be a bit of a let-down if that turns out to be it.
A naive upgrade to electron-forge#master did not resolve the issue.
I'm not sure how to debug the packaged application (things like --verbose --debug did nothing) and the dev tools don't show up even if I remove the comment around the installExtension or hit the normal dev console keys.
I don't know enough to know what other information might be required; just let me know.