Unable to request permissions both on iOS and Android

[mry-bigweb]

Describe the bug I'm building an app using capacitorjs and react and your plugin to scan barcodes. The call to request permissions never returns, and it never prompts me for permissions. The issue is the same in Android.

const status = await BarcodeScanner.checkPermission({ force: true });

I have used your plugin before not too long ago. This was version 2.1.1, with capacitorjs 3.5.1, and when i install this version on my iPhone it still works just fine.

The plugin works in the browser, it opens the camera and i can hold up a QR code in front of the integrated webcam on my laptop and it scans the code.

When i try and hit the 'scan' button in my app even though I haven't been prompted for permissions it throws an error in the console:

{"code":"UNIMPLEMENTED"}

To Reproduce I have actually followed your guide pretty accurately. The code that i'm using is the same as in the old app where it still works.

Expected behavior The camera should open and be ready to scan barcodes.

Screenshots If applicable, add screenshots to help explain your problem.

This is called when the app starts (note the log statements):

This is the output in the Xcode console:

Info.plist file:

My scanner component. It triggers the scanner when the page is navigated to.

import React, { FunctionComponent, useEffect } from 'react';
import styled from 'styled-components';
import { ArrowLeftIcon, SmallRoundButton } from '@ticketcase-next/core-ui';
import { useNavigate } from 'react-router-dom';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
import { BackButton } from '../back-button';

const ScannerPageContainer = styled.div`
  ...
`;

const Target = styled.div`
  ...
`;

export type ScannerProps = {
  scanResult: (result: string) => void;
};

const Scanner: FunctionComponent<ScannerProps> = ({ scanResult }) => {
  const navigate = useNavigate();

  useEffect(() => {
    const startScan = async () => {
      console.log('Start scan');

      await BarcodeScanner.hideBackground();
      const result = await BarcodeScanner.startScan();
      console.log('RESULT', result.content);

      if (result.hasContent) {
        scanResult(result.content || '');
      }
    };

    startScan().catch((error) => {
      console.log('CAUGHT ERROR', error);
    });
  }, [scanResult]);

  const cancel = async () => {
    await BarcodeScanner.stopScan();
    await BarcodeScanner.showBackground();

    navigate('/');
  };

  return (
    <ScannerPageContainer>
      <Target />
      <BackButton onClick={cancel} />
    </ScannerPageContainer>
  );
};

export default Scanner;

I have tried comparing the two ios projects. The only difference i can spot is in the Podfile. I am not a native ios or android developer so i don't know exactly what i'm looking at, but there is a difference in the listed pods. Don't know if that's intentional. I have tried adding the missing line as i could see the podspec file for the CapacitorCommunityBarcodeScanner being present in the node_modules folder, but the line is removed when i run cap sync ios

Old (2.1.1):

platform :ios, '12.0'
use_frameworks!

# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
 **pod 'CapacitorCommunityBarcodeScanner', :path => '../../node_modules/@capacitor-community/barcode-scanner'**
end

target 'App' do
  capacitor_pods
  # Add your Pods here
end

New (4.0.1):

platform :ios, '13.0'
use_frameworks!

# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  pod 'Capacitor', :path => '../../../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../../../node_modules/@capacitor/ios'

end

target 'App' do
  capacitor_pods
  # Add your Pods here
end

Version 4.0.1 I have also tried a re-write to the latest v5 beta version, but i get the same issue.

Desktop (please complete the following information):

• OS: macOS Ventura 13.2.1
• Browser: Chrome
• Version: 114

Smartphone (please complete the following information):

• Device: iPhone 11
• OS: iOS 16.2
• Browser: -
• Version: -

Hope you are able to help. Thank you.

[Elvinca]

Having the same issue.. Any updates, please ?

[thegnuu]

Sorry guys, somehow I missed this issue.

This error is usually not related to the plugin itself, it is typically the result of an "improper" capacitor setup of the complete project. This usually happens after updating Capacitor to a new version or something like this and missing a few steps. First of all, you should check if the project is set up according to the capacitor docs and maybe try to remove and re-add your Android and iOS parts. Cleaning your node_modules and adding the latest packages is a good idea as well.

Unfortunately, it is impossible for me to help without to have a look at the complete project.

[hellmediadev]

I have the same issue after a capacitor update. No idea what I should do to "check if the project is set up according to the capacitor docs". I mean, I have a project which once worked and now doesn't after updating capacitor - so the project setup should not be the problem in general. Do you have any hints for trouble shooting?

[thegnuu]

I am happy to help you guys, but I am not able to do so with a project that I cannnot check out... I have my dev env that I use and I have no issues so far, if you want me to help you, I need your code base to have a look at it.

[mry-bigweb]

For me it was related to using NX for a monorepo.

I had installed all the capacitor related dependencies in the root node_modules, which apparently causes problems when copying to respective mobile platforms.

I added a package.json file inside the specific app directory for the mobile app, and just added the needed capacitor dependencies in here and it started working.

The package.json inside the app directory is just:

{
  "name": "ticketcase-app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@capacitor-community/barcode-scanner": "^4.0.1",
    "@capacitor/android": "^5.0.5",
    "@capacitor/cli": "^5.0.5",
    "@capacitor/core": "^5.0.5",
    "@capacitor/ios": "^5.0.5"
  }
}

[hellmediadev]

@thegnuu Yannik, I would like to send you my project - I am sure you can help me. How can I send it to you?

[thegnuu]

@hellmediadev you can find my email on my profile!