Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

ReferenceError: Can't find variable: __scanCodes #79

Open
FluffyDiscord opened this issue Jul 11, 2022 · 141 comments
Open

ReferenceError: Can't find variable: __scanCodes #79

FluffyDiscord opened this issue Jul 11, 2022 · 141 comments

Comments

@FluffyDiscord
Copy link

No matter what I do I end up with this error and I am desperate.

Things I tried from other github issues

  • remove/reinstall node_modules
  • run react-native start --reset-cache
  • run gradlew clean
  • use different node versions (16.9.0, 14.20.0)
  • use different react-native-reanimated versions (2.4.1, 2.7.0, 2.8.0, 2.9.1)
  • use different plugin versions (0.1.6, 0.2.0)
  • restart IDE/android studio/PC
  • run CLI as admin

package.json

{
  "name": "dasda",
  "version": "1.0.0",
  "description": "dadada",
  "dependencies": {
    "@freakycoder/react-native-bounceable": "^0.2.5",
    "@freakycoder/react-native-custom-text": "0.1.2",
    "@freakycoder/react-native-helpers": "^1.0.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "@reduxjs/toolkit": "^1.8.2",
    "axios": "^0.27.2",
    "axios-hooks": "^3.0.3",
    "events": "^3.3.0",
    "lodash-es": "^4.17.21",
    "lottie-ios": "3.2.3",
    "lottie-react-native": "^5.1.3",
    "luxon": "^2.4.0",
    "metro-config": "^0.71.0",
    "moti": "^0.18.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dynamic-vector-icons": "^1.1.6",
    "react-native-elevation": "^1.0.0",
    "react-native-file-access": "^2.4.3",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-mmkv-storage": "^0.7.6",
    "react-native-reanimated": "2.9.1",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-shadow-2": "^6.0.5",
    "react-native-svg": "^12.3.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-transparent-status-and-navigation-bar": "^1.0.3",
    "react-native-use-input-scroll-handler": "^0.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-vision-camera": "^2.13.5",
    "react-navigation-helpers": "^2.1.0",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "vision-camera-code-scanner": "^0.2.0",
    "watchman": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/runtime": "^7.17.9",
    "@commitlint/cli": "^16.2.4",
    "@commitlint/config-conventional": "^16.2.4",
    "@react-native-community/eslint-config": "^3.0.2",
    "@types/lodash-es": "^4.17.6",
    "@types/luxon": "^2.3.2",
    "@types/react-native": "^0.67.7",
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^8.15.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-config-standard-react-native": "1.0.0",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jest": "26.1.5",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "eslint-plugin-react-native": "4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.1",
    "metro-react-native-babel-preset": "^0.70.3",
    "prettier": "^2.6.2",
    "typescript": "^4.6.4"
  },
  "scripts": {
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "start": "react-native start --reset-cache",
    "husky:setup": "npx husky-init && npm run husky:commitlint && npm run husky:prettier && npm run husky:lint",
    "husky:commitlint": "npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'",
    "husky:prettier": "npx husky set .husky/pre-commit 'npm run prettier'",
    "husky:lint": "npx husky add .husky/pre-commit 'npm run lint'",
    "clean-up": "rm -rf .git && rm -rf ./assets && git init && npm run husky:setup",
    "clean:android": "cd android && ./gradlew clean",
    "debug:android": "cd android && ./gradlew assembleDebug",
    "release:android": "cd android && ./gradlew assembleRelease",
    "release:play": "cd android && ./gradlew bundleRelease",
    "test:apk": "react-native run-android --variant=release",
    "prettier": "cd src && npx prettier --write . && git add .",
    "prepare": "husky install",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        [
            "react-native-reanimated/plugin",
            {
                globals: ['__scanCodes'],
            },
        ]
    ],
}

entrypoint index.js

import 'react-native-reanimated'
import {AppRegistry} from 'react-native'
import App from './App'
import {name as appName} from './app.json'
import {Settings} from "luxon"

Settings.defaultLocale = 'cs'


AppRegistry.registerComponent(appName, () => App)
@rvuyyuru1
Copy link

@FluffyDiscord have found any solution for this ?

@FluffyDiscord
Copy link
Author

@FluffyDiscord have found any solution for this ?

I had to switch to deprecated package react-native-camera

@alessandrom
Copy link

I have the same issue and I am afraid the only solution is to switch back to react-native-camera.
(if it matters, I'm using an Apple M1)

@fabricepayet
Copy link

Same problem here

Apple M1
node v16.16.0
react-native-reanimated v2.9.1
vision-camera-code-scanner v0.2.0

@kierancrown
Copy link

Also had the same issue. I'm holding out until the rest of my app is complete but if no solution has been found by then, I'll be looking to switch to react-native-camera also. This has also been discussed here.

@hpardess
Copy link

I am facing same issue... any fix?

Error: Requiring module "node_modules/vision-camera-code-scanner/src/index.ts", which threw an exception: ReferenceError: Can't find variable: __scanCodes 
...
TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[6], "vision-camera-code-scanner").useScanBarcodes')

@xyylb
Copy link

xyylb commented Jul 21, 2022

我解决了,流程如下
1.将babel.config.js改为以下格式
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
],
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
2.删除node_modules目录
3.yarn install
4.执行yarn start --reset-cache

@kierancrown
Copy link

我解决了,流程如下 1.将babel.config.js改为以下格式 module.exports = { presets: [ 'module:metro-react-native-babel-preset', ], plugins: [ [ 'react-native-reanimated/plugin', { globals: ['__scanCodes'], }, ], ], }; 2.删除node_modules目录 3.yarn install 4.执行yarn start --reset-cache

I followed your instructions but still encounter the same issue with 0.69.1. Do you have an minimal working example you could share?

Frame Processor threw an error: Can't find variable: __scanCodes
In: scanBarcodes@/.../node_modules/vision-camera-code-scanner/src/index.ts (300:7):1:63
    @[native code]
    _f@/.../node_modules/vision-camera-code-scanner/src/hook.tsx (13:43):1:127
    @[native code]
    _f@/.../node_modules/react-native-vision-camera/src/hooks/useFrameProcessor.ts (28:21):1:425
    @[native code]

@ghost
Copy link

ghost commented Jul 25, 2022

Facing same issue. Please fix.

@hengkx
Copy link

hengkx commented Jul 26, 2022

@plusminushalf
Copy link

Is this a M1 thing? I have MacBook M1 as well and have the same error.

Configuration:

node v14.20.0
react-native-reanimated v2.9.1
vision-camera-code-scanner v0.2.0

我解决了,流程如下 1.将babel.config.js改为以下格式 module.exports = { presets: [ 'module:metro-react-native-babel-preset', ], plugins: [ [ 'react-native-reanimated/plugin', { globals: ['__scanCodes'], }, ], ], }; 2.删除node_modules目录 3.yarn install 4.执行yarn start --reset-cache

I tried this too, but no luck.

@BodaThomas
Copy link

Is this a M1 thing? I have MacBook M1 as well and have the same error.

Configuration:

node v14.20.0 react-native-reanimated v2.9.1 vision-camera-code-scanner v0.2.0

我解决了,流程如下 1.将babel.config.js改为以下格式 module.exports = { presets: [ 'module:metro-react-native-babel-preset', ], plugins: [ [ 'react-native-reanimated/plugin', { globals: ['__scanCodes'], }, ], ], }; 2.删除node_modules目录 3.yarn install 4.执行yarn start --reset-cache

I tried this too, but no luck.

It's not, I have a MacBook Intel one and I also have the same error

@whck6
Copy link

whck6 commented Jul 29, 2022

+1

1 similar comment
@MichGan95
Copy link

+1

@wojciechowskip
Copy link

The same happens on ubuntu + android. So definitely not a Mac issue.

@prasadrenukdas
Copy link

prasadrenukdas commented Aug 2, 2022

Add this to your babel.config.js

[
  'react-native-reanimated/plugin',
  {
    globals: ['__scanCodes'],
  },
]

Make sure to clear the metro cache after making this update.

@kierancrown
Copy link

Add this to your babel.config.js

[
  'react-native-reanimated/plugin',
  {
    globals: ['__scanCodes'],
  },
]

Make sure to clear the metro cache after making this update.

This doesn’t work in RN 0.69.X

@prasadrenukdas
Copy link

Add this to your babel.config.js

[
  'react-native-reanimated/plugin',
  {
    globals: ['__scanCodes'],
  },
]

Make sure to clear the metro cache after making this update.

This doesn’t work in RN 0.69.X

I am running 0.68.0. Will try upgrading to 0.69.X

@whck6
Copy link

whck6 commented Aug 2, 2022

I believe a way to work when i disable the hermes config with Podfile. I am 0.68.1 by the way.

:hermes_enabled => false

@kierancrown
Copy link

I believe a way to work when i disable the hermes config with Podfile. I am 0.68.1 by the way.

:hermes_enabled => false

This doesn’t work on RN 0.69.x

@OrkhanAlikhanov
Copy link

It seems that useScanBarcodes does not work and throws that error but when I use scanBarcodes directly it works. So we can just copy useScanBarcodes implementation into our codebase to work around the error.

/// This does not work
import { useScanBarcodes } from "vision-camera-code-scanner";


/// When you define it like this it works.
import {useState} from 'react'
import {runOnJS} from 'react-native-reanimated'
import {Frame, useFrameProcessor} from 'react-native-vision-camera'
import {Barcode, BarcodeFormat, CodeScannerOptions, scanBarcodes} from 'vision-camera-code-scanner'

export function useScanBarcodes(types: BarcodeFormat[], options?: CodeScannerOptions): [(frame: Frame) => void, Barcode[]] {
  const [barcodes, setBarcodes] = useState<Barcode[]>([])
  const frameProcessor = useFrameProcessor(frame => {
    'worklet'
    const detectedBarcodes = scanBarcodes(frame, types, options)
    runOnJS(setBarcodes)(detectedBarcodes)
  }, [])

  return [frameProcessor, barcodes]
}

@kierancrown
Copy link

It seems that useScanBarcodes does not work and throws that error but when I use scanBarcodes directly it works. So we can just copy useScanBarcodes implementation into our codebase to work around the error.

/// This does not work

import { useScanBarcodes } from "vision-camera-code-scanner";





/// When you define it like this it works.

import {useState} from 'react'

import {runOnJS} from 'react-native-reanimated'

import {Frame, useFrameProcessor} from 'react-native-vision-camera'

import {Barcode, BarcodeFormat, CodeScannerOptions, scanBarcodes} from 'vision-camera-code-scanner'



export function useScanBarcodes(types: BarcodeFormat[], options?: CodeScannerOptions): [(frame: Frame) => void, Barcode[]] {

  const [barcodes, setBarcodes] = useState<Barcode[]>([])

  const frameProcessor = useFrameProcessor(frame => {

    'worklet'

    const detectedBarcodes = scanBarcodes(frame, types, options)

    runOnJS(setBarcodes)(detectedBarcodes)

  }, [])



  return [frameProcessor, barcodes]

}

What version of React Native are you using?

@OrkhanAlikhanov
Copy link

@kierancrown RN 0.69.3

@kierancrown
Copy link

@kierancrown RN 0.69.3

I seem to be missing something here, did you still add the globals to the babel.rc file?

I'm getting this error

 ERROR  ReferenceError: Can't find variable: __scanCodes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

@OrkhanAlikhanov
Copy link

Yes I updated babel config as instructed and also at the top of the index.js file I added import 'react-native-reanimated'

@kierancrown
Copy link

import 'react-native-reanimated'

I've tried this and cannot get it to work. Do you by any chance have a minimal example?

@voodootje0
Copy link

Having the same problem, seems like it's related to 0.69..x

@viliammojsky
Copy link

viliammojsky commented Aug 7, 2022

I have the same problem. Expo SDK 45. React Native 0.68.2

*Edit. I just used another development machine and everything works as it should. I initialized 2 projects using Expo SDK 45 and 46 (React Native 0.68.2 and 0.69.3) blank template, ejected, installed all dependencies according to the docs and everything worked. Except that there was an issue 1118 with RN 0.69.3 which is solved here. But besides that it just worked. So, either it was fixed or there is an issue with my other development machine, probably the Android Studio SDK manager is missing some SDK tools.

*Edit 2. I am no longer able to replicate this issue on either of my machines (without any changes with SDK manager). I followed exactly the same procedures as yesterday when I got this error on every try. Today, no error, it just works. So ... I gues some of the libraries (vision-camera-code-scanner, react-native-vision-camera, react-native-reanimated) were fixed, or no idea.

*Edit 3. I just remembered the one thing I changed - I updated Expo Go in my test device.

@caolong0204
Copy link

caolong0204 commented Aug 9, 2022

Has anyone solved it yet?

@jgudo
Copy link

jgudo commented Aug 12, 2022

Facing the same issue. I've been looking for a solution for a day.

@uglyghosty
Copy link

uglyghosty commented Dec 7, 2022

I followed the installation steps, but it only seems to build on Android. Removing the package completely from my project allows me to build on iOS, otherwise I receive a bunch of errors - seemingly related to my M1 chip mac.

package.json:
"vision-camera-code-scanner": "^0.2.0", "react-native": "0.70.6", "react-native-vision-camera": "^2.15.2",

babel.config.js:
... plugins: [ [ 'react-native-reanimated/plugin', { globals: ['__scanCodes'], }, ], ],

MicrosoftTeams-image

@mehtaanirudh
Copy link

mehtaanirudh commented Dec 22, 2022

This library does not seem to work with React Native ^0.69 and Firebase > 15.0. Instead you can use react-native-ml-kit.

I have not tried to use react-native-ml-kit with frame processors but you can use rn-vision-camera to take the picture and pass the image to react-native-ml-kit to get the bar code. Example app is here -> https://github.com/a7medev/react-native-ml-kit/tree/main/barcode-scanning/example

The other option is to upgrade react-native to ^0.70 and it seemed to work for me.

@jbrodriguez
Copy link

in my case, i re-read the instructions, cleaned caches, ran the app again and it worked

    "react-native": "0.70.6",
    "react-native-vision-camera": "^2.15.2",
    "vision-camera-code-scanner": "^0.2.0",

the instructions changed 2 things :

  • import react-native-reanimated at the top of the index.{js,tsx}
  • set scanCodes instead of scanQRCodes in the babel config

then what i normally do in these cases

watchman watch-del-all && watchman shutdown-server
yarn start --reset-cache

on android

cd android
./gradlew clean

on ios (just to make sure)

xcode clean build 

@johnhaup
Copy link

I had the same problem on Android and I solved it by adding this code in MainApplication.java

import com.visioncameracodescanner.VisionCameraCodeScannerPluginPackage;

packages.add(new VisionCameraCodeScannerPluginPackage());

This saved me. Thank you.

@pke
Copy link

pke commented Feb 2, 2023

The iOS example from current main branch does still throw this error on iOS. Babel.config has scancodes in it and reanimated is imported in index.tsx.

@rodgomesc Could you update the vision camera dependency to use the newest patched version please?

@gpfreund
Copy link

gpfreund commented Mar 20, 2023

I had the same problem on Android and I solved it by adding this code in MainApplication.java

import com.visioncameracodescanner.VisionCameraCodeScannerPluginPackage;

packages.add(new VisionCameraCodeScannerPluginPackage());

Thanks, this worked - much appreciated! I believe the issue is not limited to the scanner but all Vision Camera plug-ins. I had it with a face detection plug-in and even with react-native-vision-camera v. 3 RC-2. (@mrousavy)

Just to clarify for those not familiar with Java:

  1. Go in AndroidStudio and open your project
  2. Select Project Source Files on the upper left corner
  3. Walk down the tree app | src | main | java | com | yourApp | MainApplication
  4. Add import com.visioncameracodescanner.VisionCameraCodeScannerPluginPackage at the top after the package line.
    If you try to fix the issue for a different plugin, use that plug-ins package and class name
  5. Find the function protected List<ReactPackage> getPackages()
  6. Add packages.add(new VisionCameraCodeScannerPluginPackage()); (or whatever plugin you're using) right before return packages;
  7. Select Build | Rebuild project from the top menu

@trashcoder
Copy link

I got the same error message "__scanCodes is not defined". What helped in my case was to delete all subfolders of Xcodes derived folder. Then i deleted the "nodes_modules" folder. After that i run
yarn run install
cd ios
pod install
cd ..
npx react-native start --reset-cache

and at last i made a new build using xcode.

@carlgrob5171989
Copy link

"react-native-vision-camera": "2.15.6",

I am facing the same issue ( Property '__scanCodes' doesn't exist ) in Xcode 15.
What is the resolution?

@trashcoder
Copy link

Did you follow my solution from the post above?

@Danushka96
Copy link

I am using "react-native-vision-camera": "2.16.2" which has the xcode 15 fix.
@trashcoder I followed your solution and it's not working.

@samsonroy
Copy link

samsonroy commented Oct 10, 2023

I am also facing the same above issue? Any fix

@eobruno
Copy link

eobruno commented Oct 10, 2023

image
ERROR Frame Processor threw an error: Property '__scanOCR' doesn't exist

How can we fix that????

@nicks78
Copy link

nicks78 commented Oct 11, 2023

I have the same issue , ReanimatedError: Property '__scanCodes' doesn't exist. I upgrade to 2.16.2 due to possible issue with Iphone 15, so I did upgrade to the following.

"react-native": "0.71.4",
"react-native-reanimated": "^3.5.0",
"react-native-vision-camera": "^2.16.2",
"vision-camera-code-scanner": "^0.2.0",

@eobruno
Copy link

eobruno commented Oct 12, 2023

I changed my package.json, now its another error

ERROR TypeError: Cannot read property 'id' of undefined

image

@mrousavy
Copy link

Is your CameraDevice (device={..}) null?

@eobruno
Copy link

eobruno commented Oct 12, 2023

Is your CameraDevice (device={..}) null?

no, it was like that!
image

@Simoon-F
Copy link

same.

@nghiatv
Copy link

nghiatv commented Oct 13, 2023

same issue

@Simoon-F
Copy link

Simoon-F commented Oct 14, 2023

I plan to upgrade the package react-native-vision-camera to 3.3.1 and use the new version's built-in frame processor, which will reduce the time I have to deal with many problems.

In fact, I have already replaced it, and the effect is very good at present.

@nicks78
Copy link

nicks78 commented Oct 16, 2023

I also upgrade react-native-vision-camera to v3 and use integrated scanner all working good so far on both android and IOS.
I tried to install vision-camera-realtime-object-detection but ran into an error on IOS (missing @EnD) but could not figured it out a solution.

@koolll
Copy link

koolll commented Oct 17, 2023

I am using "react-native-vision-camera": "2.16.2" which has the xcode 15 fix. @trashcoder I followed your solution and it's not working.

I am getting this error "ReferenceError: Can't find variable: __scanCodes" as well when upgrading to react-native-vision-camera 2.16.3. Have you been able to find a solution? I am not able to upgrade to v3 because it would impact a lot of my existing code

@carlgrob5171989
Copy link

I have resolved it by editing manually the FrameProcessor.h file

@koolll
Copy link

koolll commented Oct 17, 2023

I have resolved it by editing manually the FrameProcessor.h file

Hi, which version are you using for React Native Vision Camera? Could you please show me the file and line that you have edited , Thanks

@mrousavy
Copy link

If you find a fix please submit a PR.

@rach-123
Copy link

rach-123 commented Oct 17, 2023

I am also facing same issue "ReferenceError: Property '__scanCodes' doesn't exist
at scanBarcodes"

for some reason I cannot upgrade it to both reanimated and vision-camera to v3.Could someone help me out.

react-native : 0.71.3
react-native-vision-camera: 2.15.6
react-native-reanimated: 2.17.0

@carlgrob5171989
Copy link

i am keeping the old version . new version does not work.

@mrousavy
Copy link

VisionCamera V3 has a CodeScanner integrated. See: QR/Barcode Scanning.
No need for a Frame Processor anymore.
Rodrigo's version here works perfect for V2 and has more control

@viljark
Copy link

viljark commented Oct 19, 2023

I have resolved it by editing manually the FrameProcessor.h file

Hi, which version are you using for React Native Vision Camera? Could you please show me the file and line that you have edited , Thanks

I think he edited FrameProcessorPlugin.h, I had to change it also to get rid of this error.
See my answer here: #45 (comment)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests