Error while creating a custom plugin

[dhavalkshah]

Hi All,

As newbie to Capacitor, I was trying to create a custom plugin
Reference : here

Used command npx @capacitor/cli plugin:generate to generate a new plugin

Followed by npm run build

While I run the build command, I get the following output

rujiri@dhaval-ThinkPad-T440s:~/test/eschool-helper$ npm run build

> eschool-helper@0.0.1 build /home/rujiri/test/eschool-helper
> npm run clean && tsc && rollup -c rollup.config.js


> eschool-helper@0.0.1 clean /home/rujiri/test/eschool-helper
> rimraf ./dist


dist/esm/index.js → dist/plugin.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
dist/esm/web.js
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
2:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3:     return new (P || (P = Promise))(function (resolve, reject) {
...and 1 other occurrence
created dist/plugin.js in 43ms
rujiri@dhaval-ThinkPad-T440s:~/test/eschool-helper$

here is the node and npm versions:

rujiri@dhaval-ThinkPad-T440s:~/test/eschool-helper$ npm --version
6.14.5
rujiri@dhaval-ThinkPad-T440s:~/test/eschool-helper$ node --version
v12.18.2

When I look into the generated file dist/plugin.js, it looks like:

var capacitorPlugin = (function (exports, core) {
    'use strict';

    var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
...........

Whereas the dist/web.js seems to be fine with following

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
..........................

Thanks in advance

[imhoffd]

@dhavalkshah Luckily that's just a warning. It's safe to ignore. If you'd like to get rid of it, you can change target in tsconfig.json to es2017 (that's what we're doing in Capacitor 3 anyway, see #3320).

FYI dist/plugin.js is the bundled version of your plugin (exported to window) and dist/esm is for Capacitor apps that use a bundler and import your plugin.

[dhavalkshah]

Thanks for the quick reply.
Setting "target": "es2017" did the trick

But,
The content of plugin.js has changed drastically. I guess moving towards ES8

Also, as you stated, dist/plugin.js is exported to window, thus will be the one used in Web-App. (in my case ionic PWA)
Will ES6 generated plugin.js (with undefined) not create a problem?

Please correct my understanding wherever required

Thanks

[imhoffd]

Capacitor (and especially Capacitor 3) requires ES2017, which works on pretty much every browser except IE11. If devs need to support IE11, they shouldn't use Capacitor.