Using Cordova Plugin in Ionic 7 / Capacitor 5

Ionic Framework
1

Hi, I have a Ionic project with these Ionic and Capacitor versions:

"@capacitor/android": "^5.6.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.6.0",
"@capacitor/filesystem": "^5.2.0",
"@capacitor/haptics": "5.0.6",
"@capacitor/keyboard": "5.0.7",
"@capacitor/status-bar": "5.0.6",
"@ionic/vue": "^7.0.0",
"@ionic/vue-router": "^7.0.0",

Should I be able to use Cordova plugins? I see no compilation errors, but when I run the app in an Android device, I see the ReferenceError: cordova is not defined in the app logs.

For the record, the Cordova plugin is this: GitHub - qu-beyond/sockets-for-cordova: Cordova plugin for socket network communication

My compilation steps:

npm run build
npx cap sync

Thanks!

2

For the record, I was able to solve the problem.

Here the steps:

  1. Install the plugin with npm npm i @qu-beyond/sockets-for-cordova
  2. Add the cordova plugin (following Cordova documentation ) npx cordova plugin add sockets-for-cordova
  3. The plugin doesn’t work with the default vite config because it’s CommonJS, so add npm i --save-dev @rollup/plugin-commonjs
  4. Edit vite.config.ts:
// ...
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
     commonjs(),
  ],
  // ...
})
3

If you are using Capacitor, don’t install Cordova plugins with npx cordova plugin add, use npm install instead.

4

I did just that (npm install) at first, but for some reason the plugin wasn’t picked up in the Android project resulting in the reference error… Idk if this problem is specific to this plugin. As now I don’t have the time to try in a new and clean project.

Another note: I had problems (it couldn’t find the plugin’s default export) when I ran the project with Vite dev server, I had to add also:

  optimizeDeps: {
    include: [
      'sockets-for-cordova/**/*.js',
    ],
  },

to vite.config.ts