How to Fix Quasar + Cordova Project QR Code Scanner Plugin Error During the Build?

Fix Quasar + Cordova Project QR Code Scanner Plugin Error During the Build

During the build (quasar build -m android), you may received this error message: ENOENT: no such file or directory, open 'C:\PROJECT_FOLDER\my-project\src-cordova\platforms\android\app\src\main\res\values\colors.xml'

This error message is related to a missing colors.xml file in your Android project's resource directory. Here's how you can fix this issue.

1. Make sure that you have the cordova-plugin-qrscanner plugin installed in your project. You can install it using the following command.

cordova plugin add cordova-plugin-qrscanner

2. After the plugin is installed, navigate to the plugins/cordova-plugin-qrscanner/src/android directory in your project folder.

3. Open the QRScanner.java file in a text editor.

4. Locate the initialize method in the QRScanner class.

5. Comment out or remove the following lines of code from the initialize method.

Resources res = cordova.getActivity().getResources();
int colorPrimary = res.getIdentifier("colorPrimary", "color", cordova.getActivity().getPackageName());
int colorPrimaryDark = res.getIdentifier("colorPrimaryDark", "color", cordova.getActivity().getPackageName());

These lines of code are trying to access the colorPrimary and colorPrimaryDark values in your project's colors.xml file, which is the file that is missing in your project.

6. Save the QRScanner.java file and close it.

7. Rebuild your Android project using the following command.

cordova build android

This should resolve the error that you were seeing and allow you to build your project successfully.

Note that commenting out the code that accesses colors.xml might affect the visual appearance of the QR scanner view in your app. If you want to customize the appearance of the QR scanner view, you can modify the qrscanner_view.xml file in the src-cordova/platforms/android/res/layout directory.

BarcodeBC.com provides mature .NET QR Code scanning solutions, like Scan QR Code in .NET Applications and Scan QR Code from PDF File in .NET Applications. Click to see more details if you are interested.

QR Code Scanner Cordova Plugin Not Working on Android with Capacitor

If you are using the cordova-plugin-qrscanner plugin with Capacitor, you might run into some issues due to differences in the way Capacitor and Cordova handle plugins. Here are a few things you can try to get the QR code scanner working with Capacitor.

1. Make sure that you have installed the cordova-plugin-qrscanner plugin using the npm package manager. To do this, run the following command in your project directory.

npm install cordova-plugin-qrscanner

2. If you haven't done so already, install the cordova command-line interface (CLI) globally on your system. You can do this by running the following command.

npm install -g cordova

3. Add the Android platform to your project using the following command.

cordova platform add android

4. Make sure that you have the cordova-android package installed in your project. You can install it using the following command.

cordova platform add android

5. After installing the plugin, add the following lines to the capacitor.config.json file in your project.

"cordova": {
  "preferences": {
    "AndroidXEnabled": true
  }
}

This will enable the AndroidX compatibility mode, which is required by some Cordova plugins.

6. In your component where you want to use the QR code scanner, add the following code to request permission to use the camera.

import { Plugins, Capacitor } from '@capacitor/core';
const { Permissions } = Plugins;

async function requestCameraPermission() {
  const permissionStatus = await Permissions.requestPermission('camera');
  return permissionStatus.state === 'granted';
}

7. After requesting permission to use the camera, you can use the cordova-plugin-qrscanner plugin to scan QR codes. Here's an example of how to use the plugin.

import { Plugins, Capacitor } from '@capacitor/core';
const { QRScanner } = Plugins;

async function scanQRCode() {
  await QRScanner.prepare();
  await QRScanner.show();
  const result = await QRScanner.scan();
  console.log(result);
  await QRScanner.hide();
}

Note that the prepare method is used to prepare the QR scanner for use, and the show and hide methods are used to show and hide the scanner view. The scan method is used to actually scan the QR code, and it returns a promise that resolves with the scanned data.

By following these steps, you should be able to use the cordova-plugin-qrscanner plugin with Capacitor on Android.