created new plugin, but not found in app during build

[sdetweil]

Bug Report

trying to create plugin for socket-io.client on ios

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.1.2
  @capacitor/core: 3.1.2
  @capacitor/android: 3.1.2
  @capacitor/ios: 3.1.2

Installed Dependencies:

  @capacitor/cli: 3.0.1
  @capacitor/core: 3.0.1
  @capacitor/android: 3.0.1
  @capacitor/ios: 3.0.2

[success] Android looking great! 👌

Platform(s)

Current Behavior

Describe how the bug manifests. Be specific.
npx cap sync sees plugin

✔ Copying web assets from dist to android/app/src/main/assets/public in 35.71ms
✔ Creating capacitor.config.json in android/app/src/main/assets in 2.99ms
⠙ copy android [info] Found 5 Cordova plugins for android:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ copy android in 153.71ms
✔ Updating Android plugins in 29.47ms
[info] Found 7 Capacitor plugins for android:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       [email protected]
⠹ update android [info] Found 5 Cordova plugins for android:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ update android in 184.24ms
✔ Copying web assets from dist to ios/App/App/public in 49.08ms
✔ Creating capacitor.config.json in ios/App/App in 1.46ms
[info] Found 5 Cordova plugins for ios:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ copy ios in 136.08ms
✔ Updating iOS plugins in 17.86ms
[info] Found 7 Capacitor plugins for ios:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       [email protected]   // <----------- plugin
⠙ update ios [info] Found 5 Cordova plugins for ios:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ Updating iOS native dependencies with pod install in 6.65s
✔ update ios in 6.76s
✔ copy web in 9.50ms
✔ update web in 67.88μp

build doesn't see the plugin
ionic capacitor sync ios

This dependency was not found:

* capacitor-plugin-socketio in ./src/services/logger.js

code is

import { io } from "capacitor-plugin-socketio";

following the guid for plugins
https://capacitorjs.com/docs/plugins/workflow

Expected Behavior

Code Reproduction

if I knew what was causing this I would document it..
I created the plugin
then linked to project
https://capacitorjs.com/docs/plugins/workflow#local-testing

then tried to use in code by name
(this is ionic vue app)

Other Technical Details

in https://capacitorjs.com/docs/plugins/ios#export-to-capacitor, says

To register your plugin with Capacitor, you’ll need to create a new Objective-C file (with a .m extension, not .h!) corresponding to your plugin (such as EchoPlugin.m) and use the Capacitor macros to register the plugin, and each method that you will use. Important: you must use the New File dialog in Xcode to do this. You’ll then be prompted by Xcode to create a Bridging Header, which you must do.

that does NOT happen (bridging) the .m file is generated by cap plugin setup(https://capacitorjs.com/docs/plugins/creating-plugins#plugin-generator). deleting and recreating with xcode does NOT prompt for the bridging file

all on mac
npm --version output:
7.15.1

node --version output:
v16.3.0

pod --version output (iOS issues only):
1.10.1

xcode
Version 13.0 beta (13A5154h) (needed to support iphone version 14.1, need big sur to support xcode 13

osx big sur, 11.5.1

Additional Context

[jcesarmobile]

If you use the plugin generator it already includes the .m, you don’t need to create one nor the bridging header. Also your problem seems to be on the web/types part, not on the native part.
Can you upload the plugin to github and share the url?

[sdetweil]

@jcesarmobile see
https://github.com/sdetweil/socketio

changed the name, but same problem
usage in my app

import { io } from "socketio";

This dependency was not found:

• socketio in ./src/services/logger.js

the socketio folder is in node_modules
did npm install ~/socketio
(using the 'local' approach, as it was not in github)

npx cap sync
✔ Copying web assets from dist to android/app/src/main/assets/public in 13.50ms
✔ Creating capacitor.config.json in android/app/src/main/assets in 1.52ms
⠙ copy android [info] Found 5 Cordova plugins for android:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ copy android in 125.15ms
✔ Updating Android plugins in 26.77ms
[info] Found 7 Capacitor plugins for android:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       [email protected]
⠹ update android [info] Found 5 Cordova plugins for android:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ update android in 222.84ms
✔ Copying web assets from dist to ios/App/App/public in 8.22ms
✔ Creating capacitor.config.json in ios/App/App in 1.26ms
[info] Found 5 Cordova plugins for ios:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ copy ios in 121.38ms
✔ Updating iOS plugins in 12.95ms
[info] Found 7 Capacitor plugins for ios:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       [email protected]                        <-------
⠹ update ios [info] Found 5 Cordova plugins for ios:
       [email protected]
       [email protected]
       [email protected]
       [email protected]
       [email protected]
✔ Updating iOS native dependencies with pod install in 6.99s
✔ update ios in 7.21s
✔ copy web in 1.98ms
✔ update web in 67.03μp
[info] Sync finished in 7.69s

[sdetweil]

on the .m file.. I was only commenting on the doc which says you MUST do it thru xcode new file

[jcesarmobile]

I can install and use your plugin without problems, had to use it like this import { socketIO } from "socketio";

Did you run npm run build on the plugin? that creates the dist folder, that is where the types and built web js code is located.

[sdetweil]

I did not run npm run build on the plugin. nothing said to do that for native app

[sdetweil]

i see the same error.. after running npm run build in the plugin folder, or the project folder after reinstalling the plugin

[sdetweil]

so, here is what I did
git cloned the repo
npm install in the repo (needed for rimraf command in build)
npm run build in the repo

cd to my ionic vue project
npm uninstall socketio (previous version)
npx cap sync (not there)
npm install ~/socketio (folder from the git clone above)
npx cap sync
(now listed)
then my build prior to xcode build
ionic capacitor sync ios
this failed

Syntax Error: Error: ../../socketio/package.json » @ionic/eslint-config/recommended » ./index:
	Configuration for rule "@typescript-eslint/explicit-module-boundary-types" is invalid:
	Value {"allowArgumentsExplicitlyTypedAsAny":true} should NOT have additional properties.
    at Array.forEach (<anonymous>)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 ERROR  Build failed with errors.
[ERROR] An error occurred while running subprocess vue-cli-service.
        
        vue-cli-service build exited with exit code 1.

[sdetweil]

clone the latest copy of the repo above..
saved post npm run build
now when I do npm install ~/socketio, npx cap sync works
but xcode can't find the pod that was used by the plugin

trying to use this via plugin (as I understand it, I need to wrap swift code with a plugin )
https://github.com/socketio/socket.io-client-swift

here is a pic using the plugin in my app

[sdetweil]

@jcesarmobile

i see you replied in https://forum.ionicframework.com/t/capacitor-plugin-with-3rd-party-ios-framework/185322
about somehow marking the framework for copy , but I don't see how to get that to work.

using this lib https://github.com/socketio/socket.io-client-swift
when I add this as a pod in the plugin I don't see a 'framework' for the top level api.. (socketIO)
if I add this thru the xcode page for the pods, as suggested (in the linked to topic), i get build errors..

[sdetweil]

by adding the 'frameworks' to the plugin podspec

 s.ios.frameworks = 'SocketIO','Starscream'

the npm run verify:ios in the plugin succeeds.

they now appear as frameworks under the IOS platform in the app . but the compile of the app still fails on the plugin code not finding the library in the app

[jcesarmobile]

You have to add a dependency to socketio in the plugin .podspec file

https://guides.cocoapods.org/syntax/podspec.html#dependency

[sdetweil]

thanks.. now closer, but some namespace collision.. I don't see a Socketio anywhere, unless it is a derived name from the plugin name CapacitorPluginSocketio

updated the github repo

in the app I get import problem on compile of the the code in the plugin

[jcesarmobile]

the dependency should be to Socket.IO-Client-Swift, not to SocketIO, that seems to be a very old unmaintained package https://cocoapods.org/pods/SocketIO

moving this to discussions as it's not a bug in Capacitor itself, but I'll update the plugin docs to remove the bridging headers part as it's not correct

[sdetweil]

i would add one sentence about 'If you are using an additional pod, or libraries to implement this plugin then you need to add dependencies and possibly frameworks to the Plugin.podspec'

this repo seems to updated frequently, which is one of the reasons I wanted to try it. last update 3 weeks ago.

[jcesarmobile]

yeah, but the name in CocoaPods is Socket.IO-Client-Swift, not SocketIO, you have added the dependency to SocketIO, which, if you check the link I provided, was last updated in 2014

[sdetweil]

ok, got it.. the name u looked up and found something different

i fixed podspec

require 'json'

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

Pod::Spec.new do |s|
  s.name = 'CapacitorPluginSocketio'
  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  = '12.0'
  s.dependency 'Capacitor'
  s.ios.dependency 'Socket.IO-Client-Swift'
  s.swift_version = '5.1'
  s.ios.framework = 'SocketIO'
end

did another npm run build in the plugin,
uninstalled/installed on the app
npx cap sync, npm run build
then build in xcode, no build errors (yay!)

but now runtime error on ios

in the pods, the frameworks were not marked embed on the plugin pod

but still same result

[sdetweil]

don't know what I did, but now its loaded.. on to the next part!..

now the socketio connect is rejected due to http:// vs https:// ( and I have the info.plist options specified in the app and plugin info.plist

<key>NSAppTransportSecurity</key>
        <dict>
                <key>NSAllowsArbitraryLoadsForMedia</key>
                <true/>
                <key>NSAllowsArbitraryLoads</key>
                <true/>
                <key>NSAllowsArbitraryLoadsInWebContent</key>
                <true/>
        </dict>

[sdetweil]

refreshed the plugin and voila it worked..

[sdetweil]

and socketio is working.. the lib returns a promise itself, SO.. have to wait til "connect" event before emitting....

fun

thanks for your help and patience

[sdetweil]

see above, solved