I'm stuck at this error. I'm beginner in react native and firebase. I just want to make a connection between react native and firebase.
Please anyone has an idea about this problem?
index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, {Component} from 'react';
import ReactNative from 'react-native';
import * as firebase from 'firebase';
const StatusBar = require('./components/StatusBar');
const ActionButton = require('./components/ActionButton');
const ListItem = require('./components/ListItem');
const styles = require('./styles.js')
// Initialize Firebase
firebase.intializeApp({
apiKey: "XXXX",
authDomain: "XXXX",
databaseURL: "XXXX",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX"
});
Package.js
{
"name": "Primed_Network",
"version": "0.2.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"apsl-react-native-button": "^3.1.0",
"firebase": "^3.1.0",
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-firebase": "^2.1.2",
"react-native-textinput-effects": "^0.4.0",
"react-native-vector-icons": "^4.3.0"
},
}
Try to import firebase like this
import firebase from 'firebase';
Related
the problem that i don't know how to solve it is (TypeError: Cannot read properties of undefined (reading 'call')) basically i have no idea where it can be in the console i don't have thread only on the error page
this is what my app looks like
app/studio/[[...index]]/page.tsx
'use client'
import {NextStudio} from 'next-sanity/studio'
import config from '../../../sanity.config'
export default function StudioPage() {
// Supports the same props as `import {Studio} from 'sanity'`, `config` is required
return <NextStudio config={config} />
}
app/studio/[[...index]]/head.tsx
export {NextStudioHead} from 'next-sanity/studio/head'
import {NextStudioHead} from 'next-sanity/studio/head'
export default function CustomStudioHead() {
return (
<>
<NextStudioHead favicons={false} />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://www.sanity.io/static/images/favicons/favicon-32x32.png"
/>
</>
)
}
app/studio/[[...index]]/head.tsx
'use client'
import config from '../../../sanity.config'
import NextStudioLoading from 'next-sanity/studio/loading'
export default function Loading() {
return <NextStudioLoading config={config} />
}
next.config.js
module.exports = {
reactStrictMode: true,
experimental:{
appDir: true
}
}
sanity.cli.ts
import {defineCliConfig} from 'sanity/cli'
export default defineCliConfig({
api: {
projectId: process.env.NEXT_PROJECT_ID,
dataset: 'production'
}
})
sanity.config.ts
import {defineCliConfig} from 'sanity/cli'
export default defineCliConfig({
api: {
projectId: process.env.NEXT_PROJECT_ID,
dataset: 'production'
}
})
package.json
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#portabletext/react": "^2.0.0",
"#sanity/image-url": "^1.0.1",
"next": "latest",
"next-sanity": "^3.1.3",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"#sanity/vision": "^3.0.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/eslint-config-studio": "^2.0.1",
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "4.8.4"
}
}
I faced the same error and solve it by installing the canary version of next 13 "npm i next#13.0.8-canary.2"
I'm having an issue using pinia, Previously I used vuex on my project but I wanted to migrate to pinia to handle my store. So I think, I setup pinia properly. So I can run the serv of my application without issues. But here is what i get when i open the page (PS: The vue dev tools is not anymore detected):
Here is my file package.json:
{
"name": "ecomm-challenge",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"core-js": "^3.6.5",
"pinia": "^2.0.14",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-pinia": "~0.1.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
and here you can find my main.js file:
import { createApp } from "vue";
import App from "./App.vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCartShopping } from "#fortawesome/free-solid-svg-icons";
import { createPinia } from "pinia";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
library.add(faCartShopping);
const pinia = createPinia();
createApp(App)
.use(pinia)
.component("font-awesome-icon", FontAwesomeIcon)
.mount("#app");
Here is my github if someone want to check the code: https://github.com/Elsong1120/Ecomm-challenge
Thanks to anyone who will help me.
Had similar issues this is what helped me:
1st create a new file in store folder \store\store.js wich looks like this:
import { createPinia, setActivePinia } from "pinia";
const pinia = createPinia();
setActivePinia(pinia);
export default pinia;
2nd import the pinia (exported from \store\store.js) into your main.js
import { createApp } from 'vue';
import pinia from './stores/store.js';
import App from './App.vue';
const app = createApp(App);
app.use(pinia)
app.mount('#app');
I'm running my firebase project and got this error in the terminal
This dependency was not found:
firebase in ./src/firebaseInit.js
To install it, you can run: npm install --save firebase
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp
inside my firebaseInit.js
import firebase from 'firebase';
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxx"
};
export default firebase.initializeApp(firebaseConfig);
and here's my package.json
{
"name": "mevnproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.25.0",
"core-js": "^3.6.5",
"firebase": "9.6.11",
"socket.io": "^4.4.1",
"vue": "^2.6.11",
"vue-chat-scroll": "^1.4.0",
"vue-google-charts": "^0.3.3",
"vue-router": "^3.5.3",
"vue2-google-maps": "^0.10.7",
"vuetify": "^2.6.2",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0"
},
"devDependencies": {
"#mdi/font": "^6.5.95",
"#mdi/js": "^6.5.95",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"material-design-icons-iconfont": "^6.1.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I tried to uninstall and reinstall the firebase but still got the same error.
edit: in my components i've the script looks like this
<script>
import { db } from "../../firebaseInit";
export default {
data() {
return {
message: null,
};
},
methods: {
saveMessage() {
db.firestore()
.collection("chat")
.add({
message: this.message,
})
.then(() => {
console.log("Document Written");
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>
From your package.json file we can see that you use the Firebase SDK version 9. You therefore need to adapt your firebaseInit.js file. I recommend exporting only the services you need, i.e. Firestore in your case (see your comment below).
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxx"
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
export { db };
Then, in your component you do like:
import { db } from '../firebaseInit';
import { collection, addDoc } from 'firebase/firestore'; // Example
export default {
data() {
return {
message: null,
};
},
methods: {
saveMessage() {
addDoc(collection(db, 'chat'),
{
message: this.message,
})
.then(() => {
console.log("Document Written");
})
.catch((error) => {
console.error(error);
});
},
},
};
If you need to use several services, do as follows (for example):
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxx"
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const storage = getStorage(firebaseApp);
export { db, storage, auth };
and in the component
import { db, auth } from '../firebaseInit';
import { doc, getDoc } from 'firebase/firestore'; // Example
import { signInWithEmailAndPassword } from '#firebase/auth'; // Example
More details in the doc.
I'm trying to use firebase emulators on my Mac to run a simple NextJS hello world program. It's literally a hello world example. I'm forwarding all host requests to a function that I wrote, as bellow:
const { join } = require('path')
const { https } = require('firebase-functions')
const { default: next } = require('next')
const isDev = process.env.NODE_ENV !== 'production'
const nextjsDistDir = require('./next.config.js').distDir
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
},
})
const nextjsHandle = nextjsServer.getRequestHandler()
exports.nextjs = https.onRequest((req, res) => {
return nextjsServer.prepare().then(() => {
nextjsHandle(req, res)
})
})
And here is how my package.json file looks like:
{
"name": "firebase-boilerplate",
"main": "server.js",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"serve": "next build && firebase emulators:start --only functions,hosting --project 123"
},
"dependencies": {
"dotenv": "^8.2.0",
"firebase": "^8.2.3",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"next": "^10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"#types/node": "^14.14.21",
"#types/react": "^17.0.0",
"typescript": "^4.1.3"
}
}
and like I said, the page I'm trying to load is like this:
import Head from 'next/head';
// import {app} from '../services/firebase';
export default function Home() {
return (
<>Hello World </>
)
}
Now, when I run this on my mac with "nom run serve", emulators boot up ok, but the moment it try to access localhost:5000/index it keeps compiling and calling my "NextJS" function and eventually leads to timeout. Occasionally though, I do get the "Hello World" output, but only after so much computation, and only occasionally. What exactly is wrong? Is fb emulator not a reliable software or not working for Mac? OR I'm missing something?
Thanks
I am using Ionic 2:
Your system information:
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed
When I run ionic serve, I get the following error:
Typescript Error
Cannot find namespace 'firebase'.
...t/IDE/ionic-apps/theWhoZoo-chat/node_modules/angularfire2/database/database.d.ts
constructor(fbConfig: FirebaseAppConfig);
list(urlOrRef: string | firebase.database.Reference, opts?: FirebaseListFactoryOpts): FirebaseListObservable<any[]>;
object(urlOrRef: string | firebase.database.Reference, opts?: FirebaseObjectFactoryOpts): FirebaseObjectObservable<any>;
This is a new Ionic project created with ionic start ....
If anyone can suggest how I can resolve this, I would appreciate it.
I think it may be related to compatibles withing Ionic versions. The reason I say this, is because I am following this tutorial, and I guess he isn't using Ionic Framework Version: 2.0.0-rc.4. His example has an app.ts, where I split it into app.module.ts and app.component.ts as required by rc.4.
More info:
typings.json
{
"globalDependencies": {
"firebase3": "file:node_modules/angularfire2/firebase3.d.ts"
}
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"angularfire2": "^2.0.0-beta.3-0930330",
"firebase": "^3.3.0",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "theWhoZoo-chat: An Ionic project"
}
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FIREBASE_PROVIDERS, defaultFirebase, AngularFire, FirebaseAuth } from 'angularfire2';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
})]
})
export class AppModule { }
This seems to have resolved my issue.
Adding the following to app.component.ts:
import firebase from 'firebase'
...
firebase.initializeApp({
apiKey: "",
authDomain: "baseapp.com",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
});