Importing admob plugin, vanilla javascript

Capacitor
1

Hey all! I’m a seasoned developer (30 years creating Web games in Director/Flash/CreateJS/PIXI) but brand new to Capacitor. I’m trying to port an HTML5 game to mobile. Have everything set up and can get the game to compile and run. I get into trouble when trying to import the admob plugin.

I have the following at the top of my main.js file:
import { AdMob } from ‘@capacitor-community/admob’;

And I get:
TypeError: Module name, ‘@capacitor-community/admob’ does not resolve to a valid URL.

I can see that the plugin is in a folder called node_modules - but the path won’t resolve. This is surely a setup issue of some kind (I feel I have followed the docs quite carefully). I am using very vanilla javascript in this project, so perhaps I’m not initializing the plugin correctly?

Thanks in advance for any guidance.

2

The issue you are encountering with importing the AdMob plugin in a vanilla JavaScript setup is a common hurdle. The error message:

TypeError: Module name '@capacitor-community/admob' does not resolve to a valid URL.

suggests that the module system in your current setup is not configured to handle ES module imports as expected.

  1. Make sure Proper Installation of the Plugin:
npm install @capacitor-community/admob
npx cap update
  1. Adjust Import Statement:

In a vanilla JavaScript context, when not using a bundler like Webpack or Rollup, ES module imports can be tricky. Instead of using the import statement, you might consider dynamically importing the module or accessing it via the global Capacitor.Plugins object.

  • Option A: Dynamic Import
(async () => {
  const { AdMob } = await import('@capacitor-community/admob');
  await AdMob.initialize();
  // AdMob code here
})();
  • Option B: Access via Capacitor.Plugins
const { AdMob } = Capacitor.Plugins;
AdMob.initialize();
// AdMob code here
  1. Configure Development Environment:

If you are using a simple HTML file without a bundler, make sure that your script tag has the type="module" attribute:

<script type="module" src="main.js"></script>

  1. Consider Using Bundler:

For a smooth development experience & dealing with modules ==> setting up a bundler like Vite, Webpack, or Rollup. These tools handle module resolution and can simplify the integration of plugins like AdMob.

npm create vite@latest my-app --template vanilla
cd my-app
npm install
npm install @capacitor-community/admob
npx cap init
npx cap add android
npx cap sync

Update main.js

import { AdMob } from '@capacitor-community/admob';
AdMob.initialize();
// AdMob code here

Source: Capacitor AdMob Plugin Documentation, Creating Capacitor Apps with VanillaJS

3

Thanks so much!

This method seemed the fastest way to get rolling, and did work:
const { AdMob } = Capacitor.Plugins;

However, I’ve run into additional issues that may be outside the scope of the original question.

My implementation looks like this:

In index.html:

In main.js:
initApp = function() {
loadAdMob();
loadApp();
}

async function loadAdMob() {
const { AdMob } = Capacitor.Plugins;
await AdMob.initialize();

console.log("ADMOB 1");

const [trackingInfo, consentInfo] = await Promise.all([
	AdMob.trackingAuthorizationStatus(),
	AdMob.requestConsentInfo(),
]);

console.log("ADMOB 2");

if (trackingInfo.status === 'notDetermined') {
	/**
	 * If you want to explain TrackingAuthorization before showing the iOS dialog,
	 * you can show the modal here.
	 * ex)
	 * const modal = await this.modalCtrl.create({
	 *   component: RequestTrackingPage,
	 * });
	 * await modal.present();
	 * await modal.onDidDismiss();  // Wait for close modal
	 **/

	await AdMob.requestTrackingAuthorization();
}

console.log("ADMOB 3");

const authorizationStatus = await AdMob.trackingAuthorizationStatus();
if (
	authorizationStatus.status === 'authorized' &&
	consentInfo.isConsentFormAvailable &&
	consentInfo.status === AdmobConsentStatus.REQUIRED
) {
	await AdMob.showConsentForm();
}

console.log("ADMOB 4");

}

In the Xcode log:
Failed to resolve host network app id to config: bundleID: com.apple.WebKit.Networking instance ID: Optional([_EXExtensionInstanceIdentifier: 3FA5BA8A-9F8F-4685-943B-89C692074255])
:high_voltage: Loading app at capacitor://localhost…
Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Updating selectors failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
Updating selectors after delegate addition failed with: Error Domain=NSCocoaErrorDomain Code=4099 “The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.” UserInfo={NSDebugDescription=The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated: failed at lookup with error 3 - No such process.}
-[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] Can only perform input operation for an active session. sessionID = 9865C411-7CC6-4BC7-A5BC-BCB75FACC18D
-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 9865C411-7CC6-4BC7-A5BC-BCB75FACC18D
-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 9865C411-7CC6-4BC7-A5BC-BCB75FACC18D
-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 9865C411-7CC6-4BC7-A5BC-BCB75FACC18D
:high_voltage: To Native → AdMob initialize 37660066
:high_voltage: TO JS {}
:high_voltage: WebView loaded
:high_voltage: [log] - PixiJS 5.3.12 - WebGL 1 - http://www.pixijs.com/
Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 “(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)” UserInfo={NSLocalizedFailureReason=(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)}>
0x11104e340 - ProcessAssertion::acquireSync Failed to acquire RBS assertion ‘WebKit Media Playback’ for process with PID=36654, error: Error Domain=RBSServiceErrorDomain Code=1 “(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)” UserInfo={NSLocalizedFailureReason=(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)}
Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 “(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)” UserInfo={NSLocalizedFailureReason=(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)}>
0x11104e400 - ProcessAssertion::acquireSync Failed to acquire RBS assertion ‘WebKit Media Playback’ for process with PID=36655, error: Error Domain=RBSServiceErrorDomain Code=1 “(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)” UserInfo={NSLocalizedFailureReason=(originator doesn’t have entitlement com.apple.runningboard.assertions.webkit AND originator doesn’t have entitlement com.apple.multitasking.systemappassertions)}
:high_voltage: To Native → AdMob trackingAuthorizationStatus 37660067
:high_voltage: [log] - ADMOB 1
:high_voltage: To Native → AdMob requestConsentInfo 37660068
:high_voltage: TO JS {“status”:“notDetermined”}
ERROR MESSAGE: {“message”:“Request consent info failed”,“errorMessage”:“Request consent info failed”}
:high_voltage: [error] - {“message”:“Request consent info failed”,“errorMessage”:“Request consent info failed”}
AddInstanceForFactory: No factory registered for id <CFUUID 0x6000002c8040> F8BB1C28-BAE8-11D6-9C31-00039315CD46
Google:HTML 48 required SKAdNetwork identifier(s) missing from Info.plist. See [Enable SKAdNetwork to track conversions] (Privacy strategies  |  iOS  |  Google for Developers).
-[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = 9865C411-7CC6-4BC7-A5BC-BCB75FACC18D

Thanks again!

1 Like
4

Managed to uncover part of the solution…needed to create an IDFA explainer on AdMob. The adventure continues…

5

Any updates? I’m getting the “Request consent info failed” log.

6

For me, the import kept failing until I realized my project wasn’t properly set up to handle ES modules in vanilla JS. Switched to using require style for that plugin and it worked. I also tried integrating a monetization SDK in a small test—super smooth once the imports are sorted.