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.
Related
I have followed the introduction guide: https://kitware.github.io/vtk-js/docs/develop_requirement.html to install vtk, node and git.
I have been trying to integrate into a React aplication, and it outputs:
Failed to compile
./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js
1126:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not found in './ComputeGradients.worker'
I just have used the code in: https://kitware.github.io/vtk-js/examples/PolyDataReader.html
In addition if I go to the previous file and deep into ./ComputedGradients.worker, I navigate well to ComputeGradients.worker.js.
Do I need other requirement to execute the aplication? I am using a node server.
In addition I have written the code as React code:
import React from 'react';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkPolyDataReader from 'vtk.js/Sources/IO/Legacy/PolyDataReader';
class LoadVTK extends React.Component() {
render() {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const resetCamera = renderer.resetCamera;
const render = renderWindow.render;
const reader = vtkPolyDataReader.newInstance();
reader.setUrl(`C:\Users\YonePC\WebstormProjects\prototipo\src\components\animals\cabezasegmentado02.vtk`).then(() => {
const polydata = reader.getOutputData(0);
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
mapper.setInputData(polydata);
renderer.addActor(actor);
resetCamera();
render();
});
return (
<div></div>
);
}
}
export default LoadVTK;
And I have used it from the main page as:
<LoadVTK/>
What could be the problem?
I had run your example and found two issues:
problem with dist path (already solved by #Jonathan Quiroz)
extends React.Component() instead of React.Component - which causes that code can be built, but can't be run properly in browser.
Don't forget to setup webpack properly (https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html)
After these two updates it should work - I have already tested it.
you have to put the file in the server, for example i am running with webpack and the file is inside the folder dist:
dist/cabezasegmentado02.vtk
And when you call the file:
reader.setUrl("cabezasegmentado02.vtk")
I am following this tutorial and trying to implement graphQl. There is an issue with the following line:
const client = new ApolloClient();
Strangely I cannot find anything in the react-apollo GitHub page for this. Is there something stupid that I am doing wrong.
import React, { Component } from 'react';
import ChannelsList from './ChannelsList.js';
import './App.css';
import {
ApolloClient,
gpl,
graphql,
ApolloProvider
} from 'react-apollo';
//issue with this line
const client = new ApolloClient();
const channelsListQuery = `
query ChannelsListQuery {
channels {
id,
name
}
}
`;
const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<ChannelsListWithData />
</ApolloProvider>
);
}
}
export default App;
To provide a straightforward answer - ApolloClient is no longer a part of the react-apollo package, but made it to a package of it's own: apollo-client.
You may also see it being imported from apollo-boost, a convenience which "includes some packages that we [Apollo's authors] think are essential to developing with Apollo Client."
having the same issue here and actually following the same article (https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b) as the OP. The issue is that the article is really old and out of date and I would not recommend using it as a guide (take a look at the comments in the article).
For a start I'd recommend looking at the docs. This link (http://graphql.org/graphql-js/) in particular is a good starting place for getting something up and running.
I've followed meteor tutorial, and when I finished I've decided to install eslint.
Now I see
Prefer default export import/prefer-default-export
for this line: export const Tasks = new Mongo.Collection('tasks'); in imports/api/tasks.js file. It contains also some Meteor methods. Here it is full source code: tasks.js.
I was trying to fix this eg. with
const Tasks = new Mongo.Collection('tasks');
export { Tasks as default };
But then browser stopped rendering the view.
Here is the server/main.js content, which imports tasks.js:
import '../imports/api/tasks.js';
How can I fix lint error without breaking applications functionality?
You could add an .eslintrc file to your project root and adapt the rule:
{"rules": {"import/prefer-default-export": ["off"]}}
UPDATE:
If you want to keep the rule, then you need to export Tasks as default like so:
const Tasks = new Mongo.Collection('tasks');
export default Tasks;
Now you have to change all the imports in the rest of your codebase from a named import to a default import. The named import looks like this
import { Tasks } from '/imports/api/tasks';
see e.g. here, whereas the new default import has to look like this
import Tasks from '/imports/api/tasks';
This should do it. Let me know if it works for you.
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
Simple question, I'm trying to use electron and I need to get the remote object on the client.
Doing
const {BrowserWindow} = require('electron').remote; // Works
But
import {BrowserWindow} from 'electron/remote' // Does not work
New to ES6 classes just unsure why this is not working. Thanks.
You can only import from modules. electron/remote is not a module, but remote is part of the module electron, so you can write :
import remote from "electron";
And then you can do :
const {BrowserWindow} = remote;
But your first code works fine !
You can read more on import statement here
Hope this helps
I think you're supposed to use it like this:
import {remote} from 'electron'
// do something with remote.BrowserWindow