Fix: ERROR Cannot read properties of undefined (reading 'configurations')

In most cases the error: "ERROR Cannot read properties of undefined (reading 'configurations')" occurs in situations where you use React Native version 0.68.2. In the post you will find a proper solution for this problem, and I will explain what the cause is of this problem.

Problem cause

In this version of React Native a crash occurs when the UserConfig is empty. It is unclear if this is about a bug or a bad configuration.

Solution 1

You can upgrade React Native but this is not the easy way. Use the React Native Upgrade Helper to get you there. But it can be a lot of work because a lot of files must be modified.

Solution 2

If you don't want to apply solution 1, go for this one

What you have to do is, follow the next steps:

Step 1 - Persist the package modification

Install the patch package dependency. With this package we can create a patch for dependencies that are used. Because we want to change code in an external library and not our own code, we have to be sure that the changes are not overwritten when we update the external libraries (e.g. yarn install or yarn add).

This is the first step, because, if we first change the code, the changes will be overwritten when we install this package.

1yarn add patch-package

Step 2 - Modify the source code in the file node_modules/@react-native-community/cli-platform-ios/build/config/index.js

Replace the code below at line 102 in the index.js

1function dependencyConfig(folder, userConfig) {
2    const configurations = userConfig.configurations || [];
3    ...

With the following code:

1function dependencyConfig(folder, userConfig) {
2    let configurations=[];
3    ...

Step 3 - Create a patch for the change

We have changed the React Native source code. The change need to be stored in a patch file. We can achieve that in the following way:

1npx patch-package @react-native-community/cli-platform-ios

Now the patch is added to the patches directory in the root of the project.

Step 4 - Run the patch everytime yarn has changes

The dependency must be patched everytime a change is made to the dependencies. This happens everytime a dependency is added, updated or removed. Add the following row to the package.json to achieve that:

1  {
2  ...  
3  "scripts": {
4    "prepare": "patch-package",
5    ...
6  }
7 ...

Finished

Now the problem is solved. The source code of React Native is modified to prevent an error while reading the config. The change in the module is persisted by using the patch-package module.

Keep in mind that installing a newer version of @react-native-community/cli-platform-ios will make the patch outdated. Each patch is bound to a specific version of a module. So you need to follow the steps above again.

Happy coding!