Import fritzapi (node package) into Ionic project - ionic4

I am currently trying to use this API in my Ionic project, but man, I have no clue on how to do it. I tried figuring it out using things like this, but I always get errors on ionic server:
101 unchanged chunks
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 3.07 MB [rendered]
[ng]
[ng] ERROR in ./node_modules/request/lib/har.js
[ng] Module not found: Error: Can't resolve 'fs' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\request\lib'
[ng] ERROR in ./node_modules/forever-agent/index.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\forever-agent'
[ng] ERROR in ./node_modules/tough-cookie/lib/cookie.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tough-cookie\lib'
[ng] ERROR in ./node_modules/tunnel-agent/index.js
[ng] Module not found: Error: Can't resolve 'net' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tunnel-agent'
[ng] ERROR in ./node_modules/forever-agent/index.js
[ng] Module not found: Error: Can't resolve 'tls' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\forever-agent'
[ng] ERROR in ./node_modules/tunnel-agent/index.js
[ng] Module not found: Error: Can't resolve 'tls' in 'D:\Programmierung\Workspaces\Ionic\HomeAutomation\node_modules\tunnel-agent'
[ng] Time: 2321ms
[ng] i 「wdm」: Failed to compile.
I'm super new to webdev and Ionic in general, so I don't know if this is even possible, but I feel like it should be. Above error is a result of the following code:
import { Component } from '#angular/core';
import * as fritzapi from 'fritzapi';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {
fritzapi.getSessionID("removedforstack", "removedforstack").then(function(sid) {
console.log(sid);
});
}
}
Thanks in advance to everyone who's trying to help <3

I suspect this isn't possible. I think that you are trying to use something that's expected to be run on the local network in a node environment.
I did a search and found this article:
https://www.amadousall.com/angular-cli-module-not-found-error-cant-resolve/
Which say they used to do this:
supply an empty module when fs, crypto, tls and net were requested.
Which doesn't make sense really out of context but I couldn't find a simple bit to quote, take a look at the article.
Ultimately the angular team says:
Browser code should not rely on things that are not available in browser environments.
I'm assuming that the library needs to use these things to connect to the local network and interact with your home automation.
If i'm wrong then the article does have a way to supply an empty file instead of those modules, so if the code has alternate modes then it could work, but it doesn't seem likely to me off the top of my head.

Related

I cannot run library(survminer)

This error message comes up. Help would be appreciated. Thank you.
Loading required package: ggpubr
Error: package or namespace load failed for ‘ggpubr’ in loadNamespace(j <- i[[1L]], c(lib.loc, .libPaths()), versionCheck = vI[[j]]):
there is no package called ‘car’
Error: package ‘ggpubr’ could not be loaded

Unable to get the source file of an error on react-native

I am debugging an application that throws me the error of
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.
[Fri Oct 23 2020 09:04:14.325] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
But it doesn't say where is the source file of the error... since it is a big application I am having trouble finding where this error is located.
I am able to compile the application but the error happens on the initialization.
When I run the debugger it says the following on the developers console...
Unable to symbolicate stack trace: The stack is null
Plus the previous errors.
Any idea how I could locate the source file of this errors?
Thank you for your help!

MainActivity error while importing package: `react-native-google-vr-panorama`

I am getting an error when I import a package into my JS file:
import GoogleVRPanorama, { PanoramaView } from 'react-native-google-vr-panorama'
Error:
This error I get with all the VR 360 components I try to import.
Edit-1:
I did follow the installation steps but I didn't rebuild the app
MainApplication.java: MainApplication
So when I rebuild the app, getting the following error:
C:\Users\cherry\Test03\node_modules\react-native-google-vr-panorama\android\src\main\java\com\xebia\googlevrpanorama\RNGoogleVRPanoramaPackage.java:14:
error: method does not override or implement a method from a supertype
#Override
^ Note: C:\Users\cherry\Test03\node_modules\react-native-google-vr-panorama\android\src\main\java\com\xebia\googlevrpanorama\RNGoogleVRPanoramaView.java
uses unchecked or unsafe operations. Note: Recompile with
-Xlint:unchecked for details. 1 error :react-native-google-vr-panorama:compileReleaseJavaWithJavac FAILED
FAILURE: Build failed with an exception.
What went wrong: Execution failed for task ':react-native-google-vr-panorama:compileReleaseJavaWithJavac'.
Compilation failed; see the compiler error output for details.
Sounds like you either
1. Did not finish the install steps, i.e. adding lines to MainApplication etc., see https://github.com/XebiaStudio/react-native-google-vr-panorama/blob/master/README.md#installation for details
or
2. Did not rebuild the app with react-native run-android.

Getting Failed to load %5Bobject%20Object%5D on Webpack generated js hosted in express due to stylus styles

I am working on augmenting the example found here. So first of all it works great if I call npm start. Now I wanted to try and get it to work with an existing ExpressJS project. To do this in a quick and dirty way I copy the three js files to the ./public/javascripts folder and create the following index.jade...
extends layout
block content
my-app Loading....
script(type="text/javascript", src="http://localhost:3000/javascripts/polyfills.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/vendor.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/app.js")
but now I get....
Error: Uncaught (in promise): Failed to load %5Bobject%20Object%5D
at resolvePromise (zone.js:538)
at PromiseCompleter.reject (zone.js:515)
at application_ref.js:349
at ZoneDelegate.invoke (zone.js:323)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:48)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:39)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.ZoneTask.cancelFn.invoke (zone.js:426)
zone.js:461 Unhandled Promise rejection: Failed to load %5Bobject%20Object%5D ; Zone: angular ; Task: Promise.then ; Value: Failed to load %5Bobject%20Object%5DconsoleError # zone.js:461_loop_1 # zone.js:490drainMicroTaskQueue #zone.js:494ZoneTask.ZoneTask.cancelFn.invoke # zone.js:426
Current project is available here
So for some reason this worked with the built in webpack server
styleUrls: [String(require('./navbar.component.styl'))]
This of course should be
styles: [String(require('./navbar.component.styl'))]

React-Native + crypto : How to generate HMAC in React-Native?

I have tried crypto, which obviously doesn't work because it depends on node running. So, I turned to crypto-browserify, but I believe there are dependency issues. If anyone could help, I'd be much appreciative.
For reference, I previously used crypto like so:
crypto.createHmac('md5', "MY_KEY").update('SOMETHING_TO_ENCRYPT').digest('hex');
EDIT
I am trying to encrypt a string salted with a key. The above code is what I used previously to attain this. I need to do an analogous operation in React-Native.
When trying to use crypto-browserify (which I thought would work in React-Native), I get the following in the packager:
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/plist-parser/node_modules/sax/lib/sax.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/plist-parser/node_modules/sax/lib/sax.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/create-hash/node_modules/cipher-base/index.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/create-hash/node_modules/cipher-base/index.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/create-hmac/browser.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-cipher/node_modules/browserify-aes/node_modules/cipher-base/index.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-cipher/node_modules/browserify-aes/node_modules/cipher-base/index.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-cipher/node_modules/browserify-des/node_modules/cipher-base/index.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-cipher/node_modules/browserify-des/node_modules/cipher-base/index.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/browser.js
Unable to resolve module vm from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/api.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/base/buffer.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/decoders/pem.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/encoders/der.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/encoders/pem.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/browserify-aes/node_modules/cipher-base/index.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/browserify-sign/node_modules/parse-asn1/node_modules/browserify-aes/node_modules/cipher-base/index.js
Unable to resolve module vm from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/api.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/base/buffer.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/decoders/pem.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/encoders/der.js
Unable to resolve module buffer from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/asn1.js/lib/asn1/encoders/pem.js
Unable to resolve module stream from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/browserify-aes/node_modules/cipher-base/index.js
Unable to resolve module string_decoder from /Users/kelseyregan/BitBucket/React-Native-core/reup/node_modules/crypto-browserify/node_modules/public-encrypt/node_modules/parse-asn1/node_modules/browserify-aes/node_modules/cipher-base/index.js
As Nader Dabit pointed out, using the npm package crypto-js with RN on version 0.12.0 seems to do the trick.
For the year of 2020, you should use crypto-js with v3.3.0 now.