I was making a linkedin clone following Clever programmer's video. In their video they Imported firebase using import firebase from "firebase"
But I can't import firebase from firebase. I can only import folders in firebase eg: auth, app
Also I have the Import cost extension installed. It detects firebase/auth, firebase/firestore
kind of imports but it doesn't detect import firebase from firebase
How can I solve this problem. Any help will be much appreciated. I'm stuck for 5 days now.
Related
There is a ready front-end built using React.
Is it correct to connect it?
So far, there is only 1 page with one div block in which there are pictures. I read the documentation and didn't quite understand how it was done.
Can you please describe in detail all the steps to enable it?
I have a fresh/clean Laravel project. I don't know Laravel & React well yet. Therefore, I ask you to tell in detail and step by step all the actions so that React styles work in welcome.blade.php.
React structure (src/index.js):
import React from 'React';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import 'macro-css';
const root = ReactDOM.creactRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
I tried to migrate the code from React index.js into Laravel's app.js and I threw all the other files next to it in the hope that it would work.
Please, first go through the Laravel Bootcamp which will take you through how Laravel integrates with React.
Writing Views In React / Vue
Our Breeze and Jetstream starter
kits give you a great
starting point for your next Laravel application powered by Inertia.
In addition, the Laravel Bootcamp
provides a full demonstration of building a Laravel application
powered by Inertia, including examples in Vue and React.
What's the best way to add Google Analytics to a Vite React project? I have added the gtag.js script into the index.html file within the Vite project. It does track users in Real Time but doesn't seem to track anything else. This makes me think the code should be in App.jsx instead...
Because when I go to GA I am getting the message saying there is No data received from my website yet.
I have looked into react-ga but this seems to only work with UA-XXX tags where as I am using GA v4 which uses IDs of G-XXXX
Has anyone added a v4 GA tag into a React project?
Update
Just found https://www.npmjs.com/package/react-ga4
This is how I have it now...
import React from 'react'
import ReactGA from 'react-ga4'
import {Helmet} from 'react-helmet'
import Footer from './components/base/Footer'
import Header from './components/base/Header'
import Form from './components/Form'
import Table from './components/Table'
ReactGA.initialize('G-XXXXXXX')
ReactGA.send('pageview')
function App() {
return (
...
But still getting the message "No data received from your website yet." in GA
It's best to use a vite plugin for that. Currently Vite-plugin-radar is available and it supports 7+ analytics providers ( Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji and Microsoft Advertising)
Another advantage with vite plugins is that mostly they are framework agnostic, so you can use them with Vue, React, Svelte or other vite supported frameworks.
I have a problem with firestore. I want to read some data from firebase but I can't import collection from firebase Attempted import error: 'collection' is not exported from 'firebase/firestore/'. I read some articles that said this problem is related to v9 SDK.
You have to import the Firebase SDKs correctly. The issue is in the first line where you are importing from "firebase" directly which is not the ideal method and as per my understanding, the import calls/methods are not in sync with the version changes. Be sure to read the documentation on using Firebase with module bundlers
Starting with Firebase v8.0.0, you have to import Firebase SDKs as per the documentation where it is mentioned that there was a breaking change in version 8.0 where
browser fields in package.json files now point to ESM bundles instead
of CJS bundles. Users who are using ESM imports must now use the
default import instead of a namespace import
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Code that uses require('firebase/app') or require('firebase') will still work, but you should change these require calls to require('firebase/app').default or require('firebase').default
Change your code as shown below :
import firebase from "firebase/app"
import { getFirestore } from "firebase/firestore";
import { collection, addDoc, getDocs } from "firebase/firestore";
import "firebase/auth"
const auth = firebase.auth()
This should work for you. If not, then probably you have updated your SDK version from 8 to 9 and with version 9 things changed a bit for importing firebase, but there is no need to downgrade to a previous version, there is a "compatibility" option so can use the /compat folder in your imports, like this
import firebase from 'firebase/compat/app';
From the Firebase documentation:
In order to keep your code functioning after updating your dependency
from v8 to v9 beta, change your import statements to use the "compat"
version of each import as shown below (v9 compat packages are API
compatible with v8 code) :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
That error message means there is no such export "collection" from the module "firebase/firestore/". So the error is on the second line when you are trying to import "collection".
In the docs there is no trailing "/" in "firebase/firestore". Try removing that trailing "/" and try again.
I suggest you follow this guide on setting up firestore
I am trying to use firebase massaging in my SSR app which is created using https://github.com/jaredpalmer/razzle with-react-router-3. I am already using firebase which works great including hosting. But started throwing an error when I started adding messaging in the app.
My entry point looks like,
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/messaging';
import FirebaseConfig from 'config/firebase-config.json';
if (!firebase.apps.length) {
firebase.initializeApp(FirebaseConfig);
}
const messaging = firebase.messaging();
I am getting the bellow error when I start the server with razzle start
/Users/subkundu/Desktop/Work/Projects/React/ownerstown/node_modules/#firebase/messaging/index.ts:75
if (self && 'ServiceWorkerGlobalScope' in self) {
^
ReferenceError: self is not defined
How do I fix it? Any lead will be amazing. Thanks. :)
I believe that you have to provide a check to see if the window is available.
let Messaging;
if (YOUR_CHECK_HERE) {
Messaging = firebase.messaging();
}
// Then you can use "Messaging"
I'm not familiar with razzle. Accessing the window varies depending on Server Side Rendering (SSR) frameworks. I got the idea from this post. When I ran into this problem with nuxt.js I was able to check for the window with this process.browser. Hope this helps!
In the angular firebase, I came across following two things:
import { AngularFireDatabase } from 'angularfire2/database';
import firebase from 'firebase';
If both can be used for interacting with the database, what is the difference between them?
The first line imports the AngularFire2 library.
The second line imports the Firebase JavaScript SDK, which is what AngularFire uses under the hood.