Error using React Native using bitcoinjs-lib and ECpair / tiny-secp256k1 - react-native

I'm trying to use bitcoinjs-lib, but I get errors, I think it has to do with the explanation to use browserify.
For this:
import BIP32Factory from 'bip32';
const tinysecp = require('tiny-secp256k1')
const bip32 = BIP32Factory(tinysecp);
I get the following:
Uncaught TypeError: ecc.isPoint is not a function
at Object.testEcc (testecc.js:5:1)
at BIP32Factory (bip32.js:9:1)
Here's an alternative, and I get a different error:
import { Signer, SignerAsync, ECPairInterface, ECPairFactory, ECPairAPI, TinySecp256k1Interface } from 'ecpair';
const tinysecp: TinySecp256k1Interface = require('tiny-secp256k1');
const bip32: ECPairAPI = ECPairFactory(tinysecp);
Results in following error:
./node_modules/ecpair/src/ecpair.js 66:7
Module parse failed: Unexpected token (66:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class ECPair {
> __D;
| __Q;
| compressed;
Separately I tried to browserify bitcoinjs-lib and ecpair, but I think I'm doing something wrong.

I think bitcoin-js and tinysec are not going to work as is, because they are using some Node Js Core Features that are not Available at Runtime in an react-native app.
You can take a look at:
https://github.com/novalabio/react-native-bitcoinjs-lib as a substitute
or
https://gist.github.com/coreyphillips/4d45160fed016417a5f583f179c2cbdb a discussion about how to add bitcoin-js to react-native using a shim file

Related

"next-auth/react" module not found when making custom email sign in page in next-auth

I'm making a NextJs application with next-auth for the authentication part.
Email Sign In is successfully implemented using next-auth's own default pages.
But now I would like to have a custom sign in page. I followed the documentation for this, and added
pages: { signIn: '/auth/signin' } in my [...nextauth].js file. Then, I added the given Email Sign In code in pages/auth/signin.js.
But upon running yarn dev, I get this module not found error:
error - ./pages/api/auth/signin.js:1:0
Module not found: Package path ./react is not exported from package C:\...\node_modules\next-auth (see exports field in C:\...\node_modules\next-auth\package.json)
> 1 | import { getCsrfToken } from "next-auth/react"
2 |
3 | export default function SignIn({ csrfToken }) {
4 | return (
Import trace for requested module:
https://nextjs.org/docs/messages/module-not-found
And I couldn't find any module named 'next-auth/react' in npm or yarn websites.
Even in next-auth folder in node_modules, there is no 'react' named file...
How can I solve this? And am I doing anything wrong here?
I faced the same issue and realised the docs are for v4 where next-auth/react is used.
You are probably on v3 where next-auth/client is used instead.
To use the beta version, do:
➜ npm i next-auth#beta
You can now run npm install next-auth or yarn add next-auth. This will update the version of next-auth to version 4 in which you import SessionProvider as follows (within _app.tsx) :
import { SessionProvider } from "next-auth/react"
I think it should be imported from client and not react
try this : import { getCsrfToken } from "next-auth/client"
Also,
(just sharing an alternate solution), you need not define the custom pages in next auth. you can have your own login page and there just call next-auth's signin method, by passing the type like email or google.
and if email, then pass the email as well. eg:
const handleSubmit = (event) => {
event.preventDefault();
signIn("email", { email, callbackUrl: `${process.env.VERCEL_URL}/` });
};
I was facing this issue. I was using the "next-auth": "^4.18.7" version. my node version was 14.0.0. when I update this version to 18.12.1 then the issue is resolved.

Expo React Native: Code Splitting Incompatible Web Packages

I have a component that uses #stripe/stripe-react-native named NativeCheckout.
This package does not work on web (Chrome), and when I import it I get an error:
Failed to compile
/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components/StripeProvider.js
Module not found: Can't resolve '../../package.json' in '/home/joey/Projects/project/project_frontend/node_modules/#stripe/stripe-react-native/lib/module/components'
So if I run it in my browser, I do not want this component. This component is only rendered on native apps. I have found three alternative ways to import the Component. If my code is working fine then I add any of the follow lines, the above error is happening. I thought this would not load in the problem code.
const loadNative = async () => {
await import("./NativeCheckout")
}
const NativeCheckout = lazy(() => import("./NativeCheckout"));
const NativeCheckout = lazy(() => import("./NativeCheckout"));
Does anyone know a way to make this work?
TIA

Dynamic import not working inside Angular 8 library

Error on building angular library which uses dynamic imports.
When the library contains a file , which uses dynamic import to import a LazyModule,
import('./lazy/lazy.module').then(({ LazyModule }) => {
const MyComponent = LazyModule.entry;
....
The build will fail throwing error below.
Error: You must set "output.dir" instead of "output.file" when generating multiple chunks.
at error (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:3410:30)
at normalizeOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:17107:13)
at getOutputOptions (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16865:24)
at Object.write (c:\Development\rollup-test\node_modules\rollup\dist\rollup.js:16957:43)
at Object. (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:46:22)
at Generator.next ()
at fulfilled (c:\Development\rollup-test\node_modules\ng-packagr\lib\flatten\rollup.js:4:58)
Please export lazy.module in public-api.ts

Aurelia Webpack loader unable to find a module I add as a feature

I have a small Aurelia app built with Webpack. Under my src folder I have util folder with index.ts inside. In main.ts I turn the feature on like this:
import { Aurelia, PLATFORM } from "aurelia-framework";
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature(PLATFORM.moduleName("util"));
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}
util/index.ts:
import { FrameworkConfiguration } from 'aurelia-framework';
export function configure(config: FrameworkConfiguration): void {
config.globalResources([
"./converters",
"./rest"
]);
}
converters and rest are Typescript modules under util.
I'm following the instructions from Aurelia Hub.
When I open the app in the browser I see the following error:
Uncaught (in promise) Error: Unable to find module with ID: util/index
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.64.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.64.WebpackLoader._import (aurelia-loader-webpack.js:152)
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
If I reference the modules directly instead of the feature e.g.
import { Rest } from '../util/rest';
Then I get no errors and the app loads successfully. But I want to have these modules globally available.
Using aurelia-webpack-plugin version 2.0.0-rc.2
Would appreciate your advice.
Take a look at this:
https://github.com/aurelia/templating-resources/blob/master/src/aurelia-templating-resources.js
Edit:
I have gotten it working. The key is that you need to explicitly call PLATFORM.moduleName('./relative/path/to/file') on each path specifically and that the call needs to be made from the file (actually technically the same directory but still...) that calls config.globalResources().
In other words you can't shortcut the following code:
config.globalResources(
PLATFORM.moduleName('./resource1'),
PLATFORM.moduleName('./resource2')
);
Don't try to map the resources to PLATFORM.moduleName or to dynamically construct file names.
You should change your path PLATFORM.moduleName("util") into PLATFORM.moduleName("./util"). Then you can be able to use path relative to your util folder to register your globalResources. Also you can look into here for sample project structure. Also see this line of code, aurelia added /index to moduleName if it not included as it was based on convention.
If you already try using aurelia CLI, the created project under src/resources is registered as a feature.

Using react native with Optimizely

I try to follow documentation in Optimizely to get my react native app (#22.2) working but getting such bug.
MainActivity.java:24: error: cannot find symbol
Optimizely.startOptimizelyWithApiToken("xxxxxx", getApplication());
^
symbol: method startOptimizelyWithApiToken(String,Application)
location: class Optimizely
1 error
:app:compileDebugJavaWithJavac
What is wrong and how can I debug . I try
adb logcat ReactNative:V ReactNativeJS:V
but it's not giving me any information
I an on the engineering team at Optimizely and we've released a brand new product called FullStack that is more geared towards developers. As part of the product we now offer a JavaScript SDK for running experiments in all JavaScript clients, including React Native.
To use you would install our SDK:
npm install optimizely-client-sdk
And then you can split traffic using our activate and track methods.
Here is an example:
var optimizely = require('optimizely-client-sdk');
// Initialize an Optimizely client
var optimizelyClientInstance = optimizely.createInstance({ datafile: datafile });
// ALTERNATIVELY, if you don't use CommonJS or npm, you can install the minified snippet and use the globally exported varible as follows:
var optimizelyClientInstance = window.optimizelyClient.createInstance({ datafile: datafile });
// Activate user in an experiment
var variation = optimizelyClientInstance.activate("my_experiment", userId);
if (variation === 'control') {
// Execute code for variation A
} else if (variation === 'treatment') {
// Execute code for variation B
} else {
// Execute default code
}
// Track conversion event
optimizelyClientInstance.track("my_conversion", userId);
For more information please checkout our developer docs: https://developers.optimizely.com/x/solutions/sdks/introduction/index.html?language=javascript
i sorted problem is more about reading docs and using legacy:
compile ('com.optimizely:optimizely-legacy:+#aar') {
transitive = true
}
and then:
Optimizely.startOptimizely("xxxx", getApplication());