Initialiser FireBase avec React JS

Par Megastudio, il y a 4 ans

Javascript React

Bonjour à toutes et à tous,

je souhaite instancier en premier Firebase pour assurer l'envoi et receptions de données. (mais déjà pouvoir me connecter

j'ai bien inscrit l'application, et

J'ai suivi la doc officielle

import 'bootstrap/dist/css/bootstrap.min.css'; import React, {useState} from 'react'; import 'semantic-ui-css/semantic.min.css'; // import { Icon } from 'semantic-ui-react'; // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; const firebaseConfig = { // ...ma config }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); function App() { return ( <div className="container-fluid"> <div className="row"> <div className="col-12 gradient row m-0"> <div className="col-2 cardColor height mt-3 mb-3">cc</div> <div className="col-9 mt-3 mb-3 row space"> <h1 className="p-4 text-white text-center">Bienvenue sur votre Dashboard </h1> <div className="col-2 height2 hexagon ml-3 text-center middle"><Icon disabled name='cloud upload' className="" size='big' color='red' /></div> <div className="col-2 cardColor height2"><Icon disabled name='assistive listening systems' size={150} /></div> <div className="col-2 cardColor height2"></div> <div className="col-2 cardColor height2"></div> <div className="col-2 cardColor height2"></div> <div className="col-2 cardColor height2 offset+1"></div> <div className="col-10 cardColor"></div> </div> </div> </div> ); } export default App;

ce que je reçois: Failed to compile ./src/App.js Attempted import error: 'getAnalytics' is not exported from 'firebase/analytics'. This error occurred during the build time and cannot be dismissed. (ou ce genre de message)

Je suis encore débutant avec react JS et native, je vous prie d'être indulgents ;)

7 réponses

Gulivert, il y a 4 ans

Hello,

Je ne connais pas firebase, jamais utilisé personnellement, mais où as-tu trouvé la doc ?
Car sur npm et google il donne une autre méthode.

ici : npmjs
là : google

Megastudio, il y a 4 ans

Merci pour ces docs, en fait j'ai pris ce qu'ils me donnent quand je suis connecté et que je crée une appli web.

C'est similaire à ta recherche sur google.

je vais regarder sur le lien npmjs, merci !

Megastudio, il y a 4 ans

Je suis sur la 9 désormais suite à un ticket de Firebase eux-même.

mon code actuel:

import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import React, {useState, useEffect} from 'react'; import 'semantic-ui-css/semantic.min.css'; import { Icon } from 'semantic-ui-react'; // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getDatabase, ref, set } from "firebase/database"; import { doc, setDoc } from "firebase/firestore"; const db = getDatabase(); const firebase = require("firebase"); firebase.initializeApp(functions.config().firebase); // Initialize Firebase const firebaseConfig = { ma config }; const analytics = getAnalytics(app); const app = initializeApp(firebaseConfig); // Source: https://www.holadevs.com/pregunta/73106/error-firebase-db-is-not-defined function App() { const [value, setValue] = useState(''); const addTodo = async () => { await setDoc(doc(db, "Users"), { //here Line 36:22: 'db' is not defined no-undef, how to define it ? title: "Los Angeles", describe: "CA", imageURL: "USA" }); setValue('') } console.log(value);

et : Module not found: Can't resolve 'firebase' in 'C:\Users\MegaS\Desktop\dashboard\src'

je sais pas pourquoi il cherche le module dans src alors que tout est installé dans dashboard !

Gulivert, il y a 4 ans

Etrange.... Tout semble pourtant correct...

J'ai fait un test de mon coté, j'ai installé la dernière version de firebase et j'essai juste d'initialiser analytics, je ne rencontre pas de soucis particulier.
Peux-tu poster ton package.json et ton yarn.lock ou npm.lock ?

Voici ce que j'ai fait :

import { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');

Version "firebase": "^9.0.1"

popotte, il y a 4 ans

Alors je viens juste préciser un truc:
Tes clés API ne les mets surtout pas dans ta const firebaseConfig, fous ça en variable d'environnement, ou alors dans les GithubSecrets :p

Ensuite si ça bloque, je vais essayer de retrouver un vieux projet où j'ai mis en place firebase (j'ai abandonné GoogleCloud pour AWS ^^'), c'etait un projet NextJs mais c'est pareil que React :p

Megastudio, il y a 4 ans

Merci ! Finalement google m'ont répondu et ça a fonctionné avec leur codes :p