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.

react-native-image-picker is undefined

I have installed the package react-native-image picker:
npm i react-native-image-picker --save
And I have also linked it to my project:
react-native link react-native-image-picker
And when I try to import the module and use it:
import ImagePicker from 'react-native-image-picker';
ImagePicker.launchImageLibrary(options, (response) => {
// code here
}
I receive this following error:
typeError: Cannot read property 'launchImageLibrary' of undefined
What went wrong here?

You should carefully check the newest documentation of this npm package as it was migrated to newer version. The old 2.x.x version is deprecated, as written in the GitHub page of the package, thus names of key modules might have changed...

Below is the solution for it,
import {launchImageLibrary} from 'react-native-image-picker';
const changePhoto = () => {
const options = {
noData: true,
};
launchImageLibrary(options, (response) => {
console.log(response);
});
};
<TouchableOpacity onPress={changePhoto}>
<Text>Change Photo</Text>
</TouchableOpacity>

At the place of
import ImagePicker from 'react-native-image-picker';
replace with
var ImagePicker = require('react-native-image-picker');
and run the application again.

For 3.x version, you can directly import the function like
import {launchImageLibrary} from 'react-native-image-picker';
In an Expo project, I still got the same error, like this issue (since lauchImageLibrary comes from NativeModules.ImagePickerManager). But it works fine in the project initialized with React Native CLI.

For version 3.x, let run npx pod-install then get the function by that way import { launchImageLibrary } from 'react-native-image-picker';

How to setup the DfxParser in Angular

I want to use https://github.com/gdsestimating/dxf-parser in my project. When i import in like:
import { DxfParser } from 'dxf-parser';
and than call:
new DxfParser()
i get an error:
TypeError: dxf_parser__WEBPACK_IMPORTED_MODULE_3__ is not a
constructor
What would be the correct way to use the DxfParser in angular? I want to do the same in angular as the jaascript example on projects site:
var parser = new DxfParser();
try {
var dxf = parser.parseSync(fileText);
}catch(err) {
return console.error(err.stack);
}
thanks a lot!

Like the readme of the github states, did you install DxfParser?
npm install dxf-parser
You might also need to install the types for typescript like so:
npm install #types/dxf-parser
Since installing does not seem to be the problem I tried it myself. Doing the import like you did does not work. I looked into the code and it seems that DxfParser is a default export. So if you do:
import DxfParser from "dxf-parser";
It should be working.
More information on exports can be found here

Critical dependency warning when using react-pdf

I'm trying to display a pdf on a react application and i get the following warning:
/node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Vscode tells me this under the import function.
Could not find a declaration file for module 'react-pdf'
Already tried running npm install, npm install react-pdf and reinstalling the package
import React, { Component } from 'react';
import { Document } from 'react-pdf';
import sample from 'file location'
export default class viewer extends Component {
render() {
return (
<div>
<Document
file={sample}
onLoadSuccess={this.onDocumentLoadSuccess}
>
</Document>
</div>
);
}
}
Displays:
"Failed to load PDF file" in the browser

This code will display your pdf file, but issue will display in IDE console.
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
In my case I'm using webpack 4 and it's not supportted yet.
If you build project it will work fine.

My full workaround.
Create a file at the root called config-overrides.js and it should contain the following:
module.exports = function override(config) {
config.module.rules[0].parser.requireEnsure = true
return config
};
After that npm i react-app-rewired to you app and change your build function in package.json to read react-app-rewired build/react-app-rewired start.
That should do it for now.

Mocha keeps bombing due to absolute paths

I'm having a great deal of trouble using Enzyme and Mocha to test my React project. I have a test like this:
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { ChipInput} from '../client/components/Chips';
describe('<ChipInput />', _ => {
it('rocks', done => {
done();
});
});
And when ChipInput gets imported, that file imports something with an absolute path, e.g. /lib/collections/tags, and then Mocha errors out because it apparently only does relative paths. How do I get this working?
EDIT:
The actual error:
Error: Cannot find module '/lib/collections/tags'
This happens because /tests/ChipInput-test.js imports the ChipInput component from /client/components/Chips/index.js, which has the following lines:
import React from 'react';
import {
MapsLocalOffer as TagIcon,
ImageRemoveRedEye as InsightIcon,
EditorInsertChart as TestIcon,
SocialPerson as UserIcon,
} from 'material-ui/svg-icons';
import { Tag } from '/lib/collections/tags'; // error thrown here
import { Insight } from '/lib/collections/insights';
// import { Test } from '/lib/collections/tests';
import Chip from './Chip';
import ChipDisplay from './ChipDisplay';
import ChipInput from './ChipInput';
import * as chipTypes from './chip-types';

To anyone hitting here from google, while ffxsam's answer will work, there are many ways to accomplish this. Node's require allows for a base to be set either via environment variable or programmatically, allowing for simple absolute paths that don't require the leading slash (require("my/module"); vs require("/my/module");).
I use gulp as a taskrunner, so my preferred technique is to use app-module-path to do the following at the top of my gulpfile (this will work anywhere, so long as you haven't encountered any absolute requires yet):
require('babel-core/register'); //for mocha to use es6
require('app-module-path').addPath(__dirname + '/src'); //set root path
//I also use webpack to pull in other extensions, so I
//want mocha to noop out on them
require.extensions['.css'] = _.noop;
require.extensions['.scss'] = _.noop;
require.extensions['.png'] = _.noop;
require.extensions['.jpg'] = _.noop;
require.extensions['.jpeg'] = _.noop;
require.extensions['.gif'] = _.noop;
For a more complete rundown, check out this gist by github user branneman: https://gist.github.com/branneman/8048520

This has been awhile, but I want to share my solution here, just in case, all solutions above don't work in your specific situation. I was looking for a solution to fix our unit test, which failed "Error: Cannot find module 'components/shared/xyz', our 'components' folder is under 'client/src' folder, so I came up with the following solution which works for us.
npm install babel-plugin-module-resolver --save-dev
{
'plugins': [
'babel-plugin-module-resolver',
{ 'root': ['client/src'] }
]
}

Here's the solution, nice and simple!
https://github.com/mantrajs/babel-root-slash-import
Basically, install said package:
npm install babel-root-slash-import --save-dev
Add the plugin to .babelrc:
{
"plugins": [
"babel-root-slash-import"
]
}
And it's good to go.