Capacitor: Including Plugins in client side javascript without import syntax

Capacitor
1

Hi there,
I’m new here and this is my first posting.
My home is web development and I was happy when I found Capacitor as it makes it possible to make Android and iOS Apps based on HTML, CSS and Javascript. So I went ahead and started to create my first app.

One of the first problems I encountered is that Capacitor uses import syntax for including plugins which is not available in client side javascript. I searched for a workaround and found browserify.js
Is working so far after I understood it but I would prefer a better solution. Use Ionic? Or develop in node.js?
Currently I need to have access to the file system. Found the file system API and I’m unsure if I should stick to browserify or use an alternative.
Any hints are welcome, thanks in advance.
Best regards, Ulrich

2

Hello Ulrich,

if you setup your development environment for ionic correctly you can use import syntax. I recommend visual studio code with the ionic extension, but you can also use the terminal API of ionic to build the app. Then ionic will do all imports and build an app bundle.

Best Jannis

3

Hi Jannis,
I tried to go with Ionic.

  • Installed extension in VS Code - no more errors are indicated when using the import statement - fine

  • Installed Ionic in my app folder by use of npm - worked

However, when running the app in Android Studio and view the console by use of the inspect feature of chrome, still the following error is reported:
“SyntaxError: Cannot use import statement outside a module”
What am I missing now?
Best regards, Ulrich

PS: My javascript:

<body>
    Hallo Welt!
    <button>Fill Database</button>
    <section class="substances"></section>
    <!-- <script src="bundle.js"></script> -->
    <script>
        import { CapacitorSQLite } from '@capacitor-community/sqlite';
        import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
        // custom javascript here

Edit: I forgot something important: I have to include Ionic itself by these lines:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

as described here:

But no success, I keep getting “SyntaxError: Cannot use import statement outside a module”

4

I think you are trying to write code in the android or public folder is that right?

Only the code in the src folder will packed to bundle and the import statement will be solved.

I only experience in an ionic react app. Maybe it’s different with another framework/vanilla but I think it’s not.

5

Not in the android folder. I created a web folder above the project folder like this:
ionic-import-issue

substancen-app is the web folder and my index.html containing the javascript resides in it.
I referenced this folder in capacitor.config.json

{
  "appId": "io.ionic.starter",
  "appName": "substances-ionic",
  "webDir": "..\\substanzen-app",
  "server": {
    "androidScheme": "https"
  }
}
6

Screenshot of the devtools in Chrome

devtools
devtools1029×556 44 KB

7

Here is our folder structure are

image
image1170×2532 294 KB

Our App is in the src folder ios, android and public is mainly handled from ionic.

And here is our config:

image
image1170×2532 374 KB

I wasn’t the developer that doesn’t init the project folder in our app, so I’m not a perfect help.

Unfortunately the response time in this forum is very high.
I think our folder structure is a standard react structure, so I’m not sure with your architecture.

8

The bundle.js file you have out comment should be the app from the build process.
Did you place your code in index.html? Which framework do you use?

9

Hi Jannis,
many thanks for your support, I appreciate it.
Apart from Ionic, which I added today, I do not use any framework.
bundle.js was created by browserify.js. I used it as a workaround as it was not possible to use import syntax. After switching to Ionic I assumed it’s no longer necessary and therefore I commented it out.

10

Ok, I understand.

I can only say that the import statements need to solved from a build system like webpack. In a ionic react app it’s included.

A tutorial for vanilla js is missing in the guidelines from ionic. ;(

Maybe you find some helpful third party tutorials.

11

I hoped that Ionic would do the job, but it seems to me that it does not.

12

Just by adding Ionic libraries to your project that doesn’t make it be an Ionic project with all the Ionic apps benefits.

When you create a new Ionic project using Ionic CLI, it creates a project that uses typescript, has a bundler configured such as vite or webpack depending on the framework you’ve chosen, etc.
By adding the Ionic libraries to an existing project you don’t get any of those.

If you want to use the import syntax you need a bundler, I think vite is the simpler and all major frameworks seems to be moving to using it.
You also need to specify that the javascript is a “module”, so if you use it in index.html you have to add this to your script tag:

<script type="module">
  /* JavaScript module code here */
</script>

Or if you want to use it in a separate javascript file, then it should look like <script type="module" src="myimportcode.js"></script>

If you don’t want to use the import syntax and you don’t target web, you can still use plugins like this.

Capacitor.Plugins.PluginName.pluginMethod()
real example
Capacitor.Plugins.Device.getInfo().

But you still need a bundler that copies the plugin files from node_modules to your app.

13

Hi julio-ionic

thanks for these hints.

In the meantime I struggled a lot with this subject and finally the developer of the capacitor blobwriter plugin helped me out:

There are bundled javascript files available for capacitor that can be included by a simple script tag.

Perfect solution for a humble developer like me whose skills are not sufficient for using complex frameworks like inoic!

Best regards, Ulrich