React-native/iOS app: Module 'SquareInAppPaymentsSDK' not found, although it has been added to the project

Question

For further information

• I have posted this also in https://github.com/square/in-app-payments-react-native-plugin/issues/66#issuecomment-623619907 - you can find more details there.
• The installation instructions of the package I am having problems with are in https://github.com/square/in-app-payments-react-native-plugin/blob/master/docs/get-started.md

Summarizing the problem

• The problem I am having is that I have configured a react-native package (react-native-square-in-app-payments) in Xcode, but I am getting an error saying that 'module xxx not found'.

The question, is:

• Why doesn't Xcode find the 'missing' module? What is not configured properly? Where should I look to check?

The error is the following

Module 'SquareInAppPaymentsSDK' not found

My podfile:

platform :ios, '11.0'

target 'myproject' do
  use_frameworks!

  pod 'React', :path => '../node_modules/react-native'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'RNSquareInAppPayments', :path => '../node_modules/react-native-square-in-app-payments'

  post_install do |installer|
    installer.pods_project.targets.each do |target|
      if target.name == 'React'
        target.remove_from_project
      end
    end
  end

end

My project.pbxproj file (couldn't attach it here, but you can access it in github):

https://github.com/square/in-app-payments-react-native-plugin/issues/66#issuecomment-625333601

Update: Linking (following the 1st comment and @DenisTsoi answer) below

I tried automatic linking (as noted, I need it since I am using RN 0.59.9), and then I started again and tried manual linking, for both I have the same error. You can see my comments about this in https://github.com/square/in-app-payments-react-native-plugin/issues/66#issuecomment-625330210

BTW, under 'link binary with libraries' I have two entries of the package:

• SquareInAppPaymentsSDK.framework (as requested in https://developer.squareup.com/docs/in-app-payments-sdk/installation#option-3-install-the-in-app-payments-sdk-manually)
• libRNSquareInApppayments.a (part of linking)

Comment to @MuhammadNuman answer below:

I tried your podfile in a new react-native project (created by react-init). When I add

import { SQIPCore } from 'react-native-square-in-app-payments';

I get the error described in https://github.com/square/in-app-payments-react-native-plugin/issues/66#issuecomment-629762613

You may find my repo in https://github.com/rahamin1/square_with-podfile

Answer 1

I have faced this type of error in the past. Because some configuration things were missing or broken which leads these type of issues. So my suggestion for you is to create a new react-native project install all the library in the package.json one by one from the NPM or GitHub document of there library. and then copy the code from src (React Code) into the new project. If you have any changes inside the ios and android folder then only copy the changes from the file and paste to the file of the new project android/ios folder. (If nothing works then apply this solution. it always works for me)

Answer 2

According to your github issue link,

You’re running react 0.59.x. This means you’ll be required to run

react-native link

For native libraries to be linked in iOS XCode.

An alternative method is linking the dependency in XCode, which can be found on the react native docs

Excerpt

Step 1 If the library has native code, there must be an .xcodeproj file inside its folder. Drag this file to your project on Xcode (usually under the Libraries group on Xcode);



Step 2 Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag the static library from the Products folder inside the Library you are importing to Link Binary With Libraries



Step 3 Not every library will need this step, what you need to consider is: Do I need to know the contents of the library at compile time? What that means is, are you using this library on the native side or only in JavaScript? If you are only using it in JavaScript, you are good to go! If you do need to call it from native, then we need to know the library's headers. To achieve that you have to go to your project's file, select Build Settings and search for Header Search Paths. There you should include the path to your library. (This documentation used to recommend using recursive, but this is no longer recommended, as it can cause subtle build failures, especially with CocoaPods.) 

For RN 0.60+ linking is done automatically.

Edit:

You can also install the SDK with cocoapods via the command in the directory <YOUR_PROJECT_DIRECTORY>/ios

pod install

Answer 3

You can also clone and test boilerplate for react-native 0.59.9

https://github.com/nomi9995/in-app-payments-0.59.9.git

change your podfile

platform :ios, '11.1'

target 'myproject' do
  use_frameworks!

  rn_path = '../node_modules/react-native'
  pod 'React', path: rn_path, subspecs: [
  'CxxBridge',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'RCTAnimation',
  'RCTActionSheet',
  'RCTGeolocation',
  'RCTImage',
  'RCTSettings',
  'RCTVibration',
  'RCTLinkingIOS'
  ]
  pod 'yoga', :path => "#{rn_path}/ReactCommon/yoga"
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'RNSquareInAppPayments', :path => '../node_modules/react-native-square-in-app-payments'


end

and install podfile againt

pod install