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.

[raheelmushtaq]

I resolved this solution in following way.

1. replaced babel.config.js with below code. module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'react-native-reanimated/plugin', { 'globals': ['__scanCodes'], }, ], ], };

2. delete node-module.

3. install node modules again i.e. yarn install

4. start metro by reset cache

5. run the project.

following are the react version:

"react": "17.0.2",
"react-native": "0.68.0",

and it worked.

[kierancrown]

I resolved this solution in following way.

1. replaced babel.config.js with below code. module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'react-native-reanimated/plugin', { 'globals': ['__scanCodes'], }, ], ], };
2. delete node-module.
3. install node modules again i.e. yarn install
4. start metro by reset cache
5. run the project.

following are the react version:

"react": "17.0.2",
"react-native": "0.68.0",

and it worked.

This bug is specifically related to RN 0.69 and above.

[jgudo]

@kierancrown I downgraded to version 0.68.3 and it finally worked.

[kierancrown]

@kierancrown I downgraded to version 0.68.3 and it finally worked.

Did you run into any issues or see decreased performance in doing so?

[jgudo]

@kierancrown Not at all. Been trying to figure out what is causing the problem for a few days and downgrading react native fixed it.

[OrkhanAlikhanov]

I created RN 0.69.4 sample app with this library installed. I just followed the instructions and it worked without any errors, I have no idea why. Here is the link to repo. You can check out commits or diff to see the changes made.

[kierancrown]

I created RN 0.69.4 sample app with this library installed. I just followed the instructions and it worked without any errors, I have no idea why. Here is the link to repo. You can check out commits or diff to see the changes made.

I cloned your git repo and ran on device to be met with the same error.

[psyzz]

working for me on m1 with react-native 0.69.4 but only when i'm building the app on Release mode on xCode :(

[kierancrown]

Did you do this by just changing the scheme to "release"? I have no such luck. Still seeing errors in Xcode even with the release version either.

[ravargash]

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

[kierancrown]

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

It’s also paid and ridiculously expensive.

[jgudo]

@kierancrown True. I've recreated the functionality the same as the one on their demo with scan region. Don't need to spend cash when you can create it yourself from scratch.

[ravargash]

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

It’s also paid and ridiculously expensive.

Just found out that :/

[timlangner]

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

It’s also paid and ridiculously expensive.

Just found out that :/

I was using it but then I found out that you need a license for it. That's why I'm here but now I'm stuck with the ReferenceError for __scanCodes as well.

[jgudo]

@timlangner These are the package versions that worked in my case. Might help you just in case:	package	version
react-native | 0.68.3
react-native-reanimated | 2.4.1
react-native-vision-camera | 2.14.1
vision-camera-code-scanner | 0.2.0

[kierancrown]

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

It’s also paid and ridiculously expensive.

Just found out that :/

I was using it but then I found out that you need a license for it. That's why I'm here but now I'm stuck with the ReferenceError for __scanCodes as well.

This bug is specifically marked for RN 0.69.x. It’s a blocker for upgrading RN.

[DSKonstantin]

Any updates?

[etoanton]

Adding import 'react-native-reanimated'; as a first line in component (make sure it's correctly installed, e.g. do yarn add react-native-reanimated + pod install) + adding the following plugin in the babel.config.js (restart metro) helped in my case (apple m1):

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

So finally I was able to use frameProcessor defined like that:

  const frameProcessor = useFrameProcessor(frame => {
    'worklet';
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE]);
    console.log('detectedBarcodes', detectedBarcodes); // It works!!
  }, []);

[fukemy]

@etoanton i did follow your suggest but still not working

[tsipiniuk]

What version of command line tool do you use? I think this is the problem. I downgraded to version 13.4.1 and it helped me