Tag: error

XCode not compiling for Mac Catalyst because of an SDK / xcframework

Is it possible that in your project you was coding for iOS and iPad but you also want your application to build on MacOS and you can do it easily with Catalyst that allows you to run an iOS app on MacOS.
For your information, you can enable it on Apple Store Connect so your app on TestFlight will be available on MacOS.
But, you can also add it in XCode, this is what we will do in this small tutorial :

You can add MacOS destination to your mobile project in “General” tab

The only problem is that sometimes some SDK and frameworks are not compatible with MacOS Catalyst, so you may have such errors if your try to build or launch the app on MacOS :

Method 1 : disable build of framework in “Build Phases” for Mac Catalyst

Go in the “Build Phases” tab of your app in the section “Link Binary With Libraries”

Disable the platform Mac Catalyst for the frameworks causing the error. You have to go in the tab “Build Phases” > Link Binary With Library, then look to the framework that you want to not build for Mac Catalyst, near the Status you can see the arrow icon, click on it and uncheck “Allow any platform” and “Mac Catalyst”.

Method 2 : use cocoapods catalyst support

To solve this problem you can try to have a look on the repository of cocoapods-catalyst-support :

Step 1 : install the package

$ gem install cocoapods-catalyst-support

Step 2 : init

$ pod catalyst init

Step 3 : set the config in /ios/Podfile

In the ios folder (if you are on a react native project), open the Podfile file and after the pod catalyst init you can see that there are additional lines:

catalyst_configuration do
	# Uncomment the next line for a verbose output
	# verbose!

	# ios '<pod_name>' # This dependency will only be available for iOS
	# macos '<pod_name>' # This dependency will only be available for macOS
end

Modify this part with the SDK / frameworks that are a problem during the build.

Step 4 : Apply the changes

Apply the changes for the next build on XCode with these commands

$ pod catalyst validate     # check if your new configuration is valid
$ pod catalyst run             # apply the changes if valid

Method 3 : Build Settings for each Pod

If you still have errors you can also look in the “Build Settings” of the concerned Pod and disable “Derive Mac Catalyst Product Bundle Identifier” and “Supports Mac Catalyst” :

React Native : fix ‘React/RCTDefines.h’ file not found

It is possible that after adding a new library in your React Native project (or after upgrading or adding some packages) you have the following error in XCode when you try to build:

<React/RCTDefines.h> file not found

or

'React/RCTDefines.h' file not found

This error means that the library is not correctly set up with your React Native project.
To fix this error, go to your library settings. You will have to modify the Header Search Path input in Build Settings :

Go to Libraries > YourLib.xcodeproj > Targets > Build Settings > Search “Header Search Path”

“Header Search Path” should be in the section “Search Paths”. I recommend to use the search input because there are a lot of fields.

In my case, the external library named “RNReactNativeMstuneMam.xcodeproj” was doing the problem, so I am opening the settings of the xcodeproj file of this project. It can be any other library with another name, but you will have to fix the xcodeproj file, following to the error path that you have.

Now, double click to Header Search Paths and add:

${SRCROOT}/../../../ios/Pods/Headers
Add the entry ${SRCROOT}/../../../ios/Pods/Headers by double clicking

Set it to recursive:

set it to recursive

Now, you can clean and build again:

Clean project and build again

The error should not appear anymore as your library will find the Pods headers.

Ruby on MacBook M1 : Not updating version

In some cases, it seems that your ruby version can still on 2.6 (which is old, latest is 3.2.2 right now) even if you installed the lasted version with brew or rbenv. You can see also that you have rights problems and need sudo rights to install some gems.

# ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]
# rbenv install 3.2.2
# rbenv global 3.2.2
# ruby -v # WE CAN SEE THAT WE STILL HAVE OLD VERSION
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]

This is because MacOS comes with a “system Ruby” pre-installed. If we remove all we can see the pre-installed version is located in this folder:

$ which ruby
/usr/bin/ruby

What should we do to not use system Ruby

There are two methods that I recommend, the method using brew or the method using rbenv which both allows you to manage Ruby version.

Method 1 : Updating Ruby version with Brew

First you need to install the Ruby version with brew:

brew install ruby ruby-build

Then open a terminal and go on your personal folder (/Users/YOUR_USERNAME) and use the following command to switch from the Ruby system version to the brew version with the .zshrc file in your user folder:

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

Method 2 : Updating Ruby version with RBEnv

If you still see the old version by checking the version doing ruby -v
First you need to install rbenv, which is a ruby version manager, we can install it with brew.

brew install rbenv ruby-build

Then open a terminal and go on your personal folder (/Users/YOUR_USERNAME) and use the following command to switch from the Ruby system version to the rbenv version with the .zshrc file in your user folder:

echo 'eval "$(rbenv init -)"' >> ~/.zshrc

Check the result

Then, open a new terminal (close the old one), if you updated correctly the zshrc file and have installed the correct ruby version, you should be able to see the good version:

% ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

Hope it will work for you. Do not hesitate if any question.

Mac M1 : react native iOS mobile app on Simulator

I decided to make an article because I spent almost 5 days on this problem, and I don’t want it never happen. So let me help all the people that can be in the same case of me.

– You have a Mac M1 running on ARM 64 architecture
– You are working on a React Native or Swift project with Xcode

Exclude the ARM architecture in the Podfile

Add the following lines in the Podfile (/ios/Podfile) :

    post_install do |installer|
      ## FIX MAC M1 ARM
      react_native_post_install(installer)
      installer.pods_project.build_configurations.each do |config|
        config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
      end
    end

You should check that there is only one “post_install” in the file, if there is not you can add it at the end of the file, if there is already “post_install” somewhere, just put the instructions to exclude the architecture ARM 64 at the end of the “post_install” section.

Dependencies with CocoaPods

In the /ios folder of your React Native project, you should run the following command to build all the dependancy in the /Pods folder :

sudo arch -x86_64 pod install --allow-root

or, you can also use pod-install to be sure all is installed:

npx pod-install

In case of error: Delete /Pods folder, delete Podfile.lock and start again. In case of error of dependancies in node_modules, delete node_modules and run yarn.

Exclude the ARM architecture in Xcode

Now, you should also exclude the architecture in the project settings in Xcode :

Exclude the architecture “arm64” in Project > Build Settings > Architectures

Then if you start the react native project on Simulator it should works !

How to solve error SQL Import Google Cloud

Is it possible that when you try to import a backup of your MySQL database on Google Cloud, you have the following error :

We are trying to import a backup in Google Cloud SQL
The following error appears in the logs
error: exit status 1 stdout(capped at 100k bytes): stderr: ERROR 3546 (HY000) at line 26: @@GLOBAL.GTID_PURGED cannot be changed: the added gtid set must not overlap with @@GLOBAL.GTID_EXECUTED

To solve the problem, open the SQL file with text editor and search the error “@@GLOBAL.GTID_EXECUTED”

After modifying the *.sql file, you should be able to import successfully :

It should now work

AWS Amplify : Babel error building React.JS app

Is it possible you may have an error with babel on AWS Amplify, while deploying your React.JS app:

If you click on Frontend you should be able to see the logs :

2022-01-14T17:18:36.441Z [INFO]: $ react-scripts build
2022-01-14T17:18:37.352Z [INFO]: Creating an optimized production build...
2022-01-14T17:18:38.431Z [INFO]: Failed to compile.
2022-01-14T17:18:38.433Z [INFO]: ./src/index.js
                                 Error: [BABEL] /codebuild/output/src483533555/src/app/src/index.js: Cannot find module '@babel/helper-define-map'
                                 Require stack:
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-classes/lib/transformClass.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-classes/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/available-plugins.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/plugins-compat-data.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/normalize-options.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/create.js
                                 - /codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
                                 - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/loadLoader.js
                                 - /codebuild/output/src483533555/src/app/node_modules/loader-runner/lib/LoaderRunner.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModule.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/NormalModuleFactory.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/Compiler.js
                                 - /codebuild/output/src483533555/src/app/node_modules/webpack/lib/webpack.js
                                 - /codebuild/output/src483533555/src/app/node_modules/react-scripts/scripts/build.js (While processing: "/codebuild/output/src483533555/src/app/node_modules/babel-preset-react-app/index.js")
2022-01-14T17:18:38.451Z [WARNING]: error Command failed with exit code 1.
2022-01-14T17:18:38.451Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2022-01-14T17:18:38.461Z [ERROR]: !!! Build failed
2022-01-14T17:18:38.461Z [ERROR]: !!! Non-Zero Exit Code detected
2022-01-14T17:18:38.461Z [INFO]: # Starting environment caching...
2022-01-14T17:18:38.461Z [INFO]: # Uploading environment cache artifact...
2022-01-14T17:18:38.534Z [INFO]: # Environment caching completed
Terminating logging...

In order to solve the @babel errors, you will need to install all the @babel packages:

NPM

npm install babel-core babel-loader babel-preset-env 
babel-preset-react babel-polyfill babel-runtime @babel/helpers 
@babel/helper-builder-react-jsx-experimental @babel/helper-builder-react-jsx 
@babel/helper-define-map @babel/helper-plugin-utils @babel/helper-regex

YARN

yarn add babel-core babel-loader babel-preset-env 
babel-preset-react babel-polyfill babel-runtime @babel/helpers 
@babel/helper-builder-react-jsx-experimental @babel/helper-builder-react-jsx 
@babel/helper-define-map @babel/helper-plugin-utils @babel/helper-regex

In order to run your React.JS project on Amplify, here is all the babel packages I installed to solve all problems:

  • babel-core
  • babel-loader
  • babel-preset-env
  • babel-preset-react
  • babel-polyfill
  • babel-runtime
  • @babel/helpers
  • @babel/helper-builder-react-jsx
  • @babel/helper-builder-react-jsx-experimental
  • @babel/helper-define-map
  • @babel/helper-plugin-utils
  • @babel/helper-regex

After, that, you should be able to see your React.JS app online with Amplify:

Alerting user with a small messaga bubble – Snackbar – React.JS

In your web app, you will have to notice the user when he is doing some actions in your user interface. We can do it with a small message bubble called Snackbar, here is what it looks like:

How we will do it

setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);

In your code, we will use these 3 lines to:
– Set the severity “error”, there are 4 types of severity

– Set the error message that will be displayed “The last cell cannot be deleted.”
– Show the error message (during few seconds)

Full example

import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}
...
const [snackSeverity, setSnackSeverity] = useState('error');
const [openError, setOpenError] = useState(false);
const [snackMessage,setSnackMessage] = useState('Error');
...
setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);
...
<Snackbar
   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
   open={openError}
   onClose={(e)=>setOpenError(false)}
   autoHideDuration={3000} 
   >
     <Alert onClose={(e)=>setOpenError(false)} severity={snackSeverity}>
       {snackMessage}
     </Alert>
</Snackbar>