I have watched every tutorial and all done all the research possible, yet I keep getting errors for my code. An example error (this error keeps occurring for different part of the code)
In the same file I import import firebase from 'firebase/compat/app' add then const storage = firebase.storage(), in a different file I also import import firebase, {initializeApp} from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore"; I also tried to import firebase/storage but I had the same problem. Any help would be nice, thank you in advance :)
The syntax for the import firebase/storage should be like this:
import firebase from "firebase/compat/app";
// After you import app...
import "firebase/compat/storage";
You may refer to this documentation about compat libraries.
Related
I want to use reactDOM for injecting content to page. So, I want to
import React from 'react';
...
import App from './src/js/App';
const root=createRoot(document.getElementById('title'));
root.render(
<App/>
);
included into my background.js but I get the following
error: SyntaxError: Cannot use import statement outside a module
Import that is causing the error:
import React from 'react'
I've done some research and tried adding type: "module" but that does not work.
What can I do to solve this?
Facing pretty similar issues atm, digging SO for a while.
Try to play around with
import React from './react.js'; // path and file extension here
or
import * as React from './react.js'; // another import option
Also, ensure you have manifest v3 in order type: "module" to work.
After many research,
I did npm run eject
here is the working react setup
https://github.com/rba1aji/chrome-extension-template-react
I am building my first firebase app using JS and Webpack. I'm following the modular approach. I have followed the documentation and forums for this, However I cannot seem to get my imports to work. This is the error I keep getting :
WARNING in ./src/index.js 12:12-25
export 'initializeApp' (imported as 'initializeApp') was not found in 'firebase/app' (possible exports: default)
The import is in Index.js as :
import { initializeApp } from "firebase/app";
I have followed a few tutorials on Youtube, the official documentation step by step, over and over, and forums as well. Kindly help this newbie get started. Any suggestions or advice will be appreciated. Thanks.
I solved the problem changing:
import { initializeApp } from "firebase/app";
to
import firebase from 'firebase/app'
and using
firebase.initializeApp(firebaseConfig);
instead of
initializeApp(firebaseConfig);
I'm using
"cypress-firebase": "^2.0.0",
"firebase-admin": "^9.11.1"
In my cypress command.js file:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";
import { attachCustomCommands } from "cypress-firebase";
const fbConfig = {
}
firebase.initializeApp(fbConfig);
attachCustomCommands({ Cypress, cy, firebase });
When I try to execute the code, I face the following issue:
TypeError
The following error originated from your test code, not from Cypress:
> Cannot read property 'initializeApp' of undefined
In v9 of the Firebase SDK the API surface changed to using modular, tree-shakeable code. Expect pretty much every piece of documentation or example code you see to have been written for v8 or older Firebase SDK versions that need updating.
Read more about migrating here.
Because cypress-firebase has not yet been updated to support the v9 SDK, you need to import the compatibility SDK instead. Note that the compatibility SDK is deprecated and ideally you should find a package that has been updated to support v9.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
import { attachCustomCommands } from "cypress-firebase";
const fbConfig = {
}
firebase.initializeApp(fbConfig);
attachCustomCommands({ Cypress, cy, firebase });
I'm trying to import firebase in a Vue 2 app, but I'm running into this annoying issue.
My imports look like:
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
but when I serve it, I get:
export 'default' (imported as 'firebase') was not found in 'firebase/app'
...and my views don't render or route.
My version of firebase is 9.0.0 off of npm.
Due to release of Firebase SDK Version 9 on 25th August 2021, many users using Firebase Web SDK version 8 are struggling with the same issue.
According to the documentation, Apps currently using Firebase Web SDK version 8 or earlier should consider migrating to version 9 as follows:
Before: version 8 (Old)
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
After: version 9 compat (New)
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Due to Doug Stevenson's suggestion to check my firebase version, I ended up checking firebase's upgrade docs and found this
https://firebase.google.com/docs/web/modular-upgrade
Following the instructions there (changing the paths from firebase/x to firebase/compat/x) fixed my issue perfectly. Thank you all, and I hope any other clueless folk like myself confused by the new format can be helped by this post.
According to firebase documents: Update imports to v9 compat. 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.
For example:
Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import "firebase/database";
import "firebase/storage";
After: version 9 compat
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
adding /compat for that three lines worked on my react project
import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
Encountered a very weird issue. When trying to import firebase, I got the following error:
./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').
The structure of my project is: A parent folder containing a react client folder. I installed firebase in the parent folder, initialize a firebase app in the firebaseConfig file in the parent folder, and then import it into the react client folder.
I later tried installing firebase in the react client folder and import firebase in it. Weirdly, after I installed firebase in the client folder, doing "npm ls firebase" in the client folder returns empty, even though firebase is indeed in the node modules and package.json in the client folder. I am wondering what caused the problem.
firebaseConfig.js in the parent folder
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
......
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Unfortunately, you've upgraded your "firebase" dependency to 8.0.0 but the "firebaseui" dependency doesn't support it yet. You will have to temporarily downgrade firebase to version 7.24.0 until firebaseui supports the breaking changes in 8.0.0.
Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be update.
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Library's like FirebaseUI authentication
Firebase version I was using Firebase>8.0.0 Line of code I was using import * as firebase from 'firebase/app'; this import works for Firebase<8.0.0 Please go and use this import firebase from 'firebase/app'; if you are using firebase>8.0.0 as of now (4th Aug 2021) things might change on later versions. This is because you are using the wrong line of code, nothing wrong with the system. Go and check the package.json file on your project folder.
Check here package.json
Checking firebase version on package.json file
When I installed firebase, by default it has installed the version of 9.0.0. And I see the mentioned error but when I changed it to 8.9.1 and imported it as below it worked for me.
import firebase from 'firebase/app'
First determine your firebase version:
firebase --version
If you are using version 9, replace this line
import firebase from "firebase/app"
with
import firebase from 'firebase/compat/app'
Reference:
https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/