Webpack is currently unable to build my project due to an error:
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
Imports that Webpack doesn't like most likely look like this:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";
import { getStorage } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-storage.js";
import { onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";
How can I import this with npm or any other webpack-friendly way?
Is it not possible for you to just do npm i firebase and import those functions?
Also what framework are you using? There could be a firebase library tailored specifically for your framework, like Angular.
Related
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 trying to use v-mask package in vue using npm. i run the npm install v-mask as the documentation says, but where exactly I should put in code to initialization? i tried to put it in the main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
Vue.use(VueMask);
createApp(App).mount('#app')
but get an error 'Vue' is not defined. what am I doing wrong?
v-mask is built for Vue 2, so you can't use it in Vue 3 (unless you use the migration build, but that's not really intended for third party plugins).
Consider using maska, which is a masking library that supports Vue 3:
npm i -S maska
Example usage:
import { createApp } from 'vue'
import App from './App.vue'
import Maska from 'maska'
createApp(App).use(Maska).mount('#app')
demo
try to save the app in a variable and execute use for app
import { createApp } from 'vue'
import App from './App.vue'
import VueMask from 'v-mask'
const app = createApp(App)
app.use(VueMask)
app.mount('#app')
After upgrading to 8.0.0, I get the following error:
Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as 'firebase').
My import looks like this:
import * as firebase from "firebase/app"
firebase.initializeApp({ ... })
TypeScript also complains:
Property 'initializeApp' does not exist on type 'typeof import("/path/to/my/file")'. ts(2339)
How do I fix this?
In version 8.0.0, the Firebase SDK had a breaking change in the way it handles exports:
Breaking change: 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 in order to get proper typings (for code completion,
for example) users should change these require calls to
require('firebase/app').default or require('firebase').default. This
is because the SDK now uses typings for the ESM bundle, and the
different bundles share one typings file.
So, you will have to use the new ESM bundle default export:
import firebase from "firebase/app"
firebase.initializeApp({ ... })
If you are working with SDK version 9.0, read this question instead:
How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
old way to import firebase : import * as firebase from "firebase/app";
New way to import in 8.0.0 version : import firebase from "firebase/app"
eg: the way i did it. Only the first 2 lines are relevant, the other lines are only added as apart of my code but its quite general tbh!
import firebase from "firebase/app"
import "firebase/auth"
const firebaseConfig = {
apiKey: XXXX,
authDomain: XXX,
projectId: XXXX,
storageBucket: XXXX,
messagingSenderId: XXXX,
appId: XXXX,
}
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
}
export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
replace XXXX by ur data, just being clear :)
try using this for firebase 9 above
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
or you can read more on: https://firebase.google.com/docs/web/modular-upgrade
If you are using auth you need to import seperately as:
import 'firebase/auth';
As you are not importing everything like '* as firebase'.
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 updated
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
Library's like FirebaseUI authentication have not been updated, and I've been waiting for FirebaseUI update since april
https://stackoverflow.com/a/66708552/12490386
tip from my own mistakes: make sure all spellings are correct, and try using this 😁import firebase from 'firebase'
This is the new firebase 9 updates :
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
I solved my problem using this kind of 'import' approach in firebase version 9.6.1 :
import "firebase/auth"
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyBbaKxbqufRCfrwGpQ3sfuBgIifIhTCP1A",
authDomain: "facebook-clone-f4994.firebaseapp.com",
projectId: "facebook-clone-f4994",
storageBucket: "facebook-clone-f4994.appspot.com",
messagingSenderId: "593047789391",
appId: "1:593047789391:web:11459d7b291b9465542f3a",
measurementId: "G-FNW1K23DBJ"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { auth, provider };
export default db;
I had faced a similar problem while trying to use Firebase authentication in an old site.
This solved the problem:
npm uninstall firebase step
npm install firebase
I solved similar problem for firebase version > 9, by using in the route:
/compat/
Eg:
import firebase from "firebase/compat/app";
2021 update:
Firebase v9 comes with new API designed to facilitate tree-shaking (removal of unused code). This will make your web app as small and fast as possible.
The /compat packages are created for compatibility and to make the upgrade to the modular API easier. With the downside of not getting the performance perks. To get the performance benefits of the modular design, use getApps instead:
import { getApps, initializeApp } from 'firebase/app';
if (!getApps().length) {
initializeApp({
// your config
});
}
From the library's JSDoc: getApps return A (read-only) array of all initialized apps..
There is also a getApp function that When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.
Version 9 provides a set of compat packages that are API compatible with Version 8. They are intended to be used to make the upgrade to the modular API easier by allowing you to upgrade your app piece by piece. See the Upgrade Guide for more detail.
To access the compat packages, use the subpath compat like so:
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
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/
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Firebase from 'firebase';
class App extends Component {
render() {
return (
<View>
<Text>App</Text>
</View>
)
}
}
export default App;
So this code is crashing because of the import Firebase from 'firebase' I used 'npm install --save firebase' and I did 'npm link firebase' and firebase is in package.json, but that import is still crashing it. Anyone know why? I saw some people just created a variable for firebase, but it does this for all imports and I also need to add a google sign in import, which also crashed my app.
Configure firebase before running the app. Check the following link to configure firebase in Android or iOS.
https://rnfirebase.io/docs/v4.2.x/installation/android
https://rnfirebase.io/docs/v4.2.x/installation/ios