18
How to Solve React Native Build Failed on M1 Macbook Pro / Air
Apple has just released its newest Macbook series using Apple's own M1 chip. This offers better speed, both in performance and in battery life.
In this case, developers are interested in flocking to replace their old macbook with macbook with the M1 chip. However, in addition to the advantages offered by the MacBook Pro M1, there are also shortcomings in terms of application development. There are some applications that are not yet compatible with this Apple M1 chip.
React Native is a JavaScript framework that allows native rendering of iOS and Android applications. This makes it easier for us to create two applications on different platforms with one source code. One of the difficulties faced in developing React Native applications through MacBook Pro / Macbook Air with this M1 chip is when we want to build / run the application.
Many developers have experienced failures in building their react native applications through this macbook M1.
However, don't worry, because I will share tips for you to deal with errors when building an iOS application on a MacBook Pro or MacBook Air M1 Apple Silicon chip.
maybe you unable to run react-native run-ios on M1 Macbook. The error output that you will get when you build react native iOS is as below:
The following build commands failed:
CompileC /Users/[username]/Library/Developer/Xcode/DerivedData/reactNativeBoilerplate-atkaxzsfrfdlfocjvyvemwywinew/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper-Folly.build/Object. Users/[username]/[folder-path]/ios/Pods/Flipper-Folly/folly/synchronization/DistributedMutex.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)The solution to solve React Native build failed on M1 Macbook is to use Rosetta. What is rosetta?.
Rosetta is a dynamic binary translator developed by Apple Inc. for macOS, an application compatibility layer between different instruction set architectures. It gives developers and consumers a transition period in which to update their application software to run on newer hardware, by "translating" it to run on the different architecture.
If you're using a MacBook Pro/Air with an M1/Apple silicon chip, you might be asked to install Rosetta in order to open an app.
-
Set Terminal App to use Rosetta:. Select the app in Finder. Applications/Utilities/Terminal (App terminals). From the File menu in the menu bar, choose Get Info. make checklist on: ( Open Using Rosetta ). See image below.
-
Set Xcode to use Rosetta:. Select the Xcode app in Finder. Applications/Xcode (Xcode App). From the File menu in the menu bar, choose Get Info. make checklist on: ( Open Using Rosetta )
-
Next, delete the necessary folders so that the build process can be successful and smooth.
- delete the Pods/ folder in your-project-dir/ios/Pods
- delete podfile.lock in -> your-project-dir/ios/Podfile.lock
If you use the old code of react native, or if you experience an error like what I said the first time above, then you can follow the next steps below. However, if you've just built react native init on your macbook M1, then that shouldn't be a problem and you should be able to build react native ios on your macbook smoothly.
The next step you have to do: Modify the Podfile in the iOS folder. your-project-dir/ios/Podfile. navigate to your react native project, and open it in the editor.
Find code below: ( your-project-dir/ios/Podfile )
use_flipper!()And, replace with:
use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.75.1', 'Flipper-RSocket' => '1.3.1' })- The next step, install React native project as usual. Navigate to the root project directory, and run:
npx pod-install- Next, run npx react-native run-ios from your terminal.
npx react-native run-ios
The above method should be smooth and running well on iOS Emulator. Good Luck!.
original article: handi.dev
18