ReferenceError: Can't find variable: __scanCodes

[FluffyDiscord]

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]

@FluffyDiscord have found any solution for this ?

[FluffyDiscord]

@FluffyDiscord have found any solution for this ?

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

[alessandrom]

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]

Same problem here

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

[kierancrown]

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]

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]

我解决了，流程如下 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]

我解决了，流程如下 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]

Facing same issue. Please fix.

[hengkx]

https://github.com/mrousavy/react-native-vision-camera/issues/970#issuecomment-1194889142

[plusminushalf]

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]

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]

+1

[MichGan95]

+1

[wojciechowskip]

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

[prasadrenukdas]

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]

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]

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]

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]

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]

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]

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]

@kierancrown RN 0.69.3

[kierancrown]

@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]

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

[kierancrown]

import 'react-native-reanimated'

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

[voodootje0]

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

[viliammojsky]

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]

Has anyone solved it yet?

[jgudo]

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