I'm following the feathersJS guide, but in TS and React and I've run into a problem trying to type the client object.
I've written the following code from the guide
import feathers from '#feathersjs/client';
import io from 'socket.io-client';
const socket = io();
const client = feathers();
client.configure(feathers.socketio(socket));
client.configure(feathers.authentication({
storage: window.localStorage
}));
And then a snippet from my top level React file I have and get a type error
useEffect(() => {
try {
return await client.reAuthenticate() // <- type error Property 'reAuthenticate' does not exist on type 'Application<any>'
}
})
I tried typing client as const client: Application = feathers(); but then I just get the type error Property 'reAuthenticate' does not exist on type 'Application<{}>'. How can I type client?
You need to use this #feathersjs/authentication-client library.
Run this commands npm install #feathersjs/authentication-client --save and follow this instruction.
#feathersjs/authentication-client declares reAuthenticate methods for you (see this).
Related
I am new to react with typescript particularly.
I have trouble to understand how can I define a type of the client from SockJsClient lib.
I have the following code:
// App.tsx
...
import SockJsClient from "react-stomp";
...
const [sjClient, setSjClient] = React.useState<any>();
...
...
<SockJsClient
url={SOCKET_URL}
topics={messageTopics}
onConnect={console.log("Connected!")}
onDisconnect={console.log("Disconnected!")}
onMessage={(message: Message) => onMessageReceived(message)}
debug={false}
ref={(client: any) => setSjClient(client)}
/>
...
I mark the client here of any type and it quite works. But I would like to have a real type if possible. So that when I reuse sjClient in different places and call sjClient.sendMessage(topic, message) on it - I want sendMessage to be pre-defined.
How to get the real type of the client?
I have a nextjs project, v12.1.3 with react v18.1.0. I use firebase realtime database to handle notifications into my project. It works in develop mode, but it doesn't in production (on built environment).
The errors I get are the following:
ReferenceError: emptyChildrenSingleton is not defined
at new bV (a198fdd9-b0625f5d1b77c03a.js:1:75705)
at new cF (a198fdd9-b0625f5d1b77c03a.js:1:95593)
at a198fdd9-b0625f5d1b77c03a.js:1:124619
at get _repo [as _repo] (a198fdd9-b0625f5d1b77c03a.js:1:124994)
at get _root [as _root] (a198fdd9-b0625f5d1b77c03a.js:1:125199)
at d_ (a198fdd9-b0625f5d1b77c03a.js:1:120499)
at n (index-493c2cb0fc06fe87.js:1:879)
at index-493c2cb0fc06fe87.js:1:826
at g0 (framework-47484f2290a3befd.js:1:91915)
at h9 (framework-47484f2290a3befd.js:1:113308)
[2022-06-13T21:12:40.922Z] #firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
at cM (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:99754)
at cI (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:97044)
at dC (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:109983)
at http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124197
at ap (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:3775)
at d.onServerInfoUpdate_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124182)
at d.handleTimestamp_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:43294)
at d.onReady_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:39829)
at aM.onConnectionEstablished_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:26211)
at aM.onHandshake_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:25266)
Uncaught TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
at cM (a198fdd9-b0625f5d1b77c03a.js:1:99754)
at cI (a198fdd9-b0625f5d1b77c03a.js:1:97044)
at dC (a198fdd9-b0625f5d1b77c03a.js:1:109983)
at a198fdd9-b0625f5d1b77c03a.js:1:124197
at ap (a198fdd9-b0625f5d1b77c03a.js:1:3775)
at d.onServerInfoUpdate_ (a198fdd9-b0625f5d1b77c03a.js:1:124182)
at d.handleTimestamp_ (a198fdd9-b0625f5d1b77c03a.js:1:43294)
at d.onReady_ (a198fdd9-b0625f5d1b77c03a.js:1:39829)
at aM.onConnectionEstablished_ (a198fdd9-b0625f5d1b77c03a.js:1:26211)
at aM.onHandshake_ (a198fdd9-b0625f5d1b77c03a.js:1:25266)
The integration is very basic: I write my notification client side and create them server side with firebase-admin. So the problem is reading from realtime database (in prod only).
The code is something like this (i simplified it)
const [textData, setTextData] = useState<any[]>([]);
useEffect(() => {
initFirebase();
fetchData();
}, []);
const fetchData = () => {
const db = getDatabase();
const starCountRef = ref(db, 'testData');
onValue(starCountRef, (snapshot) => {
const data = snapshot.val();
setTextData(
Object.entries(data || {}).map(
([key, value]: [key: string, value: any]) => ({
key,
text: value?.text,
})
)
);
});
};
Where initFirebase() is a classic:
import { getApps, initializeApp } from 'firebase/app';
const firebaseConfig = {
//my configs
};
// Initialize Firebase
const initFirebase = () => {
if (getApps().length && getApps.length > 0) return getApps()[0];
return initializeApp(firebaseConfig);
};
export default initFirebase;
It might seem all right. And it is. I made this into an empty project and it actually work. (here the repo without the error).
I tried to replicate the error I have in my repo and I did it. This is the repo with the error. The error must be something with the packages, react or nextjs version, but I don't get it.
For simplicity You can take a look directly to the repos. I think the code is all right.
How do you think this error can be fixed?
P.S. the repos are also deployed on vercel, so you can try also to see the logs. Of course you can also make a PR.
I found out the problem is the last version of next (12.1.3).
In particular swcMinify. In fact, I had this option set to true into the file next.config.js. I also found out that there are several issues about swcMinify in production build. So, in order to solve the problem I described above, you just have to turn off swcMinify, or remove it. After that everything seems to be all right.
Conclusion: This is not a firebase error.
I am currently stuck with a problem trying to fetch github repo data using the octokit npm package.
I use vite to run a dev server and when I try to make a request, the error that i get is:
Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
My React .tsx file looks like this:
import { Octokit, App } from 'octokit'
import React from 'react'
const key = import.meta.env.GITHUB_KEY
const octokit = new Octokit({
auth: key
})
await octokit.request('GET /repos/{owner}/{repo}', {
owner: 'OWNER',
repo: 'REPO'
})
export default function Repos() {
return (
<>
</>
)
}
I have redacted the information for privacy purposes.
If anyone knows how to resolve this issue with vite, please let me know!
Check first if this is similar to octokit/octokit.js issue 2126
I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project.
You'll need to install the isomorphic-fetch dependency before making this config change.
// svelte.config.js
const config = { // ... kit: {
// ...
vite: {
resolve: {
alias: {
'node-fetch': 'isomorphic-fetch',
},
},
},
},
};
export default config;
Note: there are still questions about the support/development of octokit: issue 620.
I'm trying to load #apollo/client on a React Native Expo app.
And I get this error:
While trying to resolve module #apollo/client from file /Users/andrepena/git/anglio-mobile-rn/screens/dictionary/index.tsx, the package /Users/andrepena/git/anglio-mobile-rn/node_modules/#apollo/client/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/andrepena/git/anglio-mobile-rn/node_modules/#apollo/client/main.cjs. Indeed, none of these files exist
Then I searched Stackoverflow and someone said I should add this to my metro.config.json
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
But now, all imports from #apollo/client simply return undefined.
Example:
import { ApolloClient, InMemoryCache } from "#apollo/client";
console.log(ApolloClient); // undefined
console.log(InMemoryCache); // undefined
In fact, #apollo/client is exporting this object:
Object {
"default": 17,
}
Any suggestion?
This metro.config.js worked for me: (remember to install #expo/metro-config)
const { getDefaultConfig } = require('#expo/metro-config');
const config = getDefaultConfig(__dirname, {
// Initialize in exotic mode.
// If you want to preserve `react-native` resolver main field, and omit cjs support, then leave this undefined
// and skip setting the `EXPO_USE_EXOTIC` environment variable.
mode: 'exotic',
});
module.exports = config;
The exotic thing makes Metro to be able to find the weird cjs module that #apollo/client exports
I'm delving into a React, Express and Typescript tutorial, to which I'm still pretty new to. Trying to better understand how setting up custom types works, and this is what I currently have.
In types.ts file:
import { Request, Response } from "express";
import { Redis } from "ioredis";
//import express from "express"; // adding this did not help
//import session from "express-session"; // adding this did not help
export type MyContext = {
req: Request; // & { session: Express.Session }; // this is my troublesome line
redis: Redis;
res: Response;
};
When trying to add
& { session: Express.Session }
I get the error:
any Namespace 'global.Express' has no exported member
'Session'.ts(2694)
Versions of devDepencies and also depencies have been compared so that they're the same. Trying the latest versions had no change.
devDependencies:
"#types/express": "^4.17.7",
"#types/express-session": "^1.17.0",
...
dependencies:
"express": "^4.17.1",
"express-session": "^1.17.1",
...
Things I've tried:
As comments show in the code, different import statements like express and/or session.
Changing strictNullChecks from true to false in package.json.
The latest versions of express, express-session, #types/express and #types/express-session.
Change type to interface.
Double checked similar questions before posting this (I had already looked here on SO and Google).
Comparing the tutorial's final code on GitHub vs my own code (they're the same as far as I can tell).
The error you are getting tells you that it's looking for a type in global.Express.Session. This is because you have no import called Express so it's trying to find it on the global scope. Of course, this does not exist!
This worked for me, assuming that the Session type was supposed to come from the express-session library:
import { Request, Response } from "express";
import { Redis } from "ioredis";
import session from "express-session";
export type MyContext = {
req: Request & { session: session.Session };
redis: Redis;
res: Response;
};
I believe the problem stemmed from different versions of a dependency used by express-session. I found the tutorial and this problem being discussed elsewhere (not on SO) but was able to make the changes below. req.session is available throughout my project now. In my use case, I wanted userId accessible via req.session.userId, so that's added (wasn't in original question).
import { Request, Response } from "express";
import { Session, SessionData } from "express-session";
import { Redis } from "ioredis";
export type MyContext = {
req: Request & {
session: Session & Partial<SessionData> & { userId: number };
};
redis: Redis;
res: Response;
};