Capacitor V3 integration

Framework Knowledge
1

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

2

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?

3

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];});

4

I got it working by adding manual references 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"
        ]
      }
5

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