❓ Requiring module "node_modules/vision-camera-qrcode-scanner/src/index.ts", which threw an exception: TypeError: undefined is not a function, js engine: hermes

[thanhnh-alobridge]

Question

Requiring module "node_modules/vision-camera-qrcode-scanner/src/index.ts", which threw an exception: TypeError: undefined is not a function, js engine: hermes

What I tried

No response

VisionCamera Version

2.9.3

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar questions in the issues page as well as in the discussions page and found none.

[thanhnh-alobridge]

my component

import { useFocusEffect } from '@react-navigation/native'
import { useCallback, useEffect, useState } from 'react'
import { StyleSheet } from 'react-native'
import { runOnJS } from 'react-native-reanimated'
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera'
import { useDispatch } from 'react-redux'
import { QrCode, scanQRCodes } from 'vision-camera-qrcode-scanner'

interface Props {
  postingJobId: number
}
const RNCameraScanQR = ({ postingJobId }: Props) => {
  const [hasPermission, setHasPermission] = useState(false)
  const [qrCodes, setQrCodes] = useState<QrCode[]>([])
  const devices = useCameraDevices()
  const device = devices.back

  const dispatch = useDispatch()

  let checker = false
  useFocusEffect(
    useCallback(() => {
      checker = false
    }, [])
  )
  useEffect(() => {
    ;(async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')
    })()
  }, [])

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'

    const qrcode = scanQRCodes(frame)
    runOnJS(setQrCodes)(qrcode)
  }, [])

  console.log('qrCodes', qrCodes)
  return (
    device != null &&
    hasPermission && (
      <>
        <Camera
          style={RNCameraScanQRStyles.container}
          device={device}
          isActive
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
        />
      </>
    )
  )
}

export default RNCameraScanQR

const RNCameraScanQRStyles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

[thanhnh-alobridge]

my babel.config

module.exports = {
  presets: [['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }]],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: ['.ts', '.tsx', '.js', '.jsx', 'json'],
        alias: {
          '@src': './src',
        },
      },
    ],
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanQRCodes'],
      },
    ],
  ],
  env: {
    production: {
      plugins: ['transform-remove-console', 'react-native-paper/babel'],
    },
  },
}

[mrousavy]

cc @rodgomesc

[rodgomesc]

please do not open the same issue in multiple projects.

Duplicated of rodgomesc/vision-camera-code-scanner#8