Failed to load plugin 'import' declared in '../pluginpackage.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'

[enricodeleo]

Whenever I try to build the src with npm run build I get no errors at build time but I do in my application when importing the plugin with the error:

Failed to load plugin 'import' declared in '../pluginpackage.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'

Is it just me?

I run node v15.13.0 and npm 7.7.6

[adamsloma]

I had this same issue simply following the Capacitor Docs guide using Vue/Ionic and it seems that for me that was the issue. I tried it with React and had no problems. I'm guessing it has something to do with how Vue/Ionic is linting? It doesn't seem to like the Capacitor Plugin boilerplate code as a dependency. Were you having this issue with a different framework too or were you also using Vue?

[jake-newsom]

Having the same issue with a fresh start on a Vue app.

[jake-newsom]

To provide further details, here's the exact steps I took (which are super minimal) to recreate the issue:

I just started from total scratch, so first I made a new Ionic app via ionic start kcmapp blank --vue once that completed, I opened the folder and ran npm install

Then I started the capacitor plugin project via npm init @capacitor/plugin ... once that completed I opened the folder and ran npm install followed by npm run build

Back in the ionic project, I ran npm install ../kcm-video-recorder (the directory the capacitor plugin sits in) ... which works fine. In the Home.vue file, I added import {KcmVideoRecorder} from 'kcm-video-recorder'; and then on mounted, I added console.log(KcmVideoRecorder.echo({value:"test"}));

Now when I run ionic serve I get this error:

Syntax Error: Error: Failed to load plugin 'import' declared in '..\kcm-video-recorder\package.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'[vue-cli-service] Require stack:
[vue-cli-service] - C:\Users\Jake\Documents\Code\kcmapp\__placeholder__.js
[vue-cli-service] Referenced from: C:\Users\Jake\Documents\Code\kcm-video-recorder\node_modules\@ionic\eslint-config\recommended.js

[jcesarmobile]

There are two problems:

1. Capacitor plugins use eslint 7 while vue uses eslint 6 and eslint 6 doesn't seem to understand the import plugin. You can install eslint 7 in your app, but that could cause issues with other vue tooling that seems to require eslint 6.
2. eslint is linting your plugin and it shouldn't, it should only lint your app. You can create a .eslintignore file and put your plugin name/package/folder on it so it's not linted.

2 only worked for me after doing 1 too, not sure if .eslintignore doesn't work on eslint 6, there might be other ways of making eslint not lint your plugin, but I don't know much about eslint.

Looks like vue tooling already uses eslint 7 in the dev branch, so hopefully this will be fixed on their next release.

Closing since it's not a bug in the generator.

[dm-grinko]

I have removed the eslint 7 from my capacitor plugin. It worked. Thanks @jcesarmobile.