React-native-camera error when compiling android - reactjs

I tried to upgrade my react native project to the newest version (0.59.2). Unfortunately, now when trying to run react-native run-android im getting this error:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-camera.
Required by:
project :app
> Cannot choose between the following variants of project :react-native-camera:
- generalDebugRuntimeElements
- mlkitDebugRuntimeElements
All of them match the consumer attributes:
- Variant 'generalDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'generalDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'general' but wasn't required.
- Variant 'mlkitDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'mlkitDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'mlkit' but wasn't required.
I have already tried to create a new project however this results in the same error.
Reinstalling the node modules didn't help either.
On iOS it works fine.

Insert the following lines in android/app/build.gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}

Please insert the following line in android/app/build.gradle inside defaultConfig block either
missingDimensionStrategy 'react-native-camera', 'general'
or
missingDimensionStrategy 'react-native-camera', 'mlkit'
Add jitpack to android/build.gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
Complete guide
Could not resolve project :react-native-camera. on Android

Hope this helps.
Step 1:
Change the class path in android/build.gradle in dependencies tag to this:
classpath 'com.android.tools.build:gradle:3.3.0'
Step:2:
Change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
Step 3:
In the android/app/build.gradle add this at the top:
defaultConfig {
missingDimensionStrategy 'react-native-camera', 'general'
}
}
Step 4:
Also add these two lines:
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
Camera works now.

It is simple to resolve by adding missingDimensionStrategy attribute in defaultConfig tag in android/app/build.gradle.
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'
}
}
If you are still having the same issue then you have to do the following steps.
Ensure that your gradle build tool version is greater than 3.3.0. You can use 3.4.1 for this purpose. Change the gradle build tool version from android/build.gradle file buildscript dependencies attributes.
buildscript {
...
dependencies {
classpath("com.android.tools.build:gradle:3.4.1")
}
}
Also have to change the gradle wrapper to 4.4 or later. You can change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
Finally add the following lines in repositories tag of android/build.gradle
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }

Related

I keep getting the Error: Cannot find module 'webpack-CLI/bin/config-yargs'

I'm using this tutorial to make a React app. I have the most updated webpack-CLI 4.2.0 in devDependencies. I looked in node_modules/webpack-cli/bin/config-yargs but its not there. It only goes as far as 'bin' and it has one file in it. It's also telling me about
`(/Users/danielengel/Desktop/Project portfolio/watches/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)`
It has
// webpack-cli#3.3 path : webpack-cli/bin/config/config-yargs
let configYargsPath;
try {
require.resolve('webpack-cli/bin/config/config-yargs');
configYargsPath = 'webpack-cli/bin/config/config-yargs';
} catch (e) {
configYargsPath = 'webpack-cli/bin/config-yargs';
}
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line import/no-dynamic-require
require(configYargsPath)(yargs);
, And at the top of the file it has
`const yargs = require('yargs');
I've tried commenting out some of the code, or uncommenting in the node_modules but I know that's a bad idea. I also tried uninstalling and reinstalling the webpacks with NPM. I tried changing it to a regular dependency instead of dev-dependency. I tried installing it globally too.
Try using webpack serves instead of webpack-dev-server in package.json

WebStorm 2018.1.4 + ESLint: TypeError: this.CliEngine is not a constructor

My configuration is this.
WebStorm 2018.1.4; ESLint 6.4; Node 12.8; npm 6.10.2; Windows 8.1.
How do I eliminate the error in the thread title?
Here's a code sample.
import {
GET_DAILY_SUCCESS,
GET_HOURLY_SUCCESS,
GET_MINUTE_SUCCESS
} from './types';
import {
getDailyToUsd,
getHourlyToUsd,
getMinuteToUsd
} from '../api/cryptocompare';
import { setError } from './error';
export const getDaily = (fsym = 'BTC') => async dispatch => {
try {
const list = await getDailyToUsd(fsym);
dispatch({
type: GET_DAILY_SUCCESS,
currency: fsym,
list
});
} catch(err) {
dispatch(setError(err.Message));
}
};
WEB-38922 is fixed in 2019.1.3.
The issue is with ESLint version 6.x. If upgrading Webstorm is not an option for you, you have to downgrade to ESLint version 5:
npm install --save-dev eslint#5
Update: if you see similar error when working with ESLint 8, please make sure to upgrade to version 2021.2.2 where it's supported (see WEB-52236)
In my Webstorm 2021.2 there is a slightly different error this.CliEngineCtor is not a constructor.
That is related to updating eslint to 8.0.1.
Solution: update WebStorm to the latest version 2021.2.2 or later
Here is another solution from Dmitry Babenko that will let you use ESLint 6.x with a fallback license of WebStorm:
Wait for the this.CliEngine is not a constructor balloon to appear and click "Details"
Follow the first link in the stack-trace to eslint-plugin.js file
Find the following line at the top:
this.CliEngine = require(this.basicPath + "lib/cli-engine");
And replace it with the following one:
this.CliEngine = require(this.basicPath).CLIEngine;
Restart IDEA
In additional to Dabrule answer:
For eslint v8 replace this line:
this.cliEngineCtor = requireInContext(eslintPackagePath + "lib/api", state.packageJsonPath).CLIEngine;
to that:
this.cliEngineCtor = requireInContext(eslintPackagePath + "lib/cli-engine").CLIEngine;
File location, for example, RubyMine (WebStorm should be similar):
RubyMine-2021.1.3/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js
I'm using Webstorm2021.2.1 and I have figured out that eslint#8.0.0 is not compatible with it.
This worked for me:
yarn add -D eslint#7.14.0
upgrading to newer version will solve this error.
As you can see the issue was solved in 2019.1.3
WEB-38922 - Linting with ESLint v6 in 2019.1 fails with an error 'TypeError: this.cliEngine is not a constructor' : https://youtrack.jetbrains.com/issue/WEB-38922
In additional to Dabrule and Johny Martin answer:
For eslint 8+ add .CLIEngine to this line:
this.CliEngine = require(this.basicPath + "lib/cli-engine").CLIEngine
Restart IDE (Webstorm 2018.1.2)

Reactnative - 'React/RCTBridgeModule.h' file not found

I am trying to use react-native-linea in my react native app and during build I am getting React/RCTBridgeModule.h' file not found error.
Steps I tried -
1. react-native init ScannerApp
2. cd ScannerApp/
3. npm i react-native-linea --save
4. react-native link react-native-linea
5.Drag and drop the InfineaSDK Framework into the General > Embedded Binaries section of your Project. The framework will also display the Linked Frameworks and Libraries.
a. Verify that Copy Items if needed is checked.
6.Add the following to General > Linked Frameworks and Libraries:
• CoreLocation.framework
• ExternalAccessory.framework
• Foundation.framework
7.Add a new Run Script phase.
At the end of your project’s Build phase(s), add new running scripts to set up InfineaSDK.
FRAMEWORKS="${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}" "${FRAMEWORKS}/InfineaSDK.framework/SDKSetup"
8.react-native run-ios
****Error*****
simulator/react-native-linea.build/Objects-normal/x86_64/RCTLinea.o
In file included from /Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.m:9:
/Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.h:9:9: fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
^~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
** BUILD FAILED **
Solution 1: Adding podspec
Prerequisite: You will need to setup React as cocoapod dependency for this to work. Also, before you try this make sure you have package react-native-linea available in node_modules.
In this solution you need to create a podspec file for the linea. You can choose to keep it in your ScannerApp project or fork the original repo and add the podspec file to it. If you fork, please modify the git urls in the podspec to your repo url and add the react-native-linea package from your repo. Here's the podspec that worked for me,
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '../node_modules/react-native-linea/package.json')))
Pod::Spec.new do |s|
s.name = 'LineaPro'
s.version = package['version']
s.summary = package['description']
s.license = package['license']
s.homepage = 'https://github.com/pablo-coco/react-native-linea'
s.authors = 'pablo-coco'
s.source = { :git => 'https://github.com/pablo-coco/react-native-linea.git', :tag => s.version }
s.source_files = '*.{h,m}','react-native-linea/*.{h,m}'
s.requires_arc = true
s.platforms = { :ios => "9.0" }
s.vendored_libraries = 'libdtdev.a'
s.frameworks = 'ExternalAccessory', 'CoreLocation'
s.dependency 'React'
end
Now you need to add this as cocoapod dependency in your ScannerApp podfile. If you add podspec file locally, make sure to specify its path as below,
pod 'LineaPro', :path => '../node_modules/react-native-linea', :podspec => '../ios/LineaPro.podspec'
If you created fork and added podspec to repo then skip the :podspec part.
Solution 2: Add source files directly
This is fairly simple solution and i'd recommend this. You can clone the react-native-linea repo locally on your machine.
Copy DTDevices.h, RCTLinea.h, RCTLinea.m source files to ios project
Copy LineaPro.js, NativeBridges.js to js project
Copy libdtdev.a static lib to project
Link ExternalAccessory, CoreLocation frameworks and libdtdev.a to your target
Compile and write js code to initialize LineaPro module.

proguard.ParseException: Unknown option '-encryptstrings' in proguard.cfg

When I run mvn install goal with progurad option then am getting the following error. Previously, I don't have this error. I could not find what has made the difference in getting the following error:
proguard.ParseException: Unknown option '-encryptstrings' in line .. of file 'proguard.cfg'
I am using dexguard for my project. is this error because of the maven could not identify the dexguard folder location?
proguard.cfg content:
-dalvik -- unknown option
-android -- unknown option
# Encrypt all strings -- parse exception
-encryptstrings '???*'
The following works with out issues:
-dontusemixedcaseclassnames
-dontskipnonpubliclibraryclasses
-dontpreverify
-verbose
-optimizations !code/simplification/arithmetic
-optimizationpasses 30
-allowaccessmodification
-dontpreverify
-dontoptimize
-ignorewarnings
-renamesourcefileattribute Maviance
-keepattributes SourceFile,LineNumberTable,*Annotation*
-keep,allowshrinking,allowobfuscation class android.support.**Compat* { *; }
The option -encryptstrings '???*' is only supported by DexGuard. So when you use ProGuard to build your application, you will receive such an error.
Thus it is advised to separate the dexguard related configuration into a separate config file dexguard-project.txt that is only included when using DexGuard.
I had the same error using dexguard. The problem was that I was missing this line
proguardFiles getDefaultDexGuardFile('dexguard-debug.pro')
So gradle took Proguard instead of Dexguard, which obviously doesn´t have the encryptstrings feature. So the working release configuration is this:
release {
debuggable true
minifyEnabled true
proguardFiles getDefaultDexGuardFile('dexguard-debug.pro')
signingConfig signingConfigs.release
}

`_Symbol.'for'`: Is that actually valid ES6? Webpack built it from React source

I'm trying to take React 0.14 for a spin before I upgrade it in my project. However, with a simple "hello world" prototype, Webpack is throwing an error:
ERROR in ./~/react/lib/ReactElement.js
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string
You may need an appropriate loader to handle this file type.
| // The Symbol used to tag the ReactElement type. If there is no native Symbol
| // nor polyfill, then a plain number is used for performance.
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7;
|
| var RESERVED_PROPS = {
# ./~/react/lib/ReactMount.js 18:19-44
I do have babel-loader configured, and when I downgrade to React 0.13, everything works. What really stands out to me, is _Symbol.'for', in the middle of the error message.
In react/lib/ReactElement.js on line 21 (not 25), that line looks much more correct, with square brackets around the 'for' key:
var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
I assume that the code shown in the error message is either in an intermediate state during compilation, or is the final compiled output. Does anyone know what could cause Webpack to produce something that looks so wrong? Has anyone successfully used Webpack, Babel and React ~0.14.1 together yet?
update
There is an issue for this: https://github.com/babel/babel/issues/2377
It's closed, but it looks like it came back for me. This was fixed in 5.8.25, but I have 5.8.29 and I still hit the bug.
It appears that the problem has something to do with me including babel runtime. My .babelrc was copied from an older project:
{
"optional": "runtime",
"stage": 0
}
In this little hello-world demo, there is nothing that requires bundling the runtime, so I just removed it, after noticing that https://github.com/DominicTobias/universal-react/, which also uses the same build tools, does not need it. That was the only change I needed to make to get this to build.
My webpack config is super simple:
var path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index.min.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel"
}]
}
};
I guess that's what I get for copying a config file from a more complex project into what was supposed to be a simplest possible demo.
I see that there is a babel-plugin-runtime as well as a babel-runtime on NPM, but when I tried out BPR for the sake of completeness, Babel complains: Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name. Since I don't actually need the runtime, the linked GH repo is a 404, and since this really belongs in the issue trackers after all, this is as far as I am going to take this for now.
No, that is not valid code. That was an issue in Babel project, but it has been fixed in the 6.0 version which was released recently.
I was run into this issue too, and now I have checked this with latest version, and it is works fine. Here is my test steps:
# install Babel and plugins
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime
# install React
npm install react
# run babel against problem react file
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015
It is provides valid output, so the issue seems to be resolved.
And there is good news for you, babel-loader for webpack already supports 6 version of Babel. Check out its docs for details

Resources