Forum : Initialiser FireBase avec React JS

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 ;)

Gulivert

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

Auteur

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 !

Gulivert

ha je t'ai dis une bétise, sur google j'ai trouvé la doc en rapport, par contre elle est pour la version 9, et non la 8, tu as installé quelle version ?
https://firebase.google.com/docs/analytics/get-started?platform=web

Megastudio

Auteur

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

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

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

Auteur

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

Initialiser FireBase avec React JS

7 réponses