Warning of require cycle using code similar to the example

[BeeMargarida]

Using the code as example, this warning always appear:

Require cycle: node_modules/vision-camera-code-scanner/src/index.ts -> node_modules/vision-camera-code-scanner/src/hook.tsx -> node_modules/vision-camera-code-scanner/src/index.ts

The code being used:

import React from "react";
import { Camera, useCameraDevices } from "react-native-vision-camera";
import { useScanBarcodes, BarcodeFormat } from "vision-camera-code-scanner";

export function CameraWrapper(props) {
    const [hasPermission, setHasPermission] = React.useState(false);

    const devices = useCameraDevices();
    const device = devices.back;

    const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
        checkInverted: true
    });

    React.useEffect(() => {
        (async () => {
            const status = await Camera.requestCameraPermission();
            setHasPermission(status === "authorized");
        })();
    }, [props]);

    React.useEffect(() => {
        if (barcodes.length === 0) return;
        console.log(barcodes);
    }, [barcodes]);

    return (
        device != null &&
        hasPermission && (
            <Camera
                style={props.style}
                device={device}
                photo={true}
                audio={false}
                isActive={true}
                frameProcessor={frameProcessor}
                frameProcessorFps={props.fps || 5}
            />
        )
    );
}

[berseck]

An easy solution:

diff --git a/node_modules/vision-camera-code-scanner/src/hook.tsx b/node_modules/vision-camera-code-scanner/src/hook.tsx
index 0758e86..c47ccfa 100644
--- a/node_modules/vision-camera-code-scanner/src/hook.tsx
+++ b/node_modules/vision-camera-code-scanner/src/hook.tsx
@@ -2,7 +2,8 @@ import { Frame, useFrameProcessor } from 'react-native-vision-camera';
 import { useState } from 'react';
 import { runOnJS } from 'react-native-reanimated';

-import { Barcode, BarcodeFormat, CodeScannerOptions, scanBarcodes } from '.';
+import { Barcode, BarcodeFormat, CodeScannerOptions } from './types';
+import { scanBarcodes } from './scan-barcodes';

 export function useScanBarcodes(
   types: BarcodeFormat[],
diff --git a/node_modules/vision-camera-code-scanner/src/index.ts b/node_modules/vision-camera-code-scanner/src/index.ts
index 6d15921..f3c03f9 100644
--- a/node_modules/vision-camera-code-scanner/src/index.ts
+++ b/node_modules/vision-camera-code-scanner/src/index.ts
@@ -1,311 +1,3 @@
-import type { Frame } from 'react-native-vision-camera';
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.BarcodeFormat
- */
-export enum BarcodeFormat {
-  UNKNOWN = -1,
-  ALL_FORMATS = 0,
-  CODE_128 = 1,
-  CODE_39 = 2,
-  CODE_93 = 4,
-  CODABAR = 8,
-  DATA_MATRIX = 16,
-  EAN_13 = 32,
-  EAN_8 = 64,
-  ITF = 128,
-  QR_CODE = 256,
-  UPC_A = 512,
-  UPC_E = 1024,
-  PDF417 = 2048,
-  AZTEC = 4096,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.BarcodeValueType
- */
-export enum BarcodeValueType {
-  UNKNOWN = 0,
-  CONTACT_INFO = 1,
-  EMAIL = 2,
-  ISBN = 3,
-  PHONE = 4,
-  PRODUCT = 5,
-  SMS = 6,
-  TEXT = 7,
-  URL = 8,
-  WIFI = 9,
-  GEO = 10,
-  CALENDAR_EVENT = 11,
-  DRIVER_LICENSE = 12,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Address.AddressType
- */
-export enum AddressType {
-  UNKNOWN = 0,
-  WORK = 1,
-  HOME = 2,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Address
- */
-export interface Address {
-  addressLines?: string[];
-  type?: AddressType;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.PersonName
- */
-export interface PersonName {
-  first?: string;
-  formattedName?: string;
-  last?: string;
-  middle?: string;
-  prefix?: string;
-  pronunciation?: string;
-  suffix?: string;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.ContactInfo
- */
-export interface ContactInfo {
-  addresses?: Address[];
-  emails?: Email[];
-  name?: PersonName;
-  organization?: string;
-  phones?: Phone[];
-  title?: string;
-  urls?: string[];
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Email.FormatType
- */
-export enum EmailType {
-  UNKNOWN = 0,
-  WORK = 1,
-  HOME = 2,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Email
- */
-export interface Email {
-  address?: string;
-  body?: string;
-  subject?: string;
-  type?: EmailType;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Phone.FormatType
- */
-export enum PhoneType {
-  UNKNOWN = 0,
-  WORK = 1,
-  HOME = 2,
-  FAX = 3,
-  MOBILE = 4,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Phone
- */
-export interface Phone {
-  number?: string;
-  type?: PhoneType;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Sms
- */
-export interface Sms {
-  message?: string;
-  phoneNumber?: string;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.UrlBookmark
- */
-export interface UrlBookmark {
-  title?: string;
-  url?: string;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.WiFi.EncryptionType
- */
-export enum EncryptionType {
-  OPEN = 1,
-  WPA = 2,
-  WEP = 3,
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.WiFi
- */
-export interface Wifi {
-  encryptionType?: EncryptionType;
-  password?: string;
-  ssid?: string;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.GeoPoint
- */
-export interface GeoPoint {
-  lat?: number;
-  lng?: number;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.CalendarDateTime
- */
-export interface Date {
-  day: number;
-  hours: number;
-  minutes: number;
-  month: number;
-  rawValue: string;
-  seconds: number;
-  year: number;
-  isUtc: boolean;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.CalendarEvent
- */
-export interface CalendarEvent {
-  description?: string;
-  end?: Date;
-  location?: string;
-  organizer?: string;
-  start?: Date;
-  status?: string;
-  summary?: string;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.DriverLicense
- */
-export interface DriverLicense {
-  addressCity?: string;
-  addressState?: string;
-  addressStreet?: string;
-  addressZip?: string;
-  birthDate?: string;
-  documentType?: string;
-  expiryDate?: string;
-  firstName?: string;
-  gender?: string;
-  issueDate?: string;
-  issuingCountry?: string;
-  lastName?: string;
-  licenseNumber?: string;
-  middleName?: string;
-}
-
-/**
- * @see https://developer.android.com/reference/android/graphics/Rect.html
- */
-export interface Rect {
-  bottom: number;
-  left: number;
-  right: number;
-  top: number;
-}
-
-/**
- * @see https://developer.android.com/reference/android/graphics/Point.html
- */
-export interface Point {
-  x: number;
-  y: number;
-}
-
-/**
- * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode
- */
-export type Barcode = {
-  boundingBox?: Rect;
-  cornerPoints?: Point[];
-  displayValue?: string;
-  rawValue?: string;
-  format: BarcodeFormat;
-  content:
-    | {
-        type:
-          | BarcodeValueType.UNKNOWN
-          | BarcodeValueType.ISBN
-          | BarcodeValueType.TEXT;
-        data: string;
-      }
-    | {
-        type: BarcodeValueType.CONTACT_INFO;
-        data: ContactInfo;
-      }
-    | {
-        type: BarcodeValueType.EMAIL;
-        data: Email;
-      }
-    | {
-        type: BarcodeValueType.PHONE;
-        data: Phone;
-      }
-    | {
-        type: BarcodeValueType.SMS;
-        data: Sms;
-      }
-    | {
-        type: BarcodeValueType.URL;
-        data: UrlBookmark;
-      }
-    | {
-        type: BarcodeValueType.WIFI;
-        data: Wifi;
-      }
-    | {
-        type: BarcodeValueType.GEO;
-        data: GeoPoint;
-      }
-    | {
-        type: BarcodeValueType.CALENDAR_EVENT;
-        data: CalendarEvent;
-      }
-    | {
-        type: BarcodeValueType.DRIVER_LICENSE;
-        data: DriverLicense;
-      };
-};
-
-export interface CodeScannerOptions {
-  /**
-   * checkInverted: `Allows you to also scan white barcode with black backgrounds`
-   */
-  checkInverted?: boolean;
-}
-
-/**
- * Scans barcodes in the passed frame with MLKit
- *
- * @param frame Camera frame
- * @param types Array of barcode types to detect (for optimal performance, use less types)
- * @returns Detected barcodes from MLKit
- */
-export function scanBarcodes(
-  frame: Frame,
-  types: BarcodeFormat[],
-  options?: CodeScannerOptions
-): Barcode[] {
-  'worklet';
-  // @ts-ignore
-  // eslint-disable-next-line no-undef
-  return __scanCodes(frame, types, options);
-}
-
+export * from './types';
+export * from './scan-barcodes';
 export * from './hook';
diff --git a/node_modules/vision-camera-code-scanner/src/scan-barcodes.ts b/node_modules/vision-camera-code-scanner/src/scan-barcodes.ts
new file mode 100644
index 0000000..b20c53a
--- /dev/null
+++ b/node_modules/vision-camera-code-scanner/src/scan-barcodes.ts
@@ -0,0 +1,20 @@
+import type { Frame } from 'react-native-vision-camera';
+import { BarcodeFormat, CodeScannerOptions, Barcode } from './types';
+
+/**
+ * Scans barcodes in the passed frame with MLKit
+ *
+ * @param frame Camera frame
+ * @param types Array of barcode types to detect (for optimal performance, use less types)
+ * @returns Detected barcodes from MLKit
+ */
+export function scanBarcodes(
+  frame: Frame,
+  types: BarcodeFormat[],
+  options?: CodeScannerOptions
+): Barcode[] {
+  'worklet';
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  return __scanCodes(frame, types, options);
+}
\ No newline at end of file
diff --git a/node_modules/vision-camera-code-scanner/src/types.ts b/node_modules/vision-camera-code-scanner/src/types.ts
new file mode 100644
index 0000000..69ed66d
--- /dev/null
+++ b/node_modules/vision-camera-code-scanner/src/types.ts
@@ -0,0 +1,290 @@
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.BarcodeFormat
+ */
+ export enum BarcodeFormat {
+  UNKNOWN = -1,
+  ALL_FORMATS = 0,
+  CODE_128 = 1,
+  CODE_39 = 2,
+  CODE_93 = 4,
+  CODABAR = 8,
+  DATA_MATRIX = 16,
+  EAN_13 = 32,
+  EAN_8 = 64,
+  ITF = 128,
+  QR_CODE = 256,
+  UPC_A = 512,
+  UPC_E = 1024,
+  PDF417 = 2048,
+  AZTEC = 4096,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.BarcodeValueType
+ */
+export enum BarcodeValueType {
+  UNKNOWN = 0,
+  CONTACT_INFO = 1,
+  EMAIL = 2,
+  ISBN = 3,
+  PHONE = 4,
+  PRODUCT = 5,
+  SMS = 6,
+  TEXT = 7,
+  URL = 8,
+  WIFI = 9,
+  GEO = 10,
+  CALENDAR_EVENT = 11,
+  DRIVER_LICENSE = 12,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Address.AddressType
+ */
+export enum AddressType {
+  UNKNOWN = 0,
+  WORK = 1,
+  HOME = 2,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Address
+ */
+export interface Address {
+  addressLines?: string[];
+  type?: AddressType;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.PersonName
+ */
+export interface PersonName {
+  first?: string;
+  formattedName?: string;
+  last?: string;
+  middle?: string;
+  prefix?: string;
+  pronunciation?: string;
+  suffix?: string;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.ContactInfo
+ */
+export interface ContactInfo {
+  addresses?: Address[];
+  emails?: Email[];
+  name?: PersonName;
+  organization?: string;
+  phones?: Phone[];
+  title?: string;
+  urls?: string[];
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Email.FormatType
+ */
+export enum EmailType {
+  UNKNOWN = 0,
+  WORK = 1,
+  HOME = 2,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Email
+ */
+export interface Email {
+  address?: string;
+  body?: string;
+  subject?: string;
+  type?: EmailType;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Phone.FormatType
+ */
+export enum PhoneType {
+  UNKNOWN = 0,
+  WORK = 1,
+  HOME = 2,
+  FAX = 3,
+  MOBILE = 4,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Phone
+ */
+export interface Phone {
+  number?: string;
+  type?: PhoneType;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.Sms
+ */
+export interface Sms {
+  message?: string;
+  phoneNumber?: string;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.UrlBookmark
+ */
+export interface UrlBookmark {
+  title?: string;
+  url?: string;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.WiFi.EncryptionType
+ */
+export enum EncryptionType {
+  OPEN = 1,
+  WPA = 2,
+  WEP = 3,
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.WiFi
+ */
+export interface Wifi {
+  encryptionType?: EncryptionType;
+  password?: string;
+  ssid?: string;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.GeoPoint
+ */
+export interface GeoPoint {
+  lat?: number;
+  lng?: number;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.CalendarDateTime
+ */
+export interface Date {
+  day: number;
+  hours: number;
+  minutes: number;
+  month: number;
+  rawValue: string;
+  seconds: number;
+  year: number;
+  isUtc: boolean;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.CalendarEvent
+ */
+export interface CalendarEvent {
+  description?: string;
+  end?: Date;
+  location?: string;
+  organizer?: string;
+  start?: Date;
+  status?: string;
+  summary?: string;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode.DriverLicense
+ */
+export interface DriverLicense {
+  addressCity?: string;
+  addressState?: string;
+  addressStreet?: string;
+  addressZip?: string;
+  birthDate?: string;
+  documentType?: string;
+  expiryDate?: string;
+  firstName?: string;
+  gender?: string;
+  issueDate?: string;
+  issuingCountry?: string;
+  lastName?: string;
+  licenseNumber?: string;
+  middleName?: string;
+}
+
+/**
+ * @see https://developer.android.com/reference/android/graphics/Rect.html
+ */
+export interface Rect {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+}
+
+/**
+ * @see https://developer.android.com/reference/android/graphics/Point.html
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * @see https://developers.google.com/android/reference/com/google/mlkit/vision/barcode/Barcode
+ */
+export type Barcode = {
+  boundingBox?: Rect;
+  cornerPoints?: Point[];
+  displayValue?: string;
+  rawValue?: string;
+  format: BarcodeFormat;
+  content:
+    | {
+        type:
+          | BarcodeValueType.UNKNOWN
+          | BarcodeValueType.ISBN
+          | BarcodeValueType.TEXT;
+        data: string;
+      }
+    | {
+        type: BarcodeValueType.CONTACT_INFO;
+        data: ContactInfo;
+      }
+    | {
+        type: BarcodeValueType.EMAIL;
+        data: Email;
+      }
+    | {
+        type: BarcodeValueType.PHONE;
+        data: Phone;
+      }
+    | {
+        type: BarcodeValueType.SMS;
+        data: Sms;
+      }
+    | {
+        type: BarcodeValueType.URL;
+        data: UrlBookmark;
+      }
+    | {
+        type: BarcodeValueType.WIFI;
+        data: Wifi;
+      }
+    | {
+        type: BarcodeValueType.GEO;
+        data: GeoPoint;
+      }
+    | {
+        type: BarcodeValueType.CALENDAR_EVENT;
+        data: CalendarEvent;
+      }
+    | {
+        type: BarcodeValueType.DRIVER_LICENSE;
+        data: DriverLicense;
+      };
+};
+
+export interface CodeScannerOptions {
+  /**
+   * checkInverted: `Allows you to also scan white barcode with black backgrounds`
+   */
+  checkInverted?: boolean;
+}

If you use patch-package all you need todo is create that and it will fix it for you :)

[BeeMargarida]

If you use patch-package all you need todo is create that and it will fix it for you :)

Sorry, did not fully understand, do you mean run patch-package in this repo? Or in the repo where I use this lib?

[berseck]

In your code add package patch-package Please do all the installation process

Then run: npx patch-package vision-camera-code-scanner If you use yarn use: npx patch-package vision-camera-code-scanner --use-yarn

It will create a folder in your root project called patches and inside of it you will find a file named: vision-camera-code-scanner+{$version}.patch

Since this package actually updates itself after installation you will see tons of lines there that are related to automatically creation build. Remove everything since you are not interested in those and add the code I posted before.

You should be good to go after that.

[BeeMargarida]

In your code add package patch-package Please do all the installation process

Then run: npx patch-package vision-camera-code-scanner If you use yarn use: npx patch-package vision-camera-code-scanner --use-yarn

It will create a folder in your root project called patches and inside of it you will find a file named: vision-camera-code-scanner+{$version}.patch

Since this package actually updates itself after installation you will see tons of lines there that are related to automatically creation build. Remove everything since you are not interested in those and add the code I posted before.

You should be good to go after that.

Got it, thank you for you explanation! However shouldn't this problem be fixed in its origin, here?

[berseck]

Yes correct, this should be fixed here. What I'm suggesting is a palliative fix for your own project while the library doesn't fix this themselves. So you don't need to keep that warning in your project.

[BeeMargarida]

Yes correct, this should be fixed here. What I'm suggesting is a palliative fix for your own project while the library doesn't fix this themselves. So you don't need to keep that warning in your project.

Got it, thank you 🙏

[anderpaz]

Yes correct, this should be fixed here. What I'm suggesting is a palliative fix for your own project while the library doesn't fix this themselves. So you don't need to keep that warning in your project.

There is a forecast for the release of this release with the correction?