Capacitor plugin, missing something?

[franse]

Capacitor 5.3.0
I want to apologize for my low understanding here.

I’m trying to install some capacitor plugins but I found some troubles:

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

import { Network } from '@capacitor/network';

Network.addListener('networkStatusChange', status => {

    console.log('Network status changed', status);

});

const logCurrentNetworkStatus = async () => {

    const status = await Network.getStatus();

    console.log('Network status:', status);

};

Uncaught TypeError: Failed to resolve module specifier "@capacitor/network". Relative references must start with either "/", "./", or "../".

So I went to the forum and:

If you don’t want to use a bundler/framework, you can set "bundledWebRuntime": true in capacitor.config.json . 
That generates a capacitor.js file you can link in your app’s index.html.
That way you can use Capacitor object directly, which includes a Plugins object that contains all plugins.
So you can use the plugins like Capacitor.Plugins.StatusBar.hide();

But:

<script src="capacitor.js"></script>
capacitor.js net::ERR_ABORTED 404 (Wappler: Not Found)

Because indeed, there’s no capacitor.js on the Wappler project.

There’s a step I’m missing here?
Thanks.

[franse]

Well I see that bundledWebRuntime is deprecated, we can’t do it on a Wappler way anymore.

@cgrulke

Since whatever bundler either Wappler or Capacitor was using is now deprecated, you have to install another one like Webpack manually

Still can’t get this working.

Btw this is not working anymore on Capacitor 5.3.0:

Using Capacitor Camera Plugin

Intro The Camera Plugin provides the ability to take a photo with the camera or choose an existing one from the photo album for your mobile and desktop apps. In this tutorial we will show you how to use the plugin in order to take a photo and display it on your page. Page Setup We’ve create a really simple page containing a button and an image element: [Screenshot_2] We will use the button to trigger the camera or photo selector. Adding Camera Plugin First we need to add a page flow to ou…

[George]

For what platform are you having troubles with Capacitor?

What troubles and errors do you get exactly? Have you tried to run in the emulator?

In general there is no need for tools like webpack or other bundles in the mobile apps in Wappler when you use the supplied plugins.

We are actually using the option bundledWebRuntime just for that to indicate we don’t use any bundlers. So it should work all fine without any and it is not a problem that the option is deprecated.

[franse]

Hi George,

@George

For what platform are you having troubles with Capacitor?

For any platform on a framework7/bootstrap project, doesn’t make the diference (w10) .

@George

What troubles and errors do you get exactly? Have you tried to run in the emulator?

The error I’m getting debugging the app (on the emulator, app, or browser):

@franse

Uncaught TypeError: Failed to resolve module specifier "@capacitor/network". Relative references must start with either "/", "./", or "../".

On the ionic forum says that since v5 we must use another bundler (if I’m not wrong was posted by the team as a solution)

[franse]

Just in case @George

1. Create a capacitor project and update everything.
2. npm install @capacitor/network
3. npx cap sync

There’s no chance I can get a simple getStatus() working.
I’m just wan’t to know, if I’m missing something. I got all working on an old cordova project.

[George]

You can use the browser component for network info.

And I think we have more capacitor plugins coming up as well, which other do you need?

[franse]

Well, the network plugin was just an example, was my simplest attempt to make it work.

What I need for the moment:
https://capacitorjs.com/docs/apis/share
https://www.npmjs.com/package/capacitor-sms-inbox
https://capacitorjs.com/docs/apis/local-notifications
https://www.npmjs.com/package/@capacitor-community/barcode-scanner
https://capacitorjs.com/docs/apis/device

I know there are many others (natives and from third party) that I assume the community will be pleased to have.
Don’t know why I get too difficult to implement on this capacitor version. I was able to manage it with no problems in the past.

Also, consider that the integrated camera plugin doesn’t work anymore on capacitor 5.3.0 (Please someone confirm this)

Thanks for reading George.

[George]

We have the most core plugins already ready for release and will be releasing extensibility guide so you can package and install other capacitor plugins and build your own integration in app connect so that they natively integrate with app connect data and events.

[patrick]

@franse

Well I see that bundledWebRuntime is deprecated, we can’t do it on a Wappler way anymore.

I hope they don’t remove it soon since we depend on it with our App Connect plugins.

@franse

Because indeed, there’s no capacitor.js on the Wappler project.

The capacitor.js file is being generated by Capacitor when you build the app and you have the bundledWebRuntime options set.

---

The way we implemented the plugins is as follows (it depends on the config bundledWebRuntime being set to true).

Install the plugin using

npm install @capacitor/network

Copy the file node_modules/@capacitor/network/dist/plugin.js into your www folder. I copied mine to www/plugins/network/plugin.js.

In your html make sure both js files are included:

<script src="capacitor.js"></script>
<script src="plugins/network/plugin.js"></script>

You can access the plugin api from Capacitor.Plugins.Network.

I’ve added following script to my page to set the status to a global App Connect variable:

<script type="module">
  dmx.global.set('networkStatus', await Capacitor.Plugins.Network.getStatus());
</script>

I use type module to allow use of await, with a normal script block you can use:

<script>
  Capacitor.Plugins.Network.getStatus().then(status => {
    dmx.global.set('networkStatus', status);
  });
</script>

In the page I can use {{networkStatus.connectionType}} and {{networkStatus.connected}}.

We currently highly rely on the bundledWebRuntime to not need a bundler to build the app.

[franse]

@George

We have the most core plugins already ready for release and will be releasing extensibility guide so you can package and install other capacitor plugins and build your own integration in app connect so that they natively integrate with app connect data and events.

Thanks George, I really appreciate the effort from all the team.

@patrick Thanks for the detailed post! I recreate step by step and:

What do you mean with:

@patrick

In your html make sure both js files are included:

<script src="capacitor.js"></script>
<script src="plugins/network/plugin.js"></script>

There’s no capacitor.js

@patrick

The capacitor.js file is being generated by Capacitor when you build the app and you have the bundledWebRuntime options set.

npx cap sync web doesn’t copy capacitor.js anymore since 5.0.0

From: Capacitor docs:

bundledWebRuntime?: boolean;

 /**
   * Whether to copy the Capacitor runtime bundle or not.
   *
   * If your app is not using a bundler, set this to `true`, then Capacitor
   * will create a `capacitor.js` file that you'll need to add as a script in
   * your `index.html` file.
   *
   * It's deprecated and will be removed in Capacitor 6
   *
   * @since 1.0.0
   * @deprecated 5.0.0
   * @default false
   */

[patrick]

@franse

There’s no capacitor.js

Check if the file is in node_modules/@capacitor/core/dist/capacitor.js and copy it from there to the www folder.

[franse]

@patrick

Check if the file is in node_modules/@capacitor/core/dist/capacitor.js and copy it from there to the www folder.

That was an attemp and for some reason was not working.
But, after trying everything (I have like 30 different projects) I found if I change the dmxAppConnect.js from stable to beta, (manually cause I can’t use the updater on beta 8, already reported) the console error dissapear.
it’s working as expected!!!
Thanks @patrick, and of course all the team.
You can’t imagine how grateful I am

[Rubens_Bentes_da_Sil]

I’m having the same difficulty, but with the Push Notification plugin, did you use this feature?

[Teodor]

This is now fixed in Wappler 6.0.3