🐛 Expo: Package "react-native-vision-camera" does not contain a valid config plugin

[seanconrad1]

What

In an Expo managed app after updating the permissions in the app.json file, I'm running into an error after running: expo prebuild

Logs

Package "react-native-vision-camera" does not contain a valid config plugin.
Learn more: https://docs.expo.io/guides/config-plugins/#creating-a-plugin
Cannot use import statement outside a module

Reproducable sample

app.json

{
  "expo": {
    "name": "react-native-vision-test",
    "slug": "react-native-vision-test",
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "App needs access to your Camera."
        }
      ]
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Environment

• Platform(s):
  • expo version: 42.0.1
• expo-cli: 4.7.3
• react-native version: 42.0.0
• react-native-vision-camera version: 2.4.1
• react-native-reanimated version: 2.2.0

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-camera": "~11.2.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-reanimated": "~2.2.0",
    "react-native-vision-camera": "^2.4.1",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

[mrousavy]

Oh yeah that's my bad. The docs are already live, but the stable version (2.4.1) does not support expo yet. You need to use the @beta tag.

[seanconrad1]

All good. And real quick, where would I put the beta tag at?

[mrousavy]

Oh you just install it like:

npm i react-native-vision-camera@beta

(or yarn) (dunno if that works with expo install, I'm new to expo 😄)

[seanconrad1]

Awesome! I appreciate it and the quick response. I'll mess around with it some more

[matheusmatos]

Hi Marc,

It looks like even in the beta version, it's still missing the app.plugin.js file in npm registry.

You can reproduce creating a fresh project and installing with yarn add react-native-vision-camera@2.4.2-beta.8:

I'm not sure, but maybe it's happening because this file is ignored in .eslintrc.js - and without this file expo can't load the config plugin correctly.

P.S: good luck on your new journey with the Expo team!

[mrousavy]

Thank you @matheusmatos! Excited to be part of the team. Also thanks for the report, I wouldn't have noticed on my own! Latest beta (2.4.2-beta.9) now includes app.plugin.js in the npm package - please let me know if you find any other issues! feedback helps me getting this beta ready for a stable release faster.

[matheusmatos]

Thanks!! This problem is solved, but we have another one now 😄

Inside src/expo-plugin/withVisionCamera.ts (line 3) the const pkg import is correct, with two parent directories (../../package.json).

When it's compiled, this file exists in lib/commonjs/expo-plugin/withVisionCamera.js and the import doesn't works.

I changed to ../../../package.json (three parent directories) and it works.

Can you help? Thanks!

[mrousavy]

61cef75

[mrousavy]

@matheusmatos okay, now everything works? on android and iOS? do frame processors work on both platforms?

[matheusmatos]

Hi, in fact, after fixing this import, I'm not able to compile locally using expo run:ios or eas build --local.

I got an error that maybe is related with issue#195:

I'll try to compile that using EAS Cloud to understand if the problem is my environment.

I come back with more news!!

[matheusmatos]

@mrousavy That last commit will be sent to npm registry?

When I install using github+hash the master doesn't have the lib folder.

Thus, EAS Cloud can't get correct version of the lib.

[mrousavy]

That error is exactly the same one as in #195, unfortunately I cannot reproduce it. There must be something wrong in the VisionCamera.podspec, maybe the HEADER_SEARCH_PATH for Folly is wrong? Or the .dependency should mention RCT-Folly instead of Folly? I'd appreciate it if you could play around with that and help me get this resolved 🙏 Maybe use Reanimated's podspec for inspiration

[matheusmatos]

Sure! Let's fix that, it's a pleasure to help.

Can you release a beta-10 with import fix? We can compile using expo infrastructure and test if the problem also happens there.

[mrousavy]

Does it work for you now? @matheusmatos I believe the folly issue should be tracked separately (in #195) so we can close this one here

[brunokiafuka]

Hi @mrousavy, I believe this is also linked to this issue. I am trying to run the lib on my project, I was able to run the expo prebuild, and whenever I try running expo start I get:

Camera: Native Module 'CameraView' was null! Did you run pod install?
at node_modules/react-native-vision-camera/src/Camera.tsx:33:26 in <global>
at node_modules/react-native-vision-camera/src/index.ts:1:0 in <global>
at App.tsx:4:0 in <global>
at index.js:4:0 in <global>
at http://127.0.0.1:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:119940:3 in global code

Even after running npx pod-install

[mrousavy]

@brunokiafuka Are you using the latest beta? Expo support is only available in the latest beta, not the current stable release (will promote to stable soon).

[brunokiafuka]

@mrousavy, I am using the stable version. I will try to add the beta version instead.

[brunokiafuka]

I am now on "react-native-vision-camera": "2.4.2-beta.10", and I am also getting the #195 issue when running

expo run:ios

[matheusmatos]

Hi @mrousavy, sorry for the late reply.

In fact, the problem with Folly affects the RN0.63 - the version which Expo 41 and 42 uses.

To make the app plugin works for Expo42 we need to modify the user Podfile.

I agree that it's not a good practice and would be better wait for #195 get fixed.

Maybe an option can be do this only in a "dangerous branch/tag" and not promote to stable version.

I can wait for Expo43 to use it, but I don't know if there is some other users expecting for this now.

In the last case, would be better remove app.plugin.js from master and add some notes in Readme for people searching for Expo support right now.

Thanks for all!

[shekharkhedekar]

I am now on "react-native-vision-camera": "2.4.2-beta.10", and I am also getting the #195 issue when running

expo run:ios

@brunokiafuka were you able to resolve this? I see the same thing with:

"expo": "^43.0.4",
"react-native-vision-camera": "2.9.4-expo.11",

Wondering if it's because I'm on OSX 10.10.5/XCode 6.1.1 (I know, I know, it's old, trying to avoid buying a new machine). I'm seeing the same error as you, even after expo prebuild && eas build.

@mrousavy do you think my hunch above is correct?