We Keep Coding

Can I use face-recogition npm package in react?

I'm learning react and I'm trying to implement an npm package called face-recognition in my react project.
But it looks like that their documentation is for nodejs. I've looked into the source code of the package which seems that it doesn't export any module so I just imported it. But still, my console is giving me the error ModuleNotFoundError
Inshort: Can I use this face-recognition library in my react.js?
Here is my live code in codesandbox
Below is the raw code of the same file.
import React from "react";
import "face-recognition";
import image1 from "./assets/fFace.jpg";
import image2 from "./assets/mFace.jpg";
const Home = () => {
const imageOne = image1;
const win = new fr.ImageWindow();
// display image
win.setImage(imageOne);
const detector = fr.FaceDetector(imageOne);
// detect all faces
const faceRectangles = detector.locateFaces(imageOne);
return (
<>
<h1>Face Recognition</h1>
{faceRectangles}
</>
);
};
export default Home;

From the npm page
This package is pretty much obsolete. I recommend you to switch to face-api.js, which covers the same functionality as face-recognition.js in a nodejs as well as browser environment.

Unable to decode jwt with jwt-decode

I'm trying to decode my token with jwt-decode but I can't. It gives me the following error. Does anyone know why?
ERROR Error: Uncaught (in promise): TypeError: jwt_decode_1.default is
not a function TypeError: jwt_decode_1.default is not a function
at RoleGuardService.canActivate (role-guard.service.ts?d7c4:19)
import jwt_decode from 'jwt-decode';
canActivate(route: ActivatedRouteSnapshot): boolean {
// this will be passed from the route config
// on the data property
const expectedRole = route.data.expectedRole;
const token = localStorage.getItem('token');
// decode the token to get its payload
const tokenPayload = jwt_decode(token);
console.log(tokenPayload);
if (
!this.auth.isAuthenticated() ||
tokenPayload.role !== expectedRole
) {
this.router.navigate(['login']);
return false;
}
return true;
}

I think you should import it like this:
import * as jwt_decode from 'jwt-decode';

According to documentation + internet search, the correct way is:
1. Install the package + types
npm install --save jwt-decode
npm install --save #types/jwt-decode
When you import the jwt_decode, you should surpass a rule from tslint, your code will look exactly like this (with commented line above)
// #ts-ignore
import jwt_decode from "jwt-decode";
Otherwise you will get an error like this
You can add also the rule for that on tsconfig.json , but is 1 time exception :)

I had the same error but after many attempts I did manage to solve this problem by using another method:
private decode(token: string) {
try {
return JSON.parse(atob(token.split(".")[1]));
} catch (e) {
console.log("error decoding token");
}
}
function atob() references

jwt_decode has always been a CommonJS module which generally are imported as const jwt_decode = require('jwt-decode');, it's what Node.js uses.
The way to import CommonJS libraries with a JS import statement is import * as library-name from 'library-name;.
Modern frameworks like Angular 10 throw a warning when using packages with the CommonJS format, because they generally speaking can't be tree-shaked.
Version 3 (now in beta) of this library includes a more modern ESM build, which is what JS import statements are meant for, so importing the modern ESM package can be done the regular way using import jwt_decode from 'jwt-decode';. This is a breaking change, that's why I've created a new major version 3.
We still have a CommonJS build, but by default most modern build systems for the web (not node) will use the ESM build.
if you checkout the package.json file when installing the lib, you'll notice both builds in there.
{
...
"main": "build/jwt-decode.cjs.js",
"module": "build/jwt-decode.esm.js",
...
}
references

npm install --legacy-peer-deps
npm install --save jwt-decode
npm install --save #types/jwt-decode
This solves mine problem
reference

React-Native cannot import library

I'm trying to import the Ethereum web3.js library into a React Native project.
I've followed the React Linking Libraries instructions, installing the web3.js package and linking it with the commands:
$ npm install web3 --save
$ react-native link
My index.ios.js file looks as follows:
import { default as Web3 } from 'web3';
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class ReactProject extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('ReactProject', () => ReactProject);
The error message I receive in the simulator when I run the app {"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"} is not very helpful as the terminal shows only the same message.
How do I go about importing libraries like this into React Native?

I created a step-by-step simple guide on how I set up web3.js 1.0.0-beta.24 with Create React Native App, without modifying node_modules:
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766

I was able to make it work on web3 version 0.x and open sourced the solution creating babel-preset-react-native-web3 so that it works out of the box, it might not be considered 100% secure if using for creating an account since it uses Math.Random() behind scenes.
For more info see the following sample app using web3 version 0.20.0, react 16 and expo.
Hope that helps,

Try this instead to import the library:
var Web3 = require('web3');

Fixed: https://github.com/ethereum/web3.js/issues/576
Edit The Following File
/node_modules/bignumber.js/bignumber.js
edit as follows:
-if ( !crypto ) try { crypto = require('crypto'); } catch (e) {}
+if ( !crypto ) try { crypto = require('crypto-js'); } catch (e) {}
Web3 Version: 0.18.2

React Redux History error - TypeError: (0 , _history2.default) is not a function

History 2.0.0-rc2
Followed this example verbatim and:
import { createHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { syncHistory } from 'react-router-redux';
const history = createHistory(); //<-- ***THIS LINE IS FAILING!!!***
const routingMiddleware = syncHistory(history);
...creating history is failing with TypeError: (0 , _history2.default) is not a function. I've tried without the {} and tried importing it from createBrowserHistory as well with the same result. What am I missing? I opened a but against History but they said we don't look into bugs so please post on stackoverflow.

OK - apparently for now push, replace, etc have to be called from react-router instead of react-router-redux (formerly redux-simple-router). Anyway, I am going back to the 1.x version of them all since those worked.
#Brandon - FYI- I did have the right History version. Thanks for the suggestions though

It looks like something is wrong with your npm package for history.
Try running npm ls|grep history to see what version you have installed. Ensure you are really on the latest version (2.0.0-rc2).
You can also try deleting node_modules/history and reinstalling it.

Force typescript not to remove unused references

Please check my demo project on github.
In my react-tfractal/tests/component/tfractal.spec.tsx test:
import * as React from 'react';
import * as ReactTestUtils from 'react-addons-test-utils';
import {expect} from 'chai';
import {Tfractal} from '../../src/tfractal';
var R = React;
describe('tfractal', function () {
it('renders', function () {
var tfractal = ReactTestUtils.renderIntoDocument(<Tfractal />);
expect(tfractal).exist;
});
});
React import is never used, but required by the react-addons-test-utils (I get an error message "React is not defined" without the React import). The problem is: without the line
var R = React;
this import is removed by the typescript compiler.
The
import 'react'
doesn't get removed but doesn't work (the same error message "React is not defined").
How can I work around it without creating a dummy variable?
Run
npm install
tsd install
npm run test
to check.

I don't understand why this is happening to be honest, but try adding this line:
global.React = React
Or even this might work:
React;