How to build WooCommerce iOS with an M1 MacBook (Apple Silicon chip)

You can find the step by step instructions here: https://github.com/woocommerce/woocommerce-ios , however if you’re working on a new M1 MacBook with the Apple Silicon chip you’ll encounter a few problems very soon:

  • Requires Ruby 2.6.4 , which is not supported by an M1 machine, neither running under Rosetta.
  • Dependencies and libraries used by the WooCommerce app assume that x86 is the only architecture for an iphonesimulator destination, so won’t work with arm64 architecture.

What is Rosetta and why should you care with a M1 MacBook?

If you have a Mac with Apple silicon you might be asked to install Rosetta in order to open an app. This enables a Mac with Apple silicon to use apps built for a Mac (arm64) with an Intel processor (x86). It automatically translates the app for use with Apple silicon.

Installing different versions of Ruby in your system

Why Ruby? The app tooling, dependencies and all the other stuff that happens under the roof is managed via CocoaPods. CocoaPods is an application level dependency manager for Objective-C, and Swift, and runs in Ruby.

In order to make this work we can use a Ruby Virtual Environment via rbenv, so we can change the version easily if needed, in this case I used 2.7.3 as I saw other successful cases where folks were using this version as well.

# Checking our current Ruby version and installing/using a different one:
~$ ruby --version
> ruby 2.6.4  \[arm64-darwin20\]
~$ rbenv install 2.7.3
~$ rbenv shell 2.7.3

# Confirming:
~$ rbenv versions
> 2.6.4
> * 2.7.3 (set by /Users/iamgabrielma/.rbenv/version)
> 3.0.1

Once this is out of the way we can attempt to install all the dependencies:

~$ bundle install
~$ bundle exec pod install

You’ll see a new error here:

> <unknown>:0: error: could not find module 'WordPressShared' for target 'x86\_64-apple-ios-simulator'; found: arm64, arm64-apple-ios-simulator

We can update WordPressShared to 1.16, as this already includes support for arm64. If this wasn’t the case, there’s also workarounds around like this one.

# Updates 1.15.0 to 1.16.1
~$ bundle exec pod update WordPressShared

At this point you should be good to go, but I have found some other errors that may appear or not in your specific case. Here’s what worked on my end:

Derived data

From what I gathered, Xcode can often do some strange things that causes build problems, and one of the of-the-go methods methods to try and fix these issues is to delete derived data. This will not affect your project work, contents of DerivedData folder are generated during the build time and you can delete them if you want, it’s not an issue. They look something like this ( notice the /Xcode/DerivedData/ path):

/Users/iamgabrielma/Library/Developer/Xcode/DerivedData/WooCommerce-cmbxjyjpcmbwbccxzbxzooxzyzjc/ ...  No such file or directory   Command PhaseScriptExecution failed with a nonzero exit code

You can open the folder path and delete it manually or run:

rm -rf ~/Library/Developer/Xcode/DerivedData

Reset packages caches:

Another problem I found is that Xcode was not able to find packages that were 100% installed, in my case Yosemite and Shimmer.

	Missing Yosemite, Shimmer: bundle exec rake dependencies

By resetting the packages cache under File > Swift Packages resolved the issue, here:

You can also click on “Update to Latest Package Versions” to be sure that is up to date.

Rake dependencies:

When you go to open Xcode, open your terminal console > cd into your WooCommerce project directory and run:

~$ rake xcode // If Xcode is closed, this will open the project when is finished.
~$ rake dependencies // If Xcode is open

That will run a bunch of things, including updating the dependencies and confirming the correct versions, then will open the project in Xcode.

Clean Build

This tends to resolve problems when Xcode get stuck building your project. Can be found in Xcode under Product > Clean Build Folder.

And you’re good to go!

Leave a Reply