I'd like to use firebase node package in my project & I've already installed it globally. But I couldn't call it in JS. How could I achieve this?
/** #odoo-module **/
import { initializeApp } from 'firebase/app';
console.log('initializeApp')
console.log(initializeApp)
I am using Odoo15 by the way.
Related
I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs
I wish to use an import statement in a firebase.js file
to use the classic import of firebase :
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js";
The limitations of the project dont allow me to install the firebase npm module
So I try to import it this way instead but I got the error
Cannot use import statement outside a module
So the only way I know is to add "type"="module" to my package.json file
but that'll just mess up the entire codebase relying on require, __dirname and other stuff which ecmascript does not support.
So Can I just convert one file type to a module
or is there any other way to import firebase from the url without installing the npm package
As a workaround, you can try to fork firebase sdk and install it adding to dependencies in package.json:
...
"dependencies" : {
....
"firebase": "url_to_your_fork.git",
....
}
And then do npm install.
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/
I currently have firebase and my javascript files, which use firebase loaded through <script>. Clearly, this is not a very good way of doing it.
I want to be able to use webpack with my front end javascript, but I'm facing some issues:
My layout is like this:
user/
index.js
file1.js
file2.js
file1.js and file2.jsare included into index.js but all files use firebase.
My question is do I need to include firebase, and all of my requirements, like firestore, functions and messaging. into every single file, or can I include it once somewhere, to be used throughout all files?
When I include it in every file, I get an error saying that firebase could not be found.
Thanks in advance.
Check out the Firebase package on npm. In the instructions for using webpack, you can simply import the modules you need into file1.js and file2.js.
import * as firebase from 'firebase';
var app = firebase.initializeApp({ ... });
Note that the documentation says to only include the features you need (to not bloat your bundle.js).
// This import loads the firebase namespace along with all its type information.
import * as firebase from 'firebase/app';
// These imports load individual services into the firebase namespace.
import 'firebase/auth';
import 'firebase/database';
// In your case, include Firestore in the files you use them in.
import 'firebase/firestore';
I am trying to integrate D3 and topojson using Meteor + Angular2
import { Component } from '#angular/core';
import template from './d3map.component.html';
import * from 'd3'
#Component({
selector: 'd3map',
template
})
export class D3MapComponent {}
I have also used below meteor command to install d3
meteor npm install --save d3
However, I get the below error
client/imports/app/d3map/d3map.component.ts (4, 15): Cannot find module 'd3'.
Any working examples/plunkr would help. Thank you
It seems like d3 is not installed.Do one thing go to .meteor folder of your project and open your packages file using any editor. check if D3 is installed or not in the list.
if not installed use meteor add d3js:d3 to install it. or some other package from atmospherejs.com
for reference try one of these. whichever works for you.
import * as D3 from 'd3/index';
import * as D3 from 'd3';