Capacitor V3 integration

I have an Aurelia V1 app that integrates with Capacitor V2. It uses the Aurelia CLI bundler and works fine.
I am in process of upgrading to Capacitor V3 and the Capacitor plugins aren’t loading.

I created a sample Aurelia app that just uses the Device plugin.
When the calls a Device method, the following exception is thrown.

Failed to fetch dynamically imported module: http://localhost:9000/scripts/web

Does anyone have any troubleshooting ideas?
TIA

Shooting in the dark here, but could it be some resources need to be copied into the dist folder that its looking for at scripts/web?

I’m pretty sure it’s a CLI Bundler issue. The Capacitor plugin classes are not bundled.
The error occurs when a plugin class tries to instantiate a plugin class.

Here’s the code in vendor-bundle.js

  var Device = (0, _core.registerPlugin)('Device', {
    web: function web() {
      return import('./web').then(function (m) {
        return new m.DeviceWeb();
      });
    }
  });

Also, the DeviceWeb class is not in the bundle.

Using “Aurelia 2 with the Dumber” bundler or WebPack (Au V1 or V2) seems to work.
Here’s the code in entry.bundle.js

const Device = (0, _core.registerPlugin)('Device', {
  web: () => imp0r_('./web').then(m => new m.DeviceWeb())
});

The DeviceWeb class is include in the bundle.
The imp0r_ function is defined as:

var imp0r_ = function(d){return requirejs([requirejs.resolveModuleId(module.id,d)]).then(function(r){return r[0];});

I got it working by prepending capacitor.js and adding a manual dependency in the aurelia.json file.

      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/regenerator-runtime/runtime.js",
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/@capacitor/core/dist/capacitor.js",
          "node_modules/requirejs/require.js"
        ],
        "dependencies": [
          "aurelia-bootstrapper",
          "aurelia-loader-default",
          "aurelia-pal-browser",
          {
            "name": "aurelia-testing",
            "env": "dev"
          },
          {
            "name": "@capacitor/device",
            "path": "../node_modules/@capacitor/device/dist",
            "main": "plugin.cjs.js"
          },
          "text"
        ]
      }
2 Likes