Troubleshooting Custom Capacitor Plugin: No such module 'PushNotifications'

As a Capacitor hybrid app developer, default plugins offered by Capacitor can be not enough to achieve what we want for our project.

For beginner like me, who hope to create a simple custom plugin, set aside Javascript related code, it can be a tough experience as we have to learn and put into practise for both Android and iOS build.

Building a custom plugin for Capacitor (Ionic)

Fortunately, Capacitor has built-in API we could use to build any custom plugin.

No such module 'PushNotifications' (iOS)

On one of my custom plugin, it has dependency on Pusher's client iOS SDK which is imported through cocoapod. Running app "build" on xcode on this plugin is successful.

On my ionic app project folder, when import the created custom plugin causes error, and I get 

"No such module 'PushNotifications'" 

for importing the custom plugin. Which it's weird as I've checked and certain PushNotifications plugin installed in pods folder on both the actual app project and in the custom plugin.

When I navigate inside xcode Pods project, I'm able to see PushNotifications library correctly placed under pods folder.

Solution:

1. In the Capacitor custom plugin folder, find the .podspec file (usually located at root folder of your Plugin project), and add s.xcconfig to your podspec file, it's added to tell xcode about where to look the PushNotifications framework required by this plugin in your main project.

	
		
  require 'json'

  package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

  Pod::Spec.new do |s|
    s.name = 'CapacitorPusherBeams'
    s.version = package['version']
    s.summary = package['description']
    s.license = package['license']
    s.homepage = package['repository']['url']
    s.author = package['author']
    s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
    s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
    s.ios.deployment_target  = '11.0'
    s.dependency 'Capacitor'
    s.swift_version = '5.0'
    s.xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => "${PODS_CONFIGURATION_BUILD_DIR}/PushNotifications" }
  end

	

2. Or, alternatively, you can add the PushNotification framework path manually as below (you'll have to do this every time when the plugin get updated or after you run npx cap update)

Steps

1. Go to Pods project's Build settings, find "Framework Search Paths"
2. Select your affected plugin (by the missing module error mentioned above)
3. Add the missing path to both Debug and Release as needed.

Angular: What does "Cannot read property 'childNodes' of null" trying to tell?

Recently, I ran into the following error, it has no obvious problem at first until part of my component template didn't show a thing until a click event is triggered the at the screen.

Cannot read property 'childNodes' of null

The error do not directly indicate which component or code in a template has gone wrong, but you know it's an error about certain part of the code is referring to "childNodes" on a null object.

Finding out the root cause

To find out where in the template has gone wrong, I didn't suspect it's problem with HTML template. I had started with checking my component class code, and though some binding values weren't pass correctly into the template code (the template code look fine, not bad syntax at all!).

Until I gave up trying consciously, I blindly test by removing of the HTML code part by part. This is where it shed me the ray of hope, eventually, I found out it's ion-card Ionic's component doesn't accept [innerHtml] correctly.

If you insist on using ion-card, you need a proper "child node" place inside it (so now I learnt, "child node" means the child element of a parent node "ion-card".), for ion-card, one of the options is ion-card-content.

I changed my code from:

<ion-card [innerHtml]="content" padding></ion-card>

to

<ion-card>
  <ion-card-content [innerHtml]="content"></ion-card-content>
</ion-card>

Separating [innerHtml] from ion-card would solve the childNode problem above. You might have different parent node causing the null childNodes issue too. So to prevent further time wasting effort finding the root-cause and if you run into similar issue, just keep in mind, if you get similar error, it means there is problem in your template/html code.