React Native not working after Xcode 10 update - javascript

I just upgraded to Xcode 10 and now after attempting to run my existing projects I was met with the below error. After searching I found the following issue when running react native init https://github.com/facebook/react-native/issues/21490. This solution also fixes my issue.
However I am wondering if anyone knows why my current project now require me to run the bundler as a separate instance. It's not the end of the world but it's certainly not the best experience.
Does anyone know of a way the get everything working as it was before without the need to run the following commands:
rm -rf $TMPDIR/react-; rm -rf $TMPDIR/haste-; rm -rf
$TMPDIR/metro-*; watchman watch-del-all
react-native start --reset-cache
(separate terminal) react-native run-ios

I had issues with the build after Xcode update, what I did to fix it is switch the Build System to Legacy Build System
From File > Workspace Settings
Or by pressing on the hammer icon on the right of the status bar
Change the build system to Legacy Build System
Also make sure that you still have the bundle script in Build Phases
Tell me know if that works with you

You may need to add an additional Build Phase to the xCode project after "Bundle React Native code and images"
Add a new build script by selecting the + sign on the top left and selecting "New Run Script Phase" then add the following
if nc -w 5 -z localhost 8081 ; then
if ! curl -s "http://localhost:8081/status" | grep -q "packager-
status:running" ; then
echo "Port 8081 already in use, packager is either not running or not
running correctly"
exit 2
fi
else
open "$SRCROOT/../node_modules/react-
native/scripts/launchPackager.command" || echo "Can't start packager
automatically"
fi

Related

Reduce the react native ios/android size folder

Need help to reduce the react-native file size, my repo is getting heavy.
cd ios
xcodebuild clean
cd android
./gradlew clean
./gradlew cleanBuildCache
I tried both commands but still the same.
node_modules is already in .gitignore
No need to add android/app/build which occupies most of space. These get generated when "run android" command is executed.

how to resolve JavaScript heap out of memory for angular production build? [duplicate]

When I run an Ionic 3 project using the ionic serve command, then I am getting this error:
For a non-Angular general answer for those who land on this question from Google:
Most times when you face this error it’s probably because of a memory leak, an addition/version upgrade of a library or a difference in how Node.js manages memory between versions (e.g. Node.js version <= 10 and Node.js version > 10).
Usually just increasing the memory allocated to Node.js will allow your program to run but may not actually solve the real problem and the memory used by the node process could still exceed the new memory you allocate. I'd advise profiling memory usage in your Node.js process when it starts running or updating to Node.js > 10.
I had a memory leak.
Here is a great article on debugging memory leaks in Node.js.
That said, to increase the memory, in the terminal where you run your Node.js process:
export NODE_OPTIONS="--max-old-space-size=8192"
where values of max-old-space-size can be: [2048, 4096, 8192, 16384] etc
More examples for further clarity:
export NODE_OPTIONS="--max-old-space-size=5120" # Increase to 5 GB
export NODE_OPTIONS="--max-old-space-size=6144" # Increase to 6 GB
export NODE_OPTIONS="--max-old-space-size=7168" # Increase to 7 GB
export NODE_OPTIONS="--max-old-space-size=8192" # Increase to 8 GB
# and so on...
# formula:
export NODE_OPTIONS="--max-old-space-size=(X * 1024)" # Increase to X GB
# Note: it doesn't have to be multiples of 1024.
# max-old-space-size can be any number of memory megabytes (MB) you have available.
See the current value of max-old-space-size (in MB)
To see the current (not exact but very close) value of max-old-space-size (in MB), run in your terminal
node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'
In my case, I fixed this problem by installing Node.js, version 12.10.0.
I had the same issue on CentOS server 7, but this solved my problem:
node --max-old-space-size=X node_modules/#angular/cli/bin/ng build --prod
Where X = (2048 or 4096 or 8192 o..) is the value of memory.
Just type this in the terminal:
export NODE_OPTIONS="--max-old-space-size=8192"
The error occurs when you exceed the default maximum memory allowed for Node.js. All this does is increase the maximum memory allowed.
I got the same error when I execute ng build command in Visual Studio Code. But I can build successfully when I execute the same thing on the Windows command line in the following sequence.
Step 1.
set NODE_OPTIONS=--max_old_space_size=4096
Step 2.
ng build
Try this solution which was pointed out in an old message on the forum: 3.7.0: iOS build with --prod not working
Open node_modules/#ionic/app-scripts/bin/ionic-app-scripts.js
Change the first line from:
#!/usr/bin/env node
to
#!/usr/bin/env node --max-old-space-size=4096
Try values 1024 and 2048, but for a relatively large app you may need 4096.
Windows
From the control panel go to System → Advanced system settings → Environment Variables → New (user or system)
Or this can be done in PowerShell with:
$env:NODE_OPTIONS="--max-old-space-size=8192"
You can also increase this number, if necessary. We've seen folks need to increase this up to 14 GB for some larger projects!
Linux/macOS
export NODE_OPTIONS=--max-old-space-size=8192
In my case it was a recursion that was causing React to use up all memory.
This happened when I was refactoring my code and didn't notice this.
const SumComponent = () => {
return (
<>
<SumComponent />
</>
)
}
In other Node.js applications this might look like:
const someFunction = () => {
...
someFunction();
...
}
I got the same error message when I executed the following statements in Visual Studio Code. But I can build successfully when I execute the same thing in on the Windows command line.
npm install -g increase-memory-limit
increase-memory-limit
set NODE_OPTIONS=--max_old_space_size=4096
ng build -c deploy --build-optimizer --aot --prod --sourceMap
Updating from Node.js 12 to Node.js 14 solved the problem for me.
Update Now Node.js 16 is available, and I recommend updating to the latest available version of Node.js.
For some reasons all the previous answers didn't really work for me. I did the following to fix my issue:
I had to first delete the node_modules folder
reinstall Node.js on my PC and
then npm install
Adding parameter --build-optimizer resolved the issue in my case:
node --max_old_space_size=4096 ./node_modules/#angular/cli/bin/ng build --prod --build-optimizer
I am not sure why adding only --build-optimizer solves the issue, but as per the Angular documentation it should be used with ahead-of-time (AOT) compilation enabled, so the updated command should be like below:
--build-optimizer=true --aot=true
Angular build documentation
export NODE_OPTIONS="--max-old-space-size=6144" #it will increase to 6gb.
-------If Not Solved try this 2nd step-------------
2) Just update your node version to the latest one will solve this issue.
-------If Not Solved try this 3rd step-------------
3)Just run this command in your windows terminal.
set NODE_OPTIONS=--max_old_space_size=4096
node --max_old_space_size=4096 node_modules/#angular/cli/bin/ng build --baseHref=/baseUrl/ --prod=true
For me, I had a syntax error (which didn't show up) and caused this error.
Run this command in your project folder. Use serve instead of build
node --max_old_space_size=8000 node_modules/#angular/cli/bin/ng serve --prod --port=4202
Replace the line
"start": "ng serve -o --port 4300 --configuration=en" with
"start": "node --max_old_space_size=5096 node_modules/#angular/cli/bin/ng serve -o --port 4300 --configuration=en"
NOTE:
port--4300 is not constant depends upon which port you selects.
--max_old_space_size=5096 too not constant; any value 1024,2048,4096 etc
I faced the same problem on Angular. Then I wrote
"serve": "node --max_old_space_size=8192 ./node_modules/#angular/cli/bin/ng serve"
this script to package.json scripts and for me this problem solved.
And run project this command:
npm run serve
Instead of using ng build, I have executed below command in terminal to fix this issue.
node --max_old_space_size=8192 ./node_modules/#angular/cli/bin/ng build --prod
Then do ng serve.
This is how my terminal look like
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Try the new cross-platform PowerShell https://aka.ms/pscore6
PS D:\ProjectPath\Project1> node --max_old_space_size=8192 ./node_modules/#angular/cli/bin/ng build --prod
For me it was a problem with a Firebase package.
Only add "#firebase/database": "0.2.1" for your package.json file. Reinstall node_modules and it works.
For me, the issue was having an extra node_modules folder that I renamed to node_modules_old and running an npm install to generate a fresh node_modules. Somehow the build must have still been picking up the node_modules_old folder, so I moved node_modules_old out of the directory to fix the issue.
I deleted the existing Node.js module and ran the below commands to fix my issue:
npm install -all
npm audit fix
Run this command:
export NODE_OPTIONS="--max-old-space-size=2048"
To check how much you have already:
> node
> v8.getHeapStatistics()
{
total_heap_size: 6049792,
total_heap_size_executable: 524288,
total_physical_size: 5477720,
total_available_size: 1094444024,
used_heap_size: 4141728,
heap_size_limit: 1098907648,
malloced_memory: 8192,
peak_malloced_memory: 582752,
does_zap_garbage: 0,
number_of_native_contexts: 2,
number_of_detached_contexts: 0
}
and then heap_size_limit: 1098907648
Please check your Node.js version:
node -v
If it’s 10.1.1 something, then you need to update your root level Node.js version via the below commands:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.nvm/nvm.sh
nvm ls
nvm install 12.18.1
Once done, please restart your terminal or Visual Studio.
It's working 100$.
For Ionic users, please add the below code in your package.json
"ionic:build": "node --max-old-space-size=16384 ./node_modules/#ionic/app-scripts/bin/ionic-app-scripts.js build",
Another non-Angular answer (I was facing the same issue building a React application on AWS Amplify).
As mentioned by Emmanuel, it seems that it comes from the difference in the way memory is handled by Node.js v10 vs. Node.js v12.
I tried to increase memory with no avail. But using Node.js v12 did it.
Check how you can add nvm use $VERSION_NODE_12 to your build settings as explained by richard
frontend:
phases:
preBuild:
commands:
- nvm use $VERSION_NODE_12
- npm ci
build:
commands:
- nvm use $VERSION_NODE_12
- node -v
- npm run-script build
I guess there are plenty of ways to reach this error!
On my side, I had a loop in my package.json. Project A had a dependency on project B, that had a dependency on project A.
Just run this command:
export NODE_OPTIONS="--max-old-space-size=8192"
If you are developing on Windows and running into this issue while publishing, upgrade Node.js through the official site.
The memory usage handling does increase with each newer version of Node.js, although I did not find exact numbers on what the increase is.
That was the only solution that worked for me. It took a whole weekend and more for me to solve this issue.
I am using the latest stable version of Node.js v-14.17. I was having the same issue with new Angular Ionic projects and tried most of the previous answers without success.
Finally after upgrading to Node.js 16.4.2 LTS, it fixed this issue.
For me I got this error because I lost access to the output path for the dist folder set in my angular.json file. After I reconnected to the remote path with updated credentials the error went away.

react-native build successful but shown nothing

I'm facing an error from last day and I could not resolve this, so I decided to share on this network.
actually i started work in react-native was running application very smoothly but now I don't know what is the problem in code, by facing issue "activity class {...} does not exist", but in directory the same file on same path exist too, and as a result build failed...
see this image
Did you try to clean gradlew cache:
cd #projectDir/android
and then
./gradlew clean
Try recreating the android and ios folders and files again. "react-native upgrade" should do the work for you - provided you have not changed anything in the generated files.
npm start --reset-cache
or
react-native start --reset-cache
clean cache memory and delete the previously installed application from your device.

React Native Config.h not found

I'm beginner of React native developer.
After create new project then open it.
xcode is display error config.h file not found in mutex.h file. I'm also search in google and try possible solution but still display same error.
I'm done Following Commands
1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2
brew install watchman
3
npm install -g react-native-cli
4
react-native init projectName
5
cd projectName
react-native start
6
react-native run-ios
Error in CMD
./Desktop/Demo React Native/projectName/node_modules/react-native/React/../third-party/glog-0.3.4/src/base/mutex.h:105:10: fatal error: 'config.h' file not found
include "config.h" // to figure out pthreads support
1 error generated.
Software Version List
Homebrew 1.6.8
react-native-cli: 2.0.1
react-native: 0.55
watchman 4.9.0
npm 6.1.0
I'm also try this soluation but still error
In the Terminal, navigate to the third-party/glog and config glog file
cd node_modules/react-native/third-party/glog-0.3.4
./../scripts/ios-configure-glog.sh
I got it fixed by following this steps:
Close Xcode.
cd <Project-Folder>/node_modules/react-native/third-party/glog-0.3.4
Run ./configure
Run make
Run make install
Open Xcode and try building the Project.
Hope this solves the issue
Solution:
yarn upgrade log
Upgrade to v1.6.0 successful. iOS build successful.
Note: Rebuilding glog did did not work for me. Build failed.
I will add another answer to this issue since it was driving me crazy this week...
$ cd ./node_modules/react-native && scripts/ios-install-third-party.sh && cd third-party && cd $(ls | grep 'glog' | awk '{print $1}') && ./configure
The steps needed to manually configure glog (like samridhgupta his accepted answer or the command I wrote here just above) worked for me, but only the first time I build the project. On every single build I had to go to the same process so I needed a more stable solution.
I appears Xcode is executing ios-install-third-party.sh on every build, which means it will also execute ios-configure-glog.sh every single time. So my solution is to just build a single time, and then comment out the glog install step in the ios-install-third-party script.
If anyone is facing this same issue, it is the line below you need to remove or comment out (ios-install-third-party can be found in /node_modules/react-native/scripts).
fetch_and_unpack glog-0.3.5.tar.gz https://github.com/google/glog/archive/v0.3.5.tar.gz 61067502c5f9769d111ea1ee3f74e6ddf0a5f9cc "\"$SCRIPTDIR/ios-configure-glog.sh\""
If any of these solution does not work, please check your project path. Project path - directory names should not contain any space in its name or you can create project on Desktop or in Documents directory.
Run following commands in project directory.Helped me resolve my config.h not found issue
cd node_modules/react-native/third-party/glog-0.3.4/
./configure
make
make install
cd ../../../..
react-native run-ios
Add this fix script into package.json
"scripts": {
"fix": "cd node_modules/react-native/third-party/glog-0.3.4 && ./configure && make && make install"
},
Then run yarn fix or npm run fix and then try building the Project
My problem was comming from using react-native#0.53.0, which I suppose has trouble with new Xcode version.
1 - Change react-native version in package.json
"react-native": "0.53.0",
to
"react-native": "0.56.0",
2 - Remove node_modules folder
$ rm -rf node_modules/
3 - Reinstall modules:
$ yarn install
What worked for me:
yarn cache clean
rm -rf node_modules
yarn install

Trouble with installing Selenium(ChromeDriver, Javascript) on Windows 7

I'm having trouble installing Selenium and I'm completely lost
I followed this documentation by the letter and looked around the site and the web for a while now and came to a dead end. Like I said in the title I'm using Chrome and Javascript for this.
[Documentation]http://selenium.googlecode.com/git/docs/api/javascript/index.html
So true with the documentation, the first thing I did was installing the "selenium-webdriver" which I opened up cmd and typed "npm install selenium-webdriver". It responded with saying what directory it installed and the version it installed which was 2.42.1.
After this I installed the ChromeDriver 2.10 from their home download page. After this I unziped the file and moved chromedriver.exe to "node_modules\selenium-webdriver\ChromeDriver" and added it to my systems environmental variables.
So then the next step was to test it, so I copy pasted "npm test selenium-webdriver" into the cmd and got this following error. [Error]http://imgur.com/xIYE3oa I also tried running ChromeDriver after I kept running into this error and tried it again to get the same result. It doesn't tell me anything other then...
Starting ChromeDriver on port 9515
Only local connections are allowed.
Thank you in advance.
First, make sure that you have Mocha installed by running npm install mocha.
You will then want to edit the "scripts" section of the package.json file for selenium-webdriver to match the following:
"scripts": {
"test": "mocha -R list --recursive test"
},
After completing those two steps, you should be able to run your tests with the npm test selenium-webdriver command.

Categories