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.

Getting an TypeError: t is undefined in React while accessing commerce.js public key

I was trying to access the commercejs Library's Public Key in React. But i failed to do so and met with this error. I can't understand why i am getting this error.
src\lib\commerce.js
import Commerce from '#chec/commerce.js';
export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);
src\App.js
import React, {useState, useEffect} from 'react';
import {Products, Navbar} from './components';
import {commerce} from './lib/commerce';
const App = () => {
const [products, setProducts] = useState([]);
const fetchProducts = async () => {
const {data} = await commerce.products.list();
setProducts(data);
}
useEffect(() => {
fetchProducts();
})
console.log(products);
return (
<div>
<Navbar/>
<Products/>
</div>
)
}
export default App;
Error
TypeError: t is undefined
e
node_modules/#chec/commerce.js/lib/index.js:1

Ah, I see you're a man of culture as well, watching Javascript Mastery on Youtube!
Just check where you created the .env file. It should be stored in the root folder. I had it in my src folder that's how I got this error. If it doesn't work, then go to your commercejs client, login and then at your settings, refresh your PUBLIC API. When you get a new one, just replace it. It should work after this.

Robbie from Commerce.js here. We've had a number of issues from people following this tutorial, so here are a couple of things to watch out for:
Make sure your .env file is in your project's root folder (the same folder that your package.json file is in)
Ensure you have installed the dotenv package. You can make sure by running npm install dotenv or yarn add dotenv.
Put your public key in your .env file under the REACT_APP_CHEC_PUBLIC_KEY variable and ensure that your API key is valid. You can fetch your valid API keys from the Chec Dashboard.
Restart your local dev server after making changes to your .env file.
Hope this helps 👋

I got to same error. You should write terminal npm install #chec/commerce.js and npm install -g #chec/cli or visit the website commerce.js => "https://dashboard.chec.io/" .

I also face this issue when I watching Javascript Mastery on Youtube. What I did was, disconnect the connection with .env file and just add the public key to commerce.js.This is not the best practice.
export const commerce = new Commerce("Your public key", true);

Can't find a variable atob

Screen1.js
import React,{useEffect} from 'react'
import {View,Text} from 'react-native'
import * as firebase from 'firebase/app';
import '#firebase/firestore';
const Screen1 = props =>{
useEffect(() =>
{
var dbh = firebase.firestore().collection("Jots").doc("note");
dbh.set({name:"pradeep"}) //The yellow warning is popped up in this line.
});
return(
<View>
<Text>Title</Text>
</View>
)
}
console
[Unhandled promise rejection: ReferenceError: Can't find variable: atob]
Stack trace:
node_modules\#firebase\firestore\dist\index.cjs.js:23101:0 in <global>
http://192.168.0.108:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:131203:60 in fromBase64String
I just followed the guide in the expo documentation but still don't know why this problem is occurring. Need a clear explanation on this. And also what is atob variable?

I have tried downgrading but that's not resulted as a solution to me. I don't know why.
The global import of base64 in the app.js resolved this problem.
import {decode, encode} from 'base-64'
if (!global.btoa) { global.btoa = encode }
if (!global.atob) { global.atob = decode }
Thanks for your responses.

Worked for me ! Thanks papay0, there is indeed something wrong with version 7.9.1.
npm install firebase#7.9.0
expo r -c # restard expo without cache
You can rm -rf ./node_modules/ && npm i

I found a workaround, I still there is a bug on their side.
They just released 2 days ago version 7.9.1.
Try to use 7.9.0.
yarn add firebase#7.9.0
I am creating an issue for it, follow here.

Thanks #Pradeep. This worked for me on firebase 7.14.1:
import {decode, encode} from 'base-64'
if (!global.btoa) { global.btoa = encode }
if (!global.atob) { global.atob = decode }
and using import like this
import firebase from 'firebase';
import 'firebase/firestore'

The atob function is part of the JavaScript window object and is not available in React Native.
To decode base64-encoded data in React Native, you can use the base-64 library

Attempted import error: 'useDispatch' is not exported from 'react-redux'

I am trying to update my store in redux via useDispatch method, but I am getting a message like that:
Attempted import error: 'useDispatch' is not exported from 'react-redux'.
I am using this method for call the action to update my store.
import { useDispatch } from 'react-redux';
import { loggedInAction } from './redux';
const userInfo = () => {
const dispatch = useDispatch();
const loggedIn = user => dispatch(loggedInAction(user));

Edit (Sept 15, 2019):
Install react-redux#7.1.1 or react-redux#latest
Find latest version here: https://www.npmjs.com/package/react-redux?activeTab=versions
Install react-redux version: 7.1.0-rc.1
or do npm install react-redux#next

I just forget to give the curly braces over {useDispatch} and that's why I was facing this error!

You need to use v7.1.0, current release candidate is v7.1.0-rc.1
See this page
Note: The hook APIs listed in this page are currently a release candidate! We encourage you to try them out in your applications and give feedback. We hope that the APIs are stable at this point, but be aware that there may still be changes before final release.
These hooks were first added in v7.1.0.

You need to install the latest version of react-redux

This error is due to the version of react-redux
You can solve this problem by using
npm install react-redux#latest
For more information check the github page:
check this

Importing npm packages in Nativescript Playground

I'm trying to learn nativescript-vue where I'm using the Nativescript's Playground to tryout my sample codes. I'm trying to use nativescript-localstorage package so that I can store some of the information into local storage:
Whenever I'm trying to save project it is giving use compilation error
and following is the error:
An error occurred while transpiling nativescript-localstorage/localstorage.js.
unknown: We found a path that isn't a NodePath instance. Possiblly due to bad serialisation.
I followed the tutorials and added the package as it was instructed my code looks like:
import Vue from 'nativescript-vue';
import Vuex from 'vuex';
import localStorage from 'nativescript-localstorage';
import userStore from './user-store';
//For local storage of vuex tools
const NSVuexPersistent = store => {
// Init hook.
let storageStr = localStorage.getItem('ns-vuex-persistent');
if (storageStr) {
store.replaceState(JSON.parse(storageStr))
}
store.subscribe((mutation, state) => {
// Subscribe hook.
localStorage.setItem('ns-vuex-persistent', JSON.stringify(state));
})
};
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
modules: {
userStore
},
strict: debug,
plugins: [NSVuexPersistent]
})
Since the project is not getting saved so I've not shared the link. Help me out with it. Thanks.

nativescript-vue is packaged within the Preview APK, so it can be imported as
import Vue from 'nativescript-vue'
But nativescript-localstorage is something you have installed in your project, so while at Playground you should use relative path to import the module, something like
import * as localStorage from "../nativescript-localstorage"
// Or
const localStorage = require("../nativescript-localstorage");
You can use import name from "package" only when the package has marked something as default in its exports, the syntax is commonly used in ES6 & Vue plugins. nativescript-localstorage has not exported anything as default.