Problem with firebase in vanslife in react router course | Scrimba | Page 1

surreal estuary May 9, 2023, 5:02 PM

#

Hi everybody. I'm following the firebase section. I have set up the vanlife app in my firebase account. I have downloading the vanlife app and I have opened it in VS code. I`m following all the instructions the teacher gives in my computer. But I don't know how to make it work. I have tried the following 1) to install firebase as in the instructions (npm install [email protected] --save) 2) I have added a require as in the instructions as well (const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");) 3)I have installed firebase/firestore/lite (npm install firebase-firestore-lite). Nothing works I have always the same error (see the image). Thanks in advance. Regards 😊

kindred folio May 9, 2023, 5:45 PM

#

Would you be able to share a repo with us?
Also, would you be able to tell us each step you did until you get to this point? (downloading the app (from where exactly) etc...)

surreal estuary May 9, 2023, 6:07 PM

#

kindred folio Would you be able to share a repo with us? Also, would you be able to tell us ea...

Hi Bence, Thanks very much for your reply. I have downloaded the vansLife zip from the scrim. It provides a Vite version of the scrim for you to work with in your machine, that's what I did. Then I copypasted the SDK configuration from my Firebase vanlife. I made the instalations throw the console in VS Code. I have created a repository for this project (https://github.com/Amapola-Negra/Revision-REPOSITORY/tree/main/Vanlife), but it contains just the "api.js" file which is the only one I have modified for the time being. I colud provide the original scrim in Scrimba, but bear in mind that the problem deals with the local environment. Let me know if you need more information. Thanks again and have good day! 😊

kindred folio May 9, 2023, 6:21 PM

#

Could you tell me what commands have you used in your terminal after you downloaded and unzipped your project?

surreal estuary May 9, 2023, 6:25 PM

#

Sure, the commands where 1) npm install [email protected] --save 2)npm install firebase-firestore-lite 😊

kindred folio May 9, 2023, 6:26 PM

#

You also need to run npm install

#

as, your project has certain packages which are all needed. eg.: react, react-router-dom, mirage.js etc...

surreal estuary May 9, 2023, 6:29 PM

#

Yes. I run npm install at the begining. Do I have to run it again? 😊

kindred folio May 9, 2023, 6:34 PM

#

Can you try to update the import to:
import { getFirestore, doc, deleteDoc } from 'firebase/firestore';

#

I wouldn't use firestore lite as that is an unofficial google library
Fortunately, everything is pretty much modular nowadays, so I would recommend you to remove firestore-lite and use purely official firebase libraries as you can "cherry-pick" what module you with to use from them anyway. 🙂

surreal estuary May 11, 2023, 10:09 AM

#

kindred folio I wouldn't use firestore lite as that is an unofficial google library Fortunatel...

Hi Bence. I used firestore lite because the teacher uses it. If I use just firebase could I work just the same? 😊

kindred folio May 11, 2023, 10:15 AM

#

Yes, In my opinion as everything is modular nowadays it is better to use the official library and import the modules from it that is actually needed in our application.

#

Only the relevant code will be included into the final application so the application size shouldn't big huge even tho the package itself is relatively "big"

surreal estuary May 11, 2023, 10:27 AM

#

kindred folio Yes, In my opinion as everything is modular nowadays it is better to use the off...

Yes, Bence. I agree it is better use official libraries. I have updated the import, the errors have disapeared, but I can see nothing. What can I do. 😊

kindred folio May 11, 2023, 10:28 AM

#

Would you be able to check the console for any errors?

#

Could you open the network tab, and refresh the page and check if you get any failing request?

surreal estuary May 11, 2023, 10:29 AM

#

The VS code console?

#

Where is the network tab? 😊

kindred folio May 11, 2023, 10:34 AM

#

In the browser, you can open the developer tab and see a console there

#

option + command + J if you are on a mac

surreal estuary May 11, 2023, 10:35 AM

#

Yes!!! It sais "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_firestore.js?v=63843d3f' does not provide an export named 'collection' (at api.js?t=1683800631090:3:24)"

kindred folio May 11, 2023, 10:35 AM

#

I think it should be just control + J on windows, but not 100% sure

#

can you delete node_modules folder

#

install the packages again

#

then restart the developer server?

surreal estuary May 11, 2023, 10:37 AM

#

How can I reinstall the packages? 😊

kindred folio May 11, 2023, 10:38 AM

#

You delete the node_modules folder so you remove the installed packages.
When you run npm install or yarn or pnpm install, your packages will be picked up from the package.json and will get installed

#

all of the packages installed can be found in the node_modules folder

surreal estuary May 11, 2023, 10:39 AM

#

Ok I'm going to do it!! 😊

kindred folio May 11, 2023, 10:39 AM

#

now that we talked about this, have you removed firebase-lite from your package.json?

#

Could you also remove package-lock.json before you run npm install?

surreal estuary May 11, 2023, 10:41 AM

#

No. I haven't removed firebase-lite. How can I do it?

kindred folio May 11, 2023, 10:42 AM

#

you can simply remove the line that contains firebase-lite from the package.json

#

or you can run a command in the terminal to remove it:
npm uninstall irebase-firestore-lite

surreal estuary May 11, 2023, 10:52 AM

#

Hi. I'm back. Now the console trows another error "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_firestore.js?v=63843d3f' does not provide an export named 'deleteDoc' (at api.js?t=1683800725010:3:29)" 😊

kindred folio May 11, 2023, 11:25 AM

#

Can you share the code where you import modules from firebase?

surreal estuary May 11, 2023, 11:32 AM

#

Sure. Here you have it https://github.com/Amapola-Negra/Revision-REPOSITORY/blob/main/Vanlife/api.js 😊

GitHub

Revision-REPOSITORY/api.js at main · Amapola-Negra/Revision-REPOSIT...

This is a collection of code with problems for revision - Revision-REPOSITORY/api.js at main · Amapola-Negra/Revision-REPOSITORY

kindred folio May 11, 2023, 11:44 AM

#

Could you remove the following lines:

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
// Initialize Firebase

surreal estuary May 11, 2023, 2:46 PM

#

Same result "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_firestore.js?v=26cb13c0' does not provide an export named 'deleteDoc' (at api.js:3:29)" 😊

kindred folio May 11, 2023, 3:55 PM

#

Could you show me your package.json?

surreal estuary May 11, 2023, 4:18 PM

#

Sure!! Here it is https://github.com/Amapola-Negra/Revision-REPOSITORY/blob/main/Vanlife/package.json 😊

GitHub

Revision-REPOSITORY/package.json at main · Amapola-Negra/Revision-R...

This is a collection of code with problems for revision - Revision-REPOSITORY/package.json at main · Amapola-Negra/Revision-REPOSITORY

kindred folio May 11, 2023, 4:43 PM

#

I am not too sure what could cause the issue. Would you be able to share the entire project with us so I can pull it down and test in locally?

surreal estuary May 11, 2023, 4:46 PM

#

Do I skeep node-modules folder? 😊

kindred folio May 11, 2023, 4:47 PM

#

Yes, please ignore that folder

surreal estuary May 11, 2023, 4:47 PM

#

Ok 😊

kindred folio May 11, 2023, 4:48 PM

#

Have you created the project using npx vite? in that case there should be a .gitignore file which automatically ignores the node_modules folder

surreal estuary May 11, 2023, 4:54 PM

#

I think this is all. No I haven't created the project I just downloaded the scrim which was created with Vite. I just unpacked it and started to work as the teacher said. Here is the link. Thank you very much for your help. https://github.com/Amapola-Negra/Revision-REPOSITORY/tree/main/Vanlife 😊

GitHub

Revision-REPOSITORY/Vanlife at main · Amapola-Negra/Revision-REPOSI...

This is a collection of code with problems for revision - Revision-REPOSITORY/Vanlife at main · Amapola-Negra/Revision-REPOSITORY

kindred folio May 11, 2023, 8:25 PM

#

I'll take a look at it soon

#

@surreal estuary I have made a PR for you.
The error I am getting is the following:
Uncaught ReferenceError: collection is not defined which means you do not have a firebase database setup yet with any collection called vans in it.

#

https://github.com/Amapola-Negra/Revision-REPOSITORY/pull/1

surreal estuary May 16, 2023, 11:42 AM

#

Hi Bence, I have merged the pull request. Yes. I have the collection (see capture). I have not that error. The error I have is "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_firestore.js?v=75a1c3cc' does not provide an export named 'deleteDoc' (at api.js:3:29)" Thanks again. 😊

kindred folio May 16, 2023, 12:50 PM

#

hmm have you deleted your node_modules folder and run npm install again?

#

you might still have some clashes between different libraries 🤔

surreal estuary May 16, 2023, 1:20 PM

#

Yes I did it last week I deleted the node_modules and run npm install. This is a mystery 😊

#

If I remove "doc, deleteDoc" from the import in the first line, then it says that firebase/firestore does not provide an export named "getFirestore". What can I do?😊

keen hound May 16, 2023, 5:13 PM

#

surreal estuary If I remove "doc, deleteDoc" from the import in the first line, then it says th...

Hi! So for your import, try changing it to

import { getFirestore, ...} from "firebase/firestore/lite"

Looks like you are importing from the wrong subdirectory and need to go one level deeper.

Also, don't forget to import collection, and getDocs because it seems you are attempting to use those.

#

This js the way they have it referenced in the docs.

surreal estuary May 16, 2023, 5:18 PM

#

Hi Ray! It was the point of departure. I changed as suggested in this channel because I had problems with firebase/firestore/lite. It Casused a lot of trouble as I mentioned at the begining. 😊

keen hound May 16, 2023, 5:25 PM

#

It shows in your package.json that you are working with the latest version of the firebase sdk. It makes no mention of having to import a separate package for lite. Which tells me that it is included in the firebase package. You show no other dependencies for firebase. But if that's an issue, there shouldn't be one for the imports. This is interesting. I'll fork a copy later and see if I can help you and @kindred folio figure it out.

kindred folio May 16, 2023, 5:41 PM

#

keen hound Hi! So for your import, try changing it to ```js import { getFirestore, ...} fro...

Unfortunately, a lot of people had problems with mixing up firebase + firebase lite and since firebase package itself already contains everything we can simply use the official package instead of an unofficial. (at least as far I could see firestore-lite is an unofficial package)

kindred folio May 16, 2023, 5:42 PM

#

keen hound It shows in your package.json that you are working with the latest version of th...

Interestingly I have no problem importing any of these modules from firebase

kindred folio May 16, 2023, 5:42 PM

#

surreal estuary Yes I did it last week I deleted the node_modules and run npm install. This is a...

yes, that was last week, but we have changed our package.json.
Try removing the node_modules and run npm install again, please.

surreal estuary May 16, 2023, 5:45 PM

#

Ok Bence, I'll try! 😊

kindred folio May 16, 2023, 5:48 PM

#

surreal estuary Ok Bence, I'll try! 😊

Alright, so there was a couple of missing imports from your api.js file

#

import {
  getFirestore,
  doc,
  deleteDoc,
  collection,
  getDocs,
} from "firebase/firestore";

#

the application works for me, although I am getting back an empty list but it is just because there was something with my connection (at least based on the console error which is odd).
I am on my holiday so my connection might not be the best 🤷

Nevertheless, I've just updated my the forked repo, freshly installed the packages and double checked the imports in the api.js

surreal estuary May 16, 2023, 5:54 PM

#

Now it's installing. What I don't understand is that the "doc" and "deleteDoc" are in gray color as if they were not in use. 😊

kindred folio May 16, 2023, 5:54 PM

#

I am happy to jump on a quick call and you could share your screen so I can take a quick look at your api.js

surreal estuary May 16, 2023, 5:57 PM

#

This is a capture 😊

kindred folio May 16, 2023, 5:58 PM

#

I cannot see the rest of the file 😅 Could you share the rest of the code with us as well?

keen hound May 16, 2023, 6:01 PM

#

Glad you all got it working!

surreal estuary May 16, 2023, 6:05 PM

#

Of course Bence !! By the way the installation process is over and I have the same error as before "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_firestore.js?v=45fec690' does not provide an export named 'collection' (at api.js?t=1684259376303:3:40)" This is the rest of the code. You deserve the most beautiful bigest purple heart in the world for all the trouble!!! 😊

kindred folio May 16, 2023, 6:05 PM

#

I might get the error I mentioned above because you need to setup the starting mode for Cloud Firestore Security:
Test mode or Locked mode

surreal estuary May 16, 2023, 6:05 PM

#

It is in test mode. 😊

kindred folio May 16, 2023, 6:07 PM

#

You don't use doc and deleteDoc anywhere, that was probably some left over code from before, you can safely remove them from the imports.

surreal estuary May 16, 2023, 6:09 PM

#

Done, the error is there. 😊

kindred folio May 16, 2023, 6:12 PM

#

well this is quite annoying 😂
Could you restart your dev server and do a hard reset in the browser? I am hoping it is no just some sort of caching issue

surreal estuary May 16, 2023, 6:26 PM

#

How can I do that? 😊

kindred folio May 16, 2023, 6:29 PM

#

first, stop the dev server by pressing control + c
Go back into your browser, and open the developer console by pressing option + command + j.
Now command + click on the refresh button, it should show 3 options:
normal reload
hard reload
empty cache and hard reload

Select the last option

#

restart the dev server + refresh the page

surreal estuary May 16, 2023, 6:35 PM

#

I cannot believe it!!!! I press control + c and then I run npm run dev and look at this!!! 😊

#

Have a nice day!!! Happy codding happy_coding 😊

#

The rest of the app is broken but it is normal as the rest is not uptaded. 😊

#Problem with firebase in vanslife in react router course