I have an issue I can not seem to resolve, I am new to this and don't know whether there is something wrong in my code or the server is simply not available.
I am trying to import face recognition API from Clarifai into React App, followed the npm guide how to install, but once I do
import {ClarifaiStub, grpc} from "clarifai-nodejs-grpc";
I get an error
./node_modules/#grpc/grpc-js/build/src/server.js
Module not found: Can't resolve 'http2' in 'C:\Users\mkura\Documents\GitHub\find-the-face\node_modules\#grpc\grpc-js\build\src'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Actualy, there is const {ClarifaiStub, grpc} = require("clarifai-nodejs-grpc"); in the guide, which I changed to
import {ClarifaiStub, grpc} from "clarifai-nodejs-grpc";
assuming I have to import it this way. What do I do wrong?
From your question I assert that you're trying to install the Clarifai node API into a react app.
That fails because this package is a node app using standard library features like http2 which are not available in the browser.
Instead of the clarifai-nodejs-grpc you will have to use clarifai in your react app from what I can see in their docs.
Related
I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet in my index.js:
import 'rsuite/lib/styles/index.less';
I get the following message when running gatsby develop:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
If you're trying to use a package make sure that 'rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct.
File: src/pages/index.js:14:0
failed Building development bundle - 7.237s
ERROR in ./src/pages/index.js 14:0-38
Module not found: Error: Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
# ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 31:11-33:5
# ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 1 error
I tried so many things already: installing and reinstalling rsuite, installing and reinstalling gatsby-plugin-less and less, clearing the cache, trying all kinds of configurations in gatsby-config.js, but I'm out of options really.
Meanwhile, installing react-bootstrap and importing the stylesheet similarly through
import "bootstrap/dist/css/bootstrap.min.css";
does not produce the error and the stylesheet gets applied.
Would greatly appreciate your help!
I think you should be using:
import '~rsuite/lib/styles/index.less';
Notice the ~, as it is inferred from the docs.
You can try this:
import "rsuite/src/styles/themes/default/index.less"
https://github.com/rsuite/rsuite/blob/next/examples/with-gatsby/src/pages/index.js#L4
I am trying to use QuickBlox JavaScript SDK for chat communication for react.js app. But while running the app i am getting this error. I have installed all the dependencies but still getting this error.
Try importing it like so:
import * as QB from 'quickblox/quickblox'
When I add a new React component to my NextJS app (React, TypeScript and GraphQL), my local development environment suddenly breaks with this cryptic error:
wait - compiling...
error - ./node_modules/busboy/lib/main.js:1:0
Module not found: Can't resolve 'fs'
null
When I stash my new component, everything works fine. I'm trying to figure out what it is in my new component that's triggering this error.
Relevant dependencies:
#apollo/client: ^3.2.5
apollo-server-micro: ^2.18.2
graphql: ^15.4.0
next: 10.0.0
react: 17.0.1
react-dom: 17.0.1
Turns out I was importing gql from the wrong package. As I'm building both the server and the client in one app, I have to be careful importing the right methods from the right packages.
This line from my imports caused the error:
import { gql } from "apollo-micro-server
Changing the line to this fixed the error:
import { gql } from "#apollo/client"
I am trying to add Login functionality to a React app I'm building using Amplify and AWS Cognito, but when I add the following line in my Login.js file:
Import {Auth} from "aws-amplify-react";
and try to compile, I get the following error:
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in 'my_react_path/node_modules/aws-amplify-react/lib-esm/Analytics'
I tried installing Amplify with homebrew and npm, but I can't get around this, any tips?
EDIT:
Initially I had:
Import {Auth} from "aws-amplify";
But The compiler couldn't resolve aws-amplify, and I could only find aws-amplify-react in the node_modules folder so I changed it.
However, in "node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js" in line 39:
import Analytics from '#aws-amplify/analytics';
The problem is that it can't find aws-amplify... Did I make a mess while installing maybe?
Assuming that you are not worried about bundle size at this stage, probably your easiest course of action is to remove your node_modules entirely, then:
npm i aws-amplify
import like this:
import Amplify, { Auth } from 'aws-amplify'
You only need to install/import aws-amplify-react if you plan on using the OOTB UI components. If you are making your own UI components for login you don't need that package at this stage.
I get a similar error
Failed to compile.
./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '#aws-amplify/analytics' in '/Users/myuser/myproject/node_modules/aws-amplify-react/lib-esm/Analytics'
when following the Amplify tutorial.
The workaround I found is to execute:
npm i -S #aws-amplify/analytics #aws-amplify/interactions #aws-amplify/storage #aws-amplify/ui #aws-amplify/xr aws-amplify
Obviously, I would love to know how to avoid all these extra libraries.
I would revert to your previous version before attempting to add amplify (old package.json & node_modules)
Follow this walkthrough: https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native
When you get to the "Add Authentication" step, skip it and go straight to "Next Steps" -> "Authentication" and follow until you get to:
import Amplify, {Auth} from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
I'm trying to use google maps api in my react app using webpack and typescript.
i've tried installing this package:
npm install googlemaps
npm install #types/googlemaps
Then in my app
import * as GoogleMapsAPI from 'googlemaps';
I get the following error
[ts] File 'c:/MyAppFolder/node_modules/#types/GoogleMaps/index.d.ts' is not a module.
Not sure what I'm doing wrong
You don't need to import from "googlemaps". google.maps is a global variable declared in googlemaps/index.d.ts. So you can use google.maps in your code right away.
For example
const point = new google.maps.Point(0,0);
For more info about typescript module and namespace. You can follow this link