I have a basic app written in pure javascript (index.html, script.js) which i put into a CapacitorJs project to let me create ios/android apps. which work perfectly fine even on my phone.
But now i'm trying to use a capacitor community plugin (@capacitor-community/contacts) but i need to import it in my script.js like this
import { Contact, Contacts, NewContact } from '@capacitor-community/contacts';
Since i'm not using typescript it obviously throw an error.
How can i manage to make it work ?
I have tried to import it through a <script type="module"> on my index.html and assign it to the js global window variable to access it in my script.js but it doesn't work.
I have also tried to convert my scripts.js to a typescript and compile it with the following config:
{
"target":"es5",
"module":"es2015",
"moduleResolution:"node"
}
And to make it work, had to change the import string to:
import { Contact, Contacts, NewContact } from '../../nodes_modules/@capacitor-community/contacts';
But then i get an error on the console saying TypeError: 'text/html' is not a valid Javascript MIME type
"target":"commonjs",
But got error with "define" not being recognized in the browser.
"bundledWebRuntime": true, that basically compile capacitor core files into a .js that you import in your index.html. But it doesn't include community packages so it's not a solution.It has nothing to do with typescript. Your project must be declared to use ES modules, in order to use features such as import. I'm a bit unclear on your exact setup, but if you have a package.json, then try adding this to it:
{
...
type: "module",
}
If you just have a basic setup, i.e. html page with a js file in a script tag, you should be able to get it to work by declaring your js file as a module like this:
<script type="module" src="main.js"></script>