React-native-screens: [iOS] Build fails with error duplicate symbols for architecture x86_64

[pedro-lb]

ExpoKit iOS build error: duplicated symbols for architecture x86_64

🐛 Bug Report

https://github.com/pedro-lb/expokit-duplicated-symbols

Environment

pedrobini@Pedros-MacBook-Pro ios % expo diagnostics 

  Expo CLI 3.11.7 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.12.0 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.11.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
    npmGlobalPackages:
      expo-cli: 3.11.7

Target: iOS

Steps to Reproduce

Clone our repo that reproduces the problem:

git clone https://github.com/pedro-lb/expokit-duplicated-symbols

Follow setup guide:

• Run yarn install.
• Go into ios directory and run pod install: cd ios && pod install.
• Start the expo server with yarn start --clear.

• Open the project in XCode, click Build (or hit ⌘ + B).

  You should hit the error: duplicate symbols for architecture x86_64.

Expected Behavior

The app builds successfully and works.

Actual Behavior

Build error when trying to build for iOS:

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

You can find the full build error here.

Reproducible Demo

https://github.com/pedro-lb/expokit-duplicated-symbols

Solutions already attempted:

We've tried a few fixes as listed below.

❌ Upgrading to XCode 10's new build system:

Yeah, we're late to the party and still using the old build system. Although when trying to use the new one, the same error still happens and it doesn't build.

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Manually removing conflics in Podfile:

We've tried to manually remove conflicting links on a post-install hook in our Podfile. The script looks as below.

The links were removed but that solution does not work. Same error happens (duplicate symbols for architecture x86_64).

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if %w(RNScreens RNCMaskedView react-native-safe-area-context).include?(target.name)
      target.remove_from_project
    end
  end
end

❌ Disabling autolink for conflicting dependencies on react-native.config.js:

By disabling React Native's autolink for the conflicting dependencies in react-native.config.js file, the project still does not build, and a new error appears.

module.exports = {
  dependencies: {
    ...,
    '@react-native-community/masked-view': {
      platforms: {
        ios: null,
      },
    },
    'react-native-safe-area-context': {
      platforms: {
        ios: null,
      },
    },
    'react-native-screens': {
      platforms: {
        ios: null,
      },
    },
  },
};

A new error happens when trying to build:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Removing conflicting dependencies from package.json:

By removing the conflicting dependencies below from package.json and re-installing our modules and pods (by running the commands below).

yarn remove @react-native-community/masked-view react-native-screens react-native-safe-area-context

rm -rf node_modules yarn.lock

yarn install

cd ios

rm -rf Podfile.lock Pods

pod install

> build on XCode

On this repository, the project builds and works correctly! But I guess this happens since we don't really use these dependencies here (they were just installed via yarn add). On our project another error happens during build, since we actually import and use these dependencies:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Tinkering with XCode build settings:

We've tried to change a few XCode build settings as mentioned in a few Stack Overflow posts, but none of them worked.

• ❗ Removing -ObjC flag Other Linker Flags in XCode Build Settings: It builds! But doesn't work as stated in its topic below.
• 😵 Setting No Common Blocks to NO under Build Settings.
• 😵 Setting Enable Testability to NO under Build Settings.
• 😵 Running in production and debug modes.
• 😵 Removing Link Binary with Libraries under Build Phases.
• 😵 Removing duplicated (there were none) items in Compile Sources under Build Phases.
• 😵 Removing duplicated (there were none) libraries in Libraries folder in XCode.

❓ Removing -ObjC flag in Other Linker Flags under XCode's Build Settings:

By removing -ObjC flag from Other Linker Flags (located in Build Settings) on XCode, the project builds!

...but it immediately force-closes after opening 😞. The error below pops up.

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[RCTRootView setReactTag:]: unrecognized selector sent to instance 0x7f84f6e10f40'
terminating with uncaught exception of type NSException
abort() called
CoreSimulator 681.17.2 - Device: iPhone 11 (0974E59B-9AA8-4E0B-915D-A083AB917955) - Runtime: iOS 13.3 (17C45) - DeviceType: iPhone 11

When looking at the exception that caused the app to crash with Mac OS console:

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

Apparently, -ObjC is necessary to correctly build all the dependencies.

❌ Add React dependencies to Podfile:

When seeing the error above, while still without -ObjC flag in Other Linker Flags under XCode's Build Settings, we've tried adding the missing pods as described above (Did you forget to use RCT_EXPORT_MODULE()?) in our Podfile:

  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

and we've also tried with:

pod 'React',
    :path => "../node_modules/react-native",
    :inhibit_warnings => true,
    :subspecs => [
      "Core",
      "ART",
      "RCTActionSheet",
      "RCTAnimation",
      "RCTCameraRoll",
      "RCTGeolocation",
      "RCTImage",
      "RCTNetwork",
      "RCTText",
      "RCTVibration",
      "RCTWebSocket",
      "DevSupport",
      "CxxBridge"
    ]

After running rm -rf Podfile.lock Pods && pod install, we've tried to build, but the same error happens.

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

[gabrielnaoto]

I'm having this issue as well!

[LeoLeiteSC]

HELP

[GfxKai]

@pedro-lb To disable auto-linking for this module (as it's added by ExpoKit already), you need to add it to dependencies in react-native.config.js (not react-native-config.js). This fixed the issue for me:

module.exports = {
  dependencies: {
    'react-native-screens': {
      platforms: {
        ios: null,
      },
    },
  },
};

[pedro-lb]

Hey @GfxKai!

Thanks for this, I noticed that unfortunately it was a typo on this issue.

We've tried in the correct react-native.config.js file, but still it doesn't work as mentioned in solutions above.

I've edited the issue above to correct the typo.

[GfxKai]

Your example repo is building fine on my end, just had to update your react-native.config.js file to include all of the dependencies of react-navigation:

const disableAutolinkConfig = {
  platforms: {
    ios: null,
    android: null,
  },
};

module.exports = {
  dependencies: {
    // These libraries are included in ExpoKit; autolinking them
    // results in duplicate symbol errors
    'react-native-gesture-handler': disableAutolinkConfig,
    'react-native-webview': disableAutolinkConfig,
    'react-native-reanimated': disableAutolinkConfig,
    '@react-native-community/netinfo': disableAutolinkConfig,
+   'react-native-safe-area-context': disableAutolinkConfig,
+   '@react-native-community/masked-view': disableAutolinkConfig,
+   'react-native-screens': disableAutolinkConfig,
  },
};

Also, it's worth deleting your ios/Pods folder and cleaning your XCode project (cmd+shift+K) before attempting another pod install + build

[pedro-lb]

Thanks for looking into this @GfxKai!

I tried the above but got the same error as described in the issue:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I'm feeling this could be an issue related to XCode. Can you please share with us the version you're using?

We're currently on Version 11.3.1 (11C504).

[pedro-lb]

@GfxKai Any news, please? help!

[WoLewicki]

Does the issue still exist with the newest version and newest XCode @pedro-lb ?

[pedro-lb]

We've solved the issue! 💯

To solve this we're going to need to modify files inside node_modules folder.

1. Identifying conflicted libs

First, we need to identify which libs are conflicting - we can do this by checking the error details in XCode. In our case, these libs were generating conflicts:

• react-native-screens
• @react-native-community/masked-view
  
  
  
  • react-native-safe-area-context
  
  

2. Patching errors

Next up we'll need to patch some module files.

• Open the file /node_modules/@react-native-community/cli-platform-ios/native_modules.rb

• Find this line:

packages.each do |package_name, package|

• Modify it as described here. We'll need to add every line that's marked with a + (obviously, remove the +).

packages.each do |package_name, package|
+
+  # PATCH TO DISABLE CONFLICTING MODULES (duplicate symbols)
+  puts ">> package_name #{package_name}"
+
+  next if %w(
+    react-native-screens 
+    @react-native-community/masked-view 
+    react-native-safe-area-context
+    # ADD ANY MORE CONFLICTING DEPENDENCIES HERE
+    # OR REMOVE THE DEPS ABOVE IF THEY ARE NOT CONFLICTING
+  ).include(package_name)
+
+  # PATCH END

3. Update dependencies

• In your ios folder, delete Podfile.lock file and Pods folder.

rm -rf Podfile.lock Pods/

• Reinstall your pods

pod install

4. Rebuild the project in XCode

• First, clear your build folder in XCode. You can do this by pressing Command + Shift + K.

• Then, build your project.

Should build normally! 🚀

5. Improving your experience with patch-package

Since it's necessary to add a change to a file inside node_modules folder, every developer will have to apply this, and even worse, you'll have to redo all of this if you re-install your dependencies (running yarn install or npm install).

We're going to use patch-package to create a patch so that this is applied automatically every time you or any other developer install any dependency, so that it's not necessary to redo this every time! This is also going to validate if our patch is still valid when updating libs.

• Follow the setup at patch-package to get started.

• Install patch-package

yarn add patch-package

• Add the patch-package hook in your package.json scripts

In package.json

"scripts": {
+  "postinstall": "patch-package"
 }

• Since we've already modified the file at node_modules, simply run the command below to create a patch.

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

Then commit the patch to your repo.

git add .
git commit -m "Patch iOS build"

---

Done!

Your build should work normally now in iOS and every developer should be able to build your repo without fiddling with node_modules files.

Cheers!