Develop Reference

How to use github's kadena-io/cardano-crypto.js mnemonic in react native wallet

I want to use github's kadena-io/cardano-crypto.js.This is the cardano-crypto.js Link: https://github.com/kadena-io/cardano-crypto.js. But it is an error when used. I've tried a lot to fix the error, but it doesn't work. To get lib.js file in cardano-crypto.js, first I have to install npm. I did that. Then came the lib.js file. Then I tried to import cardano-crypto.js's mnemonicToRootKeyPair function to my react-native wallet. But there is an error. To solve the error, first I tried to import cardano-crypto.js with node module. Then I tried to import without node_module. I have imported in several ways.
import {} from 'path'
,
_importDefault (require ('path'))
. But somehow Cardano-crypto.js's mnemonicToRootKeyPair could not run/import. Error says lib.js: path could not be found. But the lib.js file is there. Now how do I solve this how to use mnemonicToRootKeyPair of cardano-crypto.js in our react native wallet?
This is the cardano-crypto.js mnemonicToRootKeyPair function code that I want to use:
async function mnemonicToRootKeypair(mnemonic, derivationScheme) {
validateDerivationScheme(derivationScheme)
if (derivationScheme === 1) {
return mnemonicToRootKeypairV1(mnemonic)
} else if (derivationScheme === 2) {
return mnemonicToRootKeypairV2(mnemonic, '')
} else {
throw Error(`Derivation scheme ${derivationScheme} not implemented`)
}
}
And this is the error when I use the function in my react native wallet:
Failed building JavaScript bundle.
Unable to resolve module path from C:\Users\DCL\Desktop\app\cardanoCrypto\lib.js: path could not be found within the project.

What is the correct way to import esm/dist modules? (React/javascript)

So we're using the geist component library in our codebase. It's pretty much integrated into parts of our app and since this library is 250kb, it's impacting our page speed. To circumvent importing the entire module, the usual solution is just importing what you need and ideally, nothing should break and everything should work as expected.
import { CssBaseline } from "#npkn/geist-react"
Doing the above should work but adds 250kb to the bundle.
Another way to import a component would be to import the specific file. I get two options to import the component from either ESM or dist modules
import CssBaseline from "#npkn/geist-react/dist/css-baseline"
and
import CssBaseline from "#npkn/geist-react/esm/css-baseline/index"
I've tried doing both of these but webpack throws errors. I've tried importing named exports as well but even then it throws an error.
TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function
9 | static async getInitialProps(ctx) {
10 | const initialProps = await Document.getInitialProps(ctx)
> 11 | const styles = CssBaseline.flush()
| ^
12 |
13 | return {
14 | ...initialProps,
My question is am I doing the imports right or is there something I'm missing?
Thank you!

If anyone else comes across this question, please check out the bundle size example https://geist-ui.dev/en-us/guide/bundle-size. The example doesn't quite work but I found this work around https://spectrum.chat/geist-ui/react/minimize-build~d30af727-2b97-4d16-9357-9b4e5104fdc9
Instead of doing
import Button from '#geist-ui/react/esm/button'
do
import Button from '../../../../node_modules/#geist-ui/react/esm/button';
Reduced our bundle size significantly!

JavaScript/TypeScript Dynamic Imports and browsers - options

I have a relatively simple requirement to start out with.
I want to be able to load a particular UI component, based on some dynamic context. I was thinking that dynamic imports could be used for this purpose. The dynamic imports should be loaded through the Web browser (no nodeJS).
Details about what is possible with dynamic imports are very sketchy to me - at best, probably also because I'm not an expert in the field of JavaScript/TypeScript (yet).
I'm using vanilla JS at the moment and vitejs as build tool.
Here is what I have so far.
This is my main.ts file:
const getPath = () => {
if (import.meta.env.MODE === 'development') {
return 'http://127.0.0.1:3000/one.js';
} else {
return 'http://127.0.0.1:5000/one.js';
}
};
import(getPath()).then((Module) => {
Module.default();
});
This already makes vitejs barf, complaining that it cannot analyze things - but I'm ignoring that for now. The one.js file looks like this:
const hello = () => {
console.log('Hello from one');
};
export default hello;
Both run dev as run serve work with this setup, as-in, the message is printed on the browser console.
My next thing I want to see working is how one.js would be able to itself import a module and work with that. I've tried this with moment like so:
import moment from "moment";
const hello = () => {
console.log('Hello from one ', moment().format());
};
export default hello;
This errors with:
Uncaught (in promise) TypeError: Error resolving module specifier “moment”. Relative module specifiers must start with “./”, “../” or “/”.
Now I don't know whether what I want to do, is not support or that I'm just not doing it the right way. Any pointers would be appreciated.

VS code turns 'it' into 'hasUncaughtExceptionCaptureCallback'. How to disable this?

I am going through a book on Test Driven Development in React. I've never written JavaScript tests before. The author presents the following Jest code in a file titled calc.test.js:
var add = require('./calc.js')
describe('calculator',function() {
it('add two numbers',function() {
expect(add(1,2)).toEqual(3)
})
})
but VS code automatically translates it to:
const { hasUncaughtExceptionCaptureCallback } = require('process')
const { isTypedArray } = require('util/types')
var add = require('./calc.js')
describe('calculator', function () {
isTypedArray('add two numbers', function () {
hasUncaughtExceptionCaptureCallback(add(1, 2).toEqual(3))
})
})
The author states that his version uses syntax "borrowed from" jasmine. Is that why VS Code changed it? How do I turn this feature off? Jest is installed.

Seems like vscode tries to autocomplete it and expect, and auto imports the modules process and utils/types.
Even though manually importing isn't required per the jest documentation:
In your test files, Jest puts each of these methods and objects into
the global environment. You don't have to require or import anything
to use them. However, if you prefer explicit imports, you can do
import {describe, expect, test} from '#jest/globals'.
You can silence vscode warnings by explicitly importing:
import {describe, expect, test} from '#jest/globals'

React program works fine on jscomplete.com/repl but the same code gives me the following error when I run in my browser

React program works fine on jscomplete.com/repl but the same code gives me the following error when I run in my browser, writing my code in my editor and using babel.
babel-browser.min.js:41 Uncaught SyntaxError: http://localhost/react1/app.jsx: Unexpected token (2:14)
1 | class Button extends React.Component{
> 2 | handleClick = () => {
| ^
3 | this.props.onClickFunction(this.props.incrementValue);
4 | }
5 | render() {

The handleClick function in that code is defined as a class instance field which is not yet part of JS (currently at stage 2)
To make it work, you have to configure Babel with one plugin that includes it (for example, babel-preset-stage-2, or directly babel-plugin-transform-class-properties).
Alternatively, use a normal function definition in the class and bind it to this inside the constructor of the component.