Develop Reference

react native svg error child.isClassAccessorProperty is not a function on upgrading react native from 68.1 to 70.6

Thanks in advance
I received the below error when I tried to upgrade react native from 68.1 to 70.6.
I tried this in android.
I ran react-native run-android and everything went well.
Upon running the app the metro bundler started loading 99% and showed this error in red screen
error: node_modules/react-native-svg/src/elements/Shape.tsx: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function
Can anybody help me on this.
Am using react native SVG and its version was old. I updated it to latest version too.
(13.6.0) but still its getting same error.
Error In Detail (If I take Build)
./gradlew assembleRelease
I get following error
error node_modules/react-native-svg/src/elements/Shape.tsx: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function.
TypeError: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function
at /Users/jarenk/Documents/myApp/node_modules/#babel/plugin-transform-typescript/lib/index.js:361:89
at Array.forEach (<anonymous>)
at PluginPass.Class (/Users/jarenk/Documents/myApp/node_modules/#babel/plugin-transform-typescript/lib/index.js:353:31)
at newFn (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/visitors.js:171:21)
at NodePath._call (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:90:31)
at TraversalContext.visitQueue (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/context.js:110:16)
at TraversalContext.visitQueue (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/context.js:116:21)
info Run CLI with --verbose flag for more details.
Once again thank you.

Updating the package.json file helped me to resolve this.
just downgrade the babel versions like below
Also make sure same below version are in package-lock.json file
"#babel/core": "7.12.9",
"#babel/runtime": "7.12.5"

To solve this issue, you need to delete the "node_modules" folder and run either
"yarn install" or
"npm install" command.
It is likely that you switched to a Git branch with a higher version of Babel, which is causing the problem.

Capacitor Android pipeline building but no longer working

I had a working React app released for Android and iOS via Capacitor. But now with a new version of my app, builds were not working with the Pixel 4 API 29 virtual device I used previously. Retrying with a Pixel 2 API 28 builds complete and the app opens, but now Mapbox is no longer loading and that is the core of my app. I updated to Android Studio 4.2.1 and have the following as dev dependencies in my package.json:
“#capacitor/android”: “^3.0.2”,
“#capacitor/cli”: “^3.0.2”,
“#capacitor/core”: “^3.0.2”,
“capacitor-resources”: “^2.0.5”,
“cordova-res”: “^0.15.3”
Small elements of my app are accessing the web, so it doesn’t seem to be an internet access issue. The main changes I’ve made in this version are upgrading to Mapbox 2.3.0 and making basic use of cookies for user settings, but not for ad tracking. But I’ve reverted both of these changes and the problem is persisting so it doesn’t seem to be because of the new Mapbox version or because the introduction of cookies.
Getting errors like this where the last letter of the app name is missing for some reason:
E/o.ionic.ecorat: Invalid ID 0x00000000.
Invalid ID 0x00000000.
E/o.ionic.ecorat: Invalid ID 0x00000000.
Also errors like this:
E/cr_VariationsUtils: Failed reading seed file “/data/user/0/io.ionic.ecorate/app_webview/variations_seed”: /data/user/0/io.ionic.ecorate/app_webview/variations_seed (No such file or directory)
Do errors like this mean that the app isn’t detecting that it’s meant for prod?
E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Error: Failed to initialize WebGL
E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Uncaught (in promise) Error: Failed to initialize WebGL.
I use ternary operators that start like this:
const url = process.env.NODE_ENV === ‘production’ ?
to decide whether to go to the real website or use localhost.
Should I go back to a more stable version of capacitor?

There are 3 things I can suggest which worked for me..
Check the devtool and inspect the emulator. if you see a error something like this
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
Then you can use npx capacitor run which should solve the issue, this is a quick fix though.
Replace your dev-flow and start using npx instead of ionic XXXX commands.
If you wish to update the deps and dev-deps in that case, based on package.json you have shared in your question you are missing a few plugins.
if you were to create a new ionic app using ionic start then the package.json will look something like this [ignore the vue deps]
"dependencies": {
"#capacitor/android": "3.0.2",
"#capacitor/app": "1.0.2",
"#capacitor/core": "3.0.2",
"#capacitor/haptics": "1.0.2",
"#capacitor/keyboard": "1.0.2",
"#capacitor/status-bar": "1.0.2",
"#ionic/vue": "^5.4.0",
"#ionic/vue-router": "^5.4.0",
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
}
So, you will need to manually install the package apart from #capacitor/android & #capacitor/core I believe these packages that are de-coupled packages that makes capacitor lighter than the prev version and need to be manually installed.
After that you need to build using ionic build then use ionic open to open the IDE and sync the project with Gradle for the android app. Once this is done you can use ionic capacitor run --livereload --external to open the emulator and the dev server with live-reload..

NativeScript Angular project 'tns run android' gives errors

I created a project using the following command:
ng new -c=#nativescript/schematics project-name --shared
When I run tns run android, I get the following errors:
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(25,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone.ts(632,6): error TS2300: Duplicate identifier 'AmbientZone'.
platforms/android/app/src/main/assets/app/tns_modules/rxjs/src/operator/catch.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/operator/catch'.
These are just sample errors. There are so many of these kind.
I tried;
Removing node_modules folder and run npm install
Removing platforms/android folder
Updating NativeScript(5.1.0) and Angular CLI()
Removing /users/username/.gradle folder and let it reinstall
Reinstalling Nodejs
Installing rxjs-compat which only solves rxjs-compat related errors
Nothing worked so far.
ng --version
Angular CLI: 7.2.1+
Angular: 7.1.4
#angular-devkit/architect 0.12.1 (cli-only)
#angular-devkit/core 7.0.7
#angular-devkit/schematics 7.0.7
#ngtools/webpack 7.1.4
#schematics/angular 7.0.7
#schematics/update 0.12.1 (cli-only)
rxjs 6.3.3
typescript 3.1.6
webpack 4.27.1
tns --version
5.1.0

Please see the issue here
Basically, remove the tns_modules folder from platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/
It is apparently caused by npm link command I used somewhere.

When I emulate Ionic App it throws TypeError: Can't call method on undefined

I'm working on a Ionic 2 beta( latest version ) project.
The app runs on web-client without any errors.
But when I try to emulate I get a white screen ( The White Screen of Death ).
There are no error logged in adb logcat.
So tried to emulate the app with live reload. ( As mentioned here ).
When I execute the command ionic emulate android -l -c
I get this error:
Error happened TypeError: Can't call method on undefined
at TypeError (native)
at module.exports (D:\ionicApp\node_modules\core-js\modules\_defined.js:3:28)
at createHTML (D:\ionicApp\node_modules\core-js\modules\_string-html.js:7:19)
at bold (D:\ionicApp\node_modules\core-js\modules\es6.string.bold.js:5:12)
at cb (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\logger.js:206:7)
at done (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\node_modules\async\lib\async.js:167:19)
at C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\node_modules\async\lib\async.js:40:16
at C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\logger.js:193:9
at [object Object].Console.log (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\transports\console.js:127:3)
at emit (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\logger.js:186:17)
at C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\node_modules\async\lib\async.js:157:13
at _each (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\node_modules\async\lib\async.js:57:9)
at Object.async.each (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\node_modules\async\lib\async.js:156:9)
at [object Object].Logger.log (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\logger.js:214:9)
at [object Object].target.(anonymous function) [as info] (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\winston\lib\winston\common.js:54:18)
at Object.IonicTask.setupLiveReload (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\lib\ionic\cordova.js:338:7)
at C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\lib\ionic\cordova.js:104:21
at _fulfilled (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:787:54)
at self.promiseDispatch.done (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:816:30)
at Promise.promise.promiseDispatch (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:749:13)
at C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:509:49
at flush (C:\Users\User1\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:108:17)
at nextTickCallbackWith0Args (node.js:456:9)
at process._tickCallback (node.js:385:13)
Have anyone faced this, what was your solution?
Reference: https://forum.ionicframework.com/t/emulate-run-with-livereload-not-working/48330

Update to the latsets ionic 2 release. npm install ionic#beta

To solve the issue I have done the following.
Upgrade / downgrade to Cordova version 6.0.0
Upgrade / downgrade to Ionic version 2.0.0-beta.25
ionic state reset
ionic platform remove android
ionic platform add android
ionic run android
It works as of today....

can't deploy my AppBuilder project on android device

I have to test my hybrid mobile application on my android device,I have selected "USB debugging" in my phone and I have selected the "Unknown sources" option,but when I try to deploy my application in my mobile I get this error:
Building package: [D:\WebMobile\test\backupsProjetWebMobile2\KendoUITabStrip1\obj\Debug\MyProjet.zip]
Project files uploaded to the cloud.
Sending build request for project MyProjet with parameters ProjectTypeGuids={070BCB52-5A75-4F8C-A973-144AF0EAFCC9}
Platform=Android
Configuration=Debug
LiveSyncToken=5uW/86s7080iMfWs0yNn+vJIKWo6n1qh4Lpa8kEnoUNFIaJOOQSDimQ9e0N6ELxXgt2bTOb/Xp6eRqCttuaoxQCzlLku533tlF1hvwrKPpxPeX/CfV/aGFN8Wr6MJl4D.
C:\Users\Client\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\zc3hmmck.xbh\Targets\Build.targets(189,3): error : Server build failed. Server output: Project "MyProjet.tmp.proj" (default targets):
android Build Tooling revision 2015.11.03.5r
Warning: Failed to install 'cordova-plugin-mapbox':Error: Variable(s) missing: ACCESS_TOKEN
at /home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/cordova-lib/cordova-lib/src/plugman/install.js:324:23
at _fulfilled (/home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/q/q.js:749:13)
at /home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/q/q.js:557:44
at flush (/home/builder/BpcTooling/Cordova3/node_modules/plugman/node_modules/q/q.js:108:17)
at process._tickCallback (node.js:419:13)
Warning: Variable(s) missing: ACCESS_TOKEN
Warning: /home/builder/BpcTooling/Cordova3/node_modules/cordova-build-utils/bin/install-plugins-3.js:189
Warning: throw Error("exit code: " + code);
^
Warning: Error: exit code: 1
at Error (<anonymous>)
at ChildProcess.<anonymous> (/home/builder/BpcTooling/Cordova3/node_modules/cordova-build-utils/bin/install-plugins-3.js:189:14)
at ChildProcess.emit (events.js:98:17)
at Process.ChildProcess._handle.onexit (child_process.js:810:12)
Error: Build failed during execution
Error: 'Build failed with error code 8'
Done building project "MyProjet.tmp.proj" -- FAILED.
.
Done building project "MyProjet.iceproj" -- FAILED.
Build FAILED.
I work with Telerik-AppBuilder visual Studio 2015 extension(kendo-ui) my android phone is Samsung Galaxy Star Duos GT-S7262 version 4.1.2
any help please and thanks
update:
I have folloewed this link [https://github.com/Telerik-Verified-Plugins/Mapbox] but I get this error:1
C:\Users\Admin>cordova plugin add https://github.com/Telerik-Verified-Plugins/Mapbox --variable ACCESS_TOKEN=my.access.token
Current working directory is not a Cordova-based project.
I have installed the cordova-plugins with npm,but I still get the problem :(

So the question boils down to: how in Visual Studio do you provide Cordova variables to plugins?
(You tried adding the plugin from the c:/users/admin folder which is not your project folder, that's why the Cordova CLI said: "Current working directory is not a Cordova-based project.")
I'm assuming you're using the AppBuilder extension for Visual Studio. If so, please read this doc, especially about how to configure variables:
http://docs.telerik.com/platform/appbuilder/creating-your-project/using-plugins/using-verified-plugins/install-verified-plugins