Why do we need to import what seems like the same module twice when using Firebase?
import { firestore, initializeApp } from 'firebase';
import 'firebase/firestore';
Would be interesting to hear why this case may come up in general node/js es6 modules and not just here.
I usually do something like this:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
The first line imports the main Firebase dependency, so that you call firebase.initializeApp(...).
The second and third line then import specific Firebase product SDKs on top of that, so that you can access firebase.firestore() and firebase.auth().
This pulls in the minimal amount of JavaScript that is needed for my specific app.
Your first line pulls in the SDKs for all Firebase projects, and then imports a few objects out of there. This is quite wasteful, as you're unlikely to be using all products in an app.
I'm actually not sure what the second line does in your case.
Related
Working with Google cloud DLP and nodejs. After import DLP from "#google-cloud/dlp, how can I import InfoType, Likelihood, IInspectContentRequest and other types from the library as it contains all types.
Solution import {protos} from "#google-cloud/dlp
I have a Next.js app with mongoose to connect to my mongodb. The models import db.ts to make sure that there is an active connection to the database like so:
import { model, models, Schema } from "mongoose";
import "../../db";
This is the code that connects to my database:
import mongoose from "mongoose";
mongoose.connect("mongodb://admin:admin#localhost:27022/admin");
I have gone ahead and made some serverless functions in next.js and added some database fetching from the models in my getServerSideProps. All of which worked perfectly fine. I can interact with the models, create new Documents, delete them and update them. there are no issues.
The Problem
I recently added a new component: it is at /pages/flashcards/[id].tsx. Just like my other components, this one imports one of my mongoose models. However, for some reason, Webpack feels like it should bundle the model and its import of ../../db and send it and send it over to the client, which results in this error:
TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect
is not a function
Again: This does not happen with any of my other components which use the exact same models as the component which is having these problems.
The issue occurs because you have the following unused import in the /pages/flashcards/[id] page.
import question from "../../db/models/question";
Any code inside getServerSideProps or getStaticProps, and imports used exclusively by these methods, is removed by Next.js when building the client bundle.
However, since question is not explicitly being used in getServerSideProps, Next.js can't figure out the import is only meant to be used on the server. This means it will be included in both the server and client bundles.
You can use the Next.js Code Elimination tool to verify what Next.js eliminates from the client-side bundle. You'll see that if you run your page's code through it, the import is not removed. However, as soon as you reference and use it inside getServerSideProps, Next.js automatically eliminates it from the imports.
Make sure to always comment out/remove unused imports (there are linting rules to help you do that).
Have you tried upgrading the next npm package to the latest version? (12.0.8 as of this writing). I had a similar issue with Next giving inconsistent errors between different API routes, all configured the same way but some raising the same TypeError you shared. Upgrading the package resolved the issue for me.
we usually use below statement to use authy library in node file using js ,mostly by require statement !
const authy = require('authy')('API KEY');
I've moved my code to nest eco system and now How should i do the same using typescript ,as i also want to pass API Key to it ?
I've tried below code as well ,but still it's not working
import { authy } from 'authy'(API KEY)
suggest something !
I have faced a similar issue in my NestJS project when using twillio library.
Currently, I have resolved this by importing it this way:
import authy = require('authy');
If, this doesn't work for you (for any reason e.g. TypeScript compile error), then can you try the following import statement?
import * as Authy from 'authy';
Also, let me know which one works for you.
I am a new to Node.js and Firebase.
I have successfully tried to deploy some Cloud Functions to test them a bit.
I have a Node.js project in which I have a class defined as:
import * as Api from './api';
export default class MyClass {
constructor(props) {[...]}
someFunction(props) {
return Api.someOtherFunction(props.arg1).then([..]).catch([..]);
}
}
In the Api code I use the firebase admin SDK and I work with the real time database.Ex.:
ref.child(`users/${userId}`).set({
id: userId,
arg1: arg1,
arg2: arg2
});
Now, the problem is that I would like to use MyClass in a cloud function.
I have read a lot about ES6 in Cloud Functions, too (ex.: here), but I am not able to get rid of the error message
SyntaxError: Unexpected token import
I have tried to convert to require statements but I am not able to require my local module where MyClass is.
I don't care if it will be a Node.js local module or simply some classes in clear hierarchical structure.
What I would like to ask is if there is a specific documentation about this situation (I have searched a lot for it) and/or if I am following the right way to structure my project.
If the answer is "NO", please give me some tips on how to structure it.
Cloud Functions (node.js) currently does not support the ES6 import syntax, you have to use require().
The examples in the article you linked are using Babel to convert ES6 to ES5. Even if you convert your import statements to require() you're going to encounter the fact that ES5 does not support the class syntax. If you want to do what the article it doing, follow the steps to get Babel converting your ES6 script to ES5 before sending it to Firebase Cloud.
Looking for some guidance on WebStorm v11 and using Angular2 imports, I'm also on a Mac.
Whenever I am creating a component and I import for example Http service from Angular 2, WebStorm does its thing and automatically imports it on the page for me. However the URL for the import is a crazy string, but in all the demos I've seen it just imports to a simple string like this:
import {Http} from "angular2/core";
but mine will import like this:
import {Http} from "../../../node_modules/angular2/src/http/http";
So I will manually go and change it to the more simple one for readability and it still works fine. Any ideas or help on how I could get it to import with the simple string?